Designing Custom Icon Fonts

Remember Wingdings? Zapf Dingbats? You know, the random symbols hanging out at the bottom of your font list? Well, unless you’re David Carson, you probably never put these icons to use. But the the benefits of using icons as fonts rather than images are impressive.

 

The Pros:

  • Scalability: Resizing font icons is as easy as resizing any other font. Since the images are vectors, they will remain sharp at any size and resolution. Your icons shall not fear the Retina Display!
  • CSS Styling: Font icons can be easily edited like any other font with CSS. You can alter the color, size and transparency, while being able to add special effects and animations. No need to cut and recut multiple images.
  • Website Speed: Instead of having to load 50 icons as 50 different images, you only have to load one font file.

 

While using icon fronts is favorable, your iconography needs will likely stretch beyond what is offered in Zapf Dingbats. For example, the Dingbat font was designed in 1978, so you’ll have a hard time finding a cutting-edge technology icon like an iPhone, but hey, maybe vintage rotary phones are your thing. The solution, of course, is to design your own icons and convert them to a font.

Designing Icons

Since vector images are needed, we’ll be working in Illustrator. But before we get started, here are some key elements to consider:

 

  • Icon Style: Rounded corners or sharp edges? Filled shapes or stroked outlines? Decide on a style that’s cohesive with the site hosting your icons.
  • Icon Size: In order to get crisp, pixel-perfect icons, you’ll need to optimize your illustrations for whatever size you intend on using to displaying them. For me, this is no different than how I create pixel icons in Photoshop. I like to design at the final size to avoid scaling, which creates subpixel rendering, causing your icons to appear fuzzy.

 

Step 1: Set Up Your Document

No matter what you choose as your optimized display size, your icons will appear optimized in multiples. Why? Because all of your perfect pixels are simply doubling, tripling, even quadrupling in size. See the diagram below:

This time, we’ll use a 16 pixel for our display size. Let’s avoid that unsightly subpixel rendering by sticking to a grid. You could set up a 16 x 16 pixel art board if you enjoy eye strain, or you could make your life easier and work on an art board that’s chock-full of space. I frequently set up an art board that is a 320 pixel square. I know what you’re thinking: Random number, right? Wrong! It’s simply a multiple of 16.

Step 2: Set Up Your Grid

Next,  we’ll create a grid in Illustrator. Keep in mind that we’ll be using our icons at 16px, so we’ll want to divide the art board into 16 x16 squares (on a 16px art board, this would be a 1-pixel grid). On our 320px art board, one square is equal to 20 pixels, so you’ll want to include a gridline every 20 pixels (320/16=20). In Illustrator, you can set this in Preferences > Guides & Grid.

Here’s what you end up with:

Step 3: Draw Your Icons

Grab your pen tool, pack your shape tool and go to town! Here are some pro-tips to get started:

  • Create each icon on its own art board
  • Turn on the Snap to Grid option to ensure that you’re staying on the grid
  • As fonts, your icons can only be one hue, so be sure not to layer colorful shapes, as they’ll be filled in with one color anyway
  • All strokes must be converted to shapes. You can do this by selecting Object > Path > Outline Stroke
  • Most importantly, all overlapping or separated shapes must be combined into a single, compound shape in order to export correctly
  • For overlapping shapes, combine them using the Unite option on the Pathfinder palette (figure a)
  • For non-overlapping shapes, combine them by selecting Object > Compound Path > Make (figure b)

Step 4: Export & Import Your Icons

Now that your icons are ready, use the Save As command to export each icon as an SVG file (Scalable Vector Graphics file). To create a font from your icons, use a free website such as Fontello or IcoMoon. (Hint: IcoMoon will give you a few more editing options.)

So, open up the IcoMoon app, hit import icons, and select your SVG files.

Feel free to change the display size to see how your icons look at different stages. By default, IcoMoon will give you multiples of 16, but you can also type in a custom size to preview.

If you need to make some adjustments, hit the Edit button and select the icon you want to change. In the Edit panel, turn on a 16 pixel grid. You’ll see that our icon lines up perfectly on the grid since we designed it that way – win! The buttons below the icon give you some simple editing options.

And there you have it! You icon set is ready to go. Remember, you can always add or remove icons if needed. Pass this off to your trusted front end developers so they can download the set and use it in their own code.

« Prev Article
Next Article »