As you probably know, icon (or, symbol) fonts are a great way to implement scalable, styleable icons which work across pretty much every browser (every one that supports web fonts, anyway). There are many top quality icon fonts available, such as Pictos and Font Awesome, but sometimes you’ll want to create your own bespoke icons. Github wrote detailed instructions of how they made their icon set, Octicons, in their post The Making of Octicons, but that relies on using some professional tools. In this article I’m going to show simple alternative method that uses the brilliant free tool, IcoMoon.

Creating your icon

To get started you need one other piece of software, which is a graphics package capable of exporting SVG. You can use Adobe Illustrator if you have it, or consider the fantastic SVG Edit if not. I prefer Inkscape, which is fully featured and free (although the interface has a slight learning curve).

IcoMoon icons are based on 16x16 pixel grid by default, so in your vector graphics software make a new document on a square grid which is a multiple of 16 on each side; I find that 512 is ample for most icons, although you could use, for example, 256, 1024 or 2048. The larger your grid, the more detailed your icon can be — but do bear in mind that detail doesn’t always scale down well.

The next step is to draw your icon. You’ll want to overlay a grid on the canvas to help with the positioning of the components of your icon. If you can, change the units of your grid to multiples of 16; if that’s not possible, size and position objects by dividing the dimensions of the canvas by 16. For example, when I’m working on a canvas that’s 512 squared I use multiples of 32 (512 ÷ 16); so if I want an object that will be 4×4 in size and 2 from the top in my finished pixel grid, I make it 128×128 and 64 from the top in Inkscape.

It’s also very important to make sure that objects snap to the grid you’ve created; if they don’t then the browser’s rendering engine will use aliasing to try to compensate when scaling, which can result in fuzzy edges on your icon — the opposite of what you’re aiming for. The following image shows my icon aligned to the grid (left) and off it (right).

Using a scaled grid and snapping objects to it will help a lot in making the icon perfectly scalable.

IcoMoon has some good tips on making icons that import well, and one that has tripped me up many times is that you should not use strokes, as they’re not rendered; use shapes only, or at least convert your strokes to shapes.

Adding your icon to a font

When your icon is complete, export the file as an SVG, then fire up IcoMoon. The first step of using this is to import your SVG file(s); if they’ve been built correctly they’ll be shown in the Your Custom Icons section. Highlight the ones you want to use in your font, and proceed to the next step by tapping the Font button.

On the following page all of your new icons are shown, and you can rearrange them and assign them to different characters in the UTF table. When you’re satisfied with your organisation, tap Download and you’ll be presented with an archive file, inside which is a folder containing your font in WOFF, TTF, EOT and SVG formats. You can then add these to your document using @font-face.

Below is the icon I made earlier, shown at three different sizes so you can see for yourself how nicely it scales.

• a
• a
• a

That’s about it. You may need to tweak and finesse a few times initially until you get the desired result, but that’s really all there is to creating your own icon fonts.