Icomoon and other icon font tools

September 21st, 2013 - Göttingen

Icon fonts are our prefered way of dealing with icons since they became well supported, icon fonts are awesome in the way that you can scale them at will while remaining sharp, and change their color and shadows. They also have a small size that you can make smaller if you reduce them to only the glyphs you need, and provide a more convenient bundle than css sprites.

If flat and basically monochrome icons fit with your site they are great solution, and there is also a little hacky trick to get three colors in one icon element combining the pseudo classes :before and :after and taking advantage of Semantic Ligatures using this technique : http://blogs.esri.com/esri/arcgis/2013/08/16/three-color-semantic-icon-fonts. A great example are the devicons by the same author (nikolaswise).

The are some great sites to get free fonts (FontAwesome, Fontello, IcoMoon, Zurb, …) and affordable ones (SymbolSet and IcoMoon too)

Fontello and IcoMoon showcase mutiple fonts and let you pick the icons you want and combine them in a single font that you can download. Both tools are great but IcoMoon is just amazing.


IcoMoon lets you import the popular free fonts (such as fontawesome or entypo) into their app and purchase their own premium packs (they have a Ultimate Package with 1266 dual tone icons for $59, not bad)

What its create is that you can combine these fonts with your own icons (with you upload in svg format):

You can also perform basic editing like rotations, flips and scaling up and down

And it download your package allow with the code, everything for free.