In this article I will describe in few easy steps how to create an high quality icon font using Illustrator.
Creating an icon font can seem relatively easy but to get a really good looking result you need to stick to a few rules and guidelines.
Why use Icon Fonts?
- You can easily create multiple size & color variations
- You get an crispier look of the icon (if you will do things right)
- They look good on any display or resolution
Creating a new document
Create a new document sized 512x512 - this is the standard size that will be well gauged to a target size of 16x16px. You can also use sizes like 256x256, 1024x1024 or 2048x2048 - just make sure that they can be divided by 16.
If you’re creating multiple icons you can create multiple canvases, it will speed up your project while exporting the files to SVG.
Turning on the grid and setting it up
Enable “Snapping to grid” (View > Snap to Grid) and turn on the grid (View > Show Grid).
Go into Illustrator > Preferences > Guides & Grids where you can set your “Gridline every” on 32px (512:16 = 32px) and Subdivisions on 1.
Tip: You should plan ahead what size the icon should be displayed. If all icons are 14x14px next to the 14px text, there is no point in adjusting it to 16px grid. If that happens you should adjust it to the 14px grid, with document size of 392x392px and “Gridline every” set on 28px (392:28 = 14).
To get the best quality icons, anchor points should be aligned to the grid that we created earlier. The lack of alignment will blure icons when you use them in a smaller sizes.
You can see an example below, on the left there is grid-aligned icon and a blurred one on the right that wasnt aligned.
If your icons will have more details, the blur will be more visible.
Exporting SVG file
When you’re done with adjusting and creating your icon, export it to SVG file. File > Save as > Choose SVG > Save > OK.
Upload the SVG file
Go to icomoon.com and run “IcoMoon App”. Select the button in the upper-left corner (“Import Icons”) and choose your SVG files. Mark the selected icons inside IcoMoon App and press the “Font >” button located on the bottom of the page.
The parameters of the second step are described very well on http://icomoon.io/
Press the download button and volia!
Tips & tricks
One of the main principles is not to use strokes, use only shapes.
Every element should be cut out of main shape, you cannot create a black rectangle and white elements on it, you’ll have to cut them out.