Read more

Creating icon fonts with Icomoon

Dominik Schöler
October 10, 2016Software engineer at makandra GmbH

The Icomoon workflow is a little complex, especially when updating an icon font. We have make up a better way that is friendlier to developers.

Icomoon.io offers a free app to build custom icon webfonts. It offers downloads as webfont set (.eot, .ttf, .woff, .woff2) or as icon set of SVG and/or PNG and many more file types, or even SVG sprites.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

From my experience, the frontend developer should create the font, and not the designer. There are many tweaks required during font development, and routing changes over the designer imposes just too much overhead.

On rare occasions, webfonts may be blocked by an entreprise's security policy. Be sure webfonts can be used before building one.

Notes

Remove color from monochrome icons

Edit icon > Droplet > Remove color.
Do not remove color from multicolor icons. Icomoon splits multicolor icons into multiple glyphs that you can style separately and stack manually.

Condider the grid

Icons are designed for a specific grid size, e.g. 24x24px. Be sure to specify the correct grid size for each icon. Also note that using the font will look best at font sizes that are a multiple of the grid size, e.g. 24px, 48px etc. For pixel-stroke icons, sticking to grid multiples is a must, or they'll look blurred.

Remove any white space on the left and right

Each icon should only be as wide as it actually is. If you later need an icon to be "square" in space consumption, style it with width: 1em.

Save the font

Icomoon stores your font data in localstorage. Make sure you backup your data by downloading it from the projects page Show archive.org snapshot , e.g. after creating it and when finishing your website.

Define a baseline

On the "Generate Font" page, set a decent baseline height in the preferences panel. This is relevant when the icons are rendered inline with text. The default 6.25% are usually to low; a value of 16% should be fine for most use cases.
If you're into it, you may inspect your main text font (e.g. with fontforge) and calculate the baseline height from (Descent / Em Size).

Posted by Dominik Schöler to makandra dev (2016-10-10 14:17)