How to Create Your Own Webfont Icon Packs With IcoMoon

Webfonts are a great alternative to images when you’re adding icons to your web page. My recent article Webfont Icons: an Alternative to Images explained how you could load a single font file such as Iconic and apply icons using CSS pseudo elements, e.g.

<style>
.rss:before
{
	font-family: "IconicStroke";
	content: "r";
}
</style>

<a href="rss.xml" class="rss">RSS Feed</a>

There are several advantages to this approach: webfont icons work in all browsers (including IE6), can be scaled to any size and hundreds can be packed into a single efficient font file.

Unfortunately, you rarely need hundreds of icons. It’s a little wasteful to use a large font file when you only require a handful of icons. The situation is made worse if you require a few icons from several different font files.

They also introduce a minor accessibility issue. Adding content using CSS pseudo elements can trigger screen readers to speak the text. In our example above, you could hear your PC stutter “r-RSS feed”.

IcoMoon to the Rescue

IcoMoon is a fabulous HTML5 application which solves these problems for you. It allows you to:

• browse and search 600+ IcoMoon icons
• upload single SVGs or your own font packs (SVG fonts are supported)
• edit icons directly in your browser
• add any number of icons to a font collection
• assign those fonts to any characters, e.g. rather than using ‘r’ you could use a space character to ensure nothing is ever read aloud
• download example code and tiny bulletproof font stacks containing the icons you selected

To start, visit the IcoMoon app at keyamoon.com/icomoon/app/ where you can upload, browse and search icon collections. You can select or deselect any number of icons by clicking:

Hover over any icon and click edit to perform basic editing such as rotating, mirroring and shifting. You can also download an icon as an SVG, edit it in Illustrator, InkScape or svg-edit, and upload the changed version:

Once you’re happy with your icons, click the F icon in the black bar at the bottom of the screen to view and rearrange your selection. You can assign an icon to any character by clicking the top bar and pressing the associated key or clicking the bottom bar and entering the Unicode index number:

Finally, click the Download Font icon in the bottom black bar to grab your custom ZIP file.

IcoMoon is one of the most useful web development applications I’ve seen and it eradicates several issues associated with webfonts. Highly recommended.