As you prob­a­bly know, icon (or, sym­bol) fonts are a great way to imple­ment scal­able, styleable icons which work across pret­ty much every brows­er (every one that sup­ports web fonts, any­way). There are many top qual­i­ty icon fonts avail­able, such as Pic­tos and Font Awe­some, but some­times you’ll want to cre­ate your own bespoke icons. Github wrote detailed instruc­tions of how they made their icon set, Octi­cons, in their post The Mak­ing of Octi­cons, but that relies on using some pro­fes­sion­al tools. In this arti­cle I’m going to show sim­ple alter­na­tive method that uses the bril­liant free tool, Ico­Moon.

Creating your icon

To get start­ed you need one oth­er piece of soft­ware, which is a graph­ics pack­age capa­ble of export­ing SVG. You can use Adobe Illus­tra­tor if you have it, or con­sid­er the fan­tas­tic SVG Edit if not. I pre­fer Inkscape, which is ful­ly fea­tured and free (although the inter­face has a slight learn­ing curve).

Ico­Moon icons are based on 16x16 pix­el grid by default, so in your vec­tor graph­ics soft­ware make a new doc­u­ment on a square grid which is a mul­ti­ple of 16 on each side; I find that 512 is ample for most icons, although you could use, for exam­ple, 256, 1024 or 2048. The larg­er your grid, the more detailed your icon can be — but do bear in mind that detail does­n’t always scale down well.

The next step is to draw your icon. You’ll want to over­lay a grid on the can­vas to help with the posi­tion­ing of the com­po­nents of your icon. If you can, change the units of your grid to mul­ti­ples of 16; if that’s not pos­si­ble, size and posi­tion objects by divid­ing the dimen­sions of the can­vas by 16. For exam­ple, when I’m work­ing on a can­vas that’s 512 squared I use mul­ti­ples of 32 (512 ÷ 16); so if I want an object that will be 4×4 in size and 2 from the top in my fin­ished pix­el grid, I make it 128×128 and 64 from the top in Inkscape.

It’s also very impor­tant to make sure that objects snap to the grid you’ve cre­at­ed; if they don’t then the browser’s ren­der­ing engine will use alias­ing to try to com­pen­sate when scal­ing, which can result in fuzzy edges on your icon — the oppo­site of what you’re aim­ing for. The fol­low­ing image shows my icon aligned to the grid (left) and off it (right).

Using a scaled grid and snap­ping objects to it will help a lot in mak­ing the icon per­fect­ly scalable.

Ico­Moon has some good tips on mak­ing icons that import well, and one that has tripped me up many times is that you should not use strokes, as they’re not ren­dered; use shapes only, or at least con­vert your strokes to shapes.

Adding your icon to a font

When your icon is com­plete, export the file as an SVG, then fire up Ico­Moon. The first step of using this is to import your SVG file(s); if they’ve been built cor­rect­ly they’ll be shown in the Your Cus­tom Icons sec­tion. High­light the ones you want to use in your font, and pro­ceed to the next step by tap­ping the Font button.

On the fol­low­ing page all of your new icons are shown, and you can rearrange them and assign them to dif­fer­ent char­ac­ters in the UTF table. When you’re sat­is­fied with your organ­i­sa­tion, tap Down­load and you’ll be pre­sent­ed with an archive file, inside which is a fold­er con­tain­ing your font in WOFF, TTF, EOT and SVG for­mats. You can then add these to your doc­u­ment using @font-face.

Below is the icon I made ear­li­er, shown at three dif­fer­ent sizes so you can see for your­self how nice­ly it scales.

• a
• a
• a

That’s about it. You may need to tweak and finesse a few times ini­tial­ly until you get the desired result, but that’s real­ly all there is to cre­at­ing your own icon fonts.