As an integral part of most web and mobile apps, icons have a crucial role to fill. Pictograms take the place of words so frequently in our world that societies have developed a shared but unspoken quasi-language of signs and symbols that represent people, places, things, actions, and even abstract concepts.

In part one of this two-part post, I’m going to begin describing the process I followed to create my own custom icons for a web app. My icons require no JavaScript, can be styled with CSS, are scalable to any size, and screen-reader compatible.

Back in the day, we used to use individual image files to display icons. Then, borrowing a page from early video games, CSS image sprites helped us condense all of our icons into one file, and determine which one to show where purely through CSS rules.

Sprites: still good enough for Amazon

Sprites definitely still have their uses, but icon fonts are what’s happening now, and for good reason: because they’re vector images, they can scale to any size without losing quality (great for Retina displays), and because the browser interprets them as text, they can be manipulated by any CSS rules we apply to text (size, color, shadow, etc.). In Twitter Bootstrap 3, the standard Glyphicon library is included via a font file. FontAwesome, a great and very easy-to-use icon font, also integrates easily with Bootstrap, and it’s one of my favorite tools in UI design.

If you think about it, a font (and here I’m talking about a font file [the delivery mechanism], and not a typeface [the creative work]) is really just a table of data. In its latest version, the Unicode standard comprises 110,000 characters. A font is a collection of vector graphics (the letter A, for example), each one mapped to a unicode character (U+0041).

But there’s no rule that says fonts must consist only of letters, numbers, and characters. What if instead of mapping Unicode values to standard characters, we mapped them to a set of vector images of our choosing? Like an icon library? Different languages use different fonts to express their alphabets; icon fonts are the same idea, but with an alphabet of symbols. (Yes, I know, an alphabet is already an alphabet of symbols. Let’s not get too deep in the meta-weeds here.)

So enough of my yakking. Let’s do something cool. You may already be using FontAwesome or Glyphicons in your projects. (If not, you should try them. Also, with recent versions of each, it’s possible to add FontAwesome to Bootstrap’s Glyphicons — they’re not mutually exclusive ∴ fat stacks of icons.) (Actually, they ARE mutually exclusive — that is, the class names and character mappings don’t overlap, so they can be used in parallel.) But what if you need an icon to express something really specific? A project I recently worked on, for example, needed an icon to represent “cloud security,” as well as some other concepts that were a little too niche for a standard library. The designer created a small family of icons that all worked well together. A while ago, I probably would have smushed them all into a sprite and called it a day. But these icons were all monochromatic and vector files made in Illustrator, so I decided to make my own custom icon font.

Sort of.

The icon library the designer gave me only contained about 20 icons, and they were great, but not comprehensive. What if I needed a standard “cogs” icon for the settings page, or Twitter and Facebook buttons? I decided to augment the FontAwesome library I was already using with these custom icons. Cool, right?

Part of a custom icon family

Get started by making and prepping your own custom icons. You’ll need a vector editor, like Illustrator, for this part. Create a new file, or open the vector icon file you want to use.

The size in pixels doesn’t matter, but the icon must be square. So crop the file you’ve got, if necessary, or make sure your new file is on a square artboard. The other requirement is that it be monochromatic. So combine shapes if necessary, and make sure it’s black and white, with white being transparent. If you’re starting from scratch, this should be easy: just create your shape using one color.

My original vector file and the square, one-color version of it, saved as .svg.

This tutorial and others like it can help you with Illustrator specifics. Be sure to save each icon as .svg. We’ll be working with .svg icons so we can combine them into an .svg font file, which will then get converted to .otf, .ttf, .eot, and .woff. Don’t worry, it’ll be fun.

Okay. You get your set of square, monochromatic .svg icons all sorted out. In part two, we’ll explore the IcoMoon web app and turn our vector files into a font.​

Picture by josh.ev9