How to Create Your Own Webfont Icon Packs With IcoMoon

Contributing Editor

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:

IcoMoon icon browsing

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:

IcoMoon icon editing

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:

IcoMoon icon pack saving

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://dorward.co.uk David Dorward

    After playing around with the site and getting “Unpronounceable” spat out by my screen reader on every icon, I’m going to stick to techniques that allow me to use alt text instead of pseudo-not-text.

  • Michael

    Thanks a lot for this article!!

    FYI: The screenshots seem to be a little different than what I see.

  • http://juleswebb.com Jules Webb

    Loved playing around with IcoMoon. Nice find, thanks!