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.
Have you tried makÂing a largÂer set of cusÂtom icons, and then updatÂing it latÂer with new icons? It seems to screw up the order of your icons.
Maz [September 10th, 2013, 19:17]
Thanks for your post it was realÂly helpÂful getÂting startÂed with creÂatÂing my own icons and getÂting them into icon fonts.
Raul [September 19th, 2013, 12:16]
Thanks for the tip on grid sizes, very useful.
Raphael [October 30th, 2013, 23:08]
Maz,
I ran into the same issue (the reorder thing).
When you are selectÂing the icons it MATTERS in which order you select them. This way you can conÂtrol the order of them.
Hope that helps
Claudiu [November 14th, 2013, 11:06]