Skip to main content

How to Create Your Own Webfont Icon Packs With IcoMoon

By Craig Buckler



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

	font-family: "IconicStroke";
	content: "r";

<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 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.

Related Articles

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript

A practical guide to leading radical innovation and growth.

Integromat Tower Ad