How to create an icon font (from Adobe Illustrator to SVG in 7 steps)

Today we have a pdf to share with you, one that you can print out and hang on a wall (either in your office or your bedroom, you decide). It is a small flow to create SVG files using Adobe Illustrator for using a service like Icomoon to create an icon font to use for websites. Described in this post is the flow for working in Illustrator (any version that supports the ‘Artboards’ function should work fine).

So you might wonder “Why make an icon font?”  for one it’s fun! Also you can create custom icons to give your design that little something special. Next to boosting speed and performance it gives you a lot of freedom in the front-end development phase.

Just 5 situations that you want to use a font rather than a bitmap image:

  1. Need the same icon in different sizes? The SVG format is scalable and so are fonts so one size fits all.
  2. Your icons are always crisp, even on retina displays.
  3. Need a icon in different colors? No need to design it, just change it in the CSS!
  4. Using CSS you can add: gradients, shadows and pretty much any CSS behaviour you fancy.
  5. Icon fonts are supported by all modern browsers.

Admittedly icon fonts are not the best solution for all projects, but by using them you can’t really go wrong either. Recently we (UNITiD & de Voorhoede) worked on a project that required some custom icons and making an icon font was the way to go. We tried creating icons using Photoshop and Fireworks but both do not support SVG the way Illustrator does.

So the 7 steps? Here they are!

Step 1 Open Adobe Illustrator (that was easy)

Step 2 Create a new file

Step 3 Set up a new artboard, we recommend using a square (anything up 34×34 pixels works)

Step 4 Give each icon its own artboard (make sure the artboard sizes match)

Step 5 Give each artboard a logical name (this will be the name of the SVG file)

Step 6 Use ‘save as’ to export the SVG files

Step 7 Select ‘SVG’ under the ‘format’ drop down and make sure you check the option ‘use artboards’

 

If you like to read these steps back you can download the poster

downloadDownload and print

 

Just a 3 things that you as a designer should keep in mind:

  • Use fills not lines (this will not work)
  • Use cut outs
  • Only use one color (black)
checklist

Hopefully these simple steps help you to improve your workflow!