What is IcoMoon?

IcoMoon is an icon solution, providing three main services: Vector Icon Packs, The IcoMoon App, and an Icon Delivery Network. Read further to learn about each service in detail.

Icon Packs

IcoMoon's icon packs come in both open source and paid versions. There are currently two premium packs available for purchase and one free pack can be downloaded from github.

Vector Formats (SVG, PDF & AI)

All of IcoMoon's icons are fully scalable and they come in three different vector formats: SVG, AI and PDF. All these icons are handcrafted on a 16×16 grid.

All the SVG images include the 16x16 design grid which can be helpful for editing the icons. You can open SVG images in almost any vector editing software (including Adobe Illustrator).

If you want to access all the icons in one file, you can use the AI and PDF formats.

Photoshop Shapes

IcoMoon's Ultimate Pack comes with a Photoshop Shapes file (CSH). To import this Custom Shapes file into Photoshop, select Preset Manager… under the Edit menu. Or simply double click and open the CSH file. (You might need to restart Photoshop.)

Raster Format (PNG)

Paid icon packs include PNGs in three sizes: 16px, 32px and 48px. The IcoMoon app also allows you to generate PNGs in any size and color you wish.

SVG Font

All the icon packs come with a special SVG font. This SVG font can be imported into the IcoMoon app. This font contains all the icons and their tags. After importing this file, you will be able to search the icons and select the ones you need, to download them or make a font. Note that Adobe Illustrator cannot open SVG fonts.

A simpler way to import the icons to the IcoMoon app is via the library tab in the app. You will have to be logged in to be able to use this feature.

IcoMoon App

Head over to http://icomoon.io/app using a modern web browser to start using the IcoMoon app. This HTML5 application allows you to quickly browse and search for the icons you need. You can download these icons, do some basic editing, import your own icons, or make an icon font (a font with icons as its glyphs).

This app is also available in the Chrome Web Store (runs offline).

Selecting Icons

You can simply click on an icon cell to select or deselect it. You may also drag to select a group of icons. If you click on an icon cell to select it, and then hold down the Shift key when selecting another icon, all the icons in between these two icons will be selected.

Note: By selecting only the icons that you actually need, you can keep the size of your fonts down. By loading your font back to the app, you can always add more icons to your selection later.

Editing Icons

By choosing the pencil button in the app, you can switch to edit mode. When in this mode, you can click any icon cell to see its details some simple modifications such as rotating or mirroring. You can also edit the tags given to the icons. The first tag given to an icon is used for its name. This name would be used when downloading icons or building webfont packs (for class names in the generated CSS).

Note: Instead of pressing the pencil button, you could also hold down the option/alt key and then click an icon cell to edit it.

Importing your own vectors

You can import your own SVG images or fonts to the IcoMoon app. When you import an SVG image into the app, it gets parsed into a single layer and color. This is necessary for font glyphs. The following tips might be useful in case you are having problems with importing your vectors:

• Strokes get ignored by the app. You can convert them to fills.
• Unite/combine your fills.
• Avoid using white fills. All of your fills will have one color after importing.
• Don't use the evenodd fill-rule.

If you still have problems with importing your vector, open a new issue on github and attach your file.

If you choose an SVG font, all the glyphs in that font will be imported. IcoMoon's icon packs include an SVG font which you can import to the IcoMoon app. This font comes with extra metadata and tags which make finding icons very easy. To search the icons, simply type a keyword in the search box at the top right hand corner.

Making a Font

Select the icons that you want to have in your font and then press the Font button at the bottom of the page. This will bring up a preview of your font, showing all its glyphs and the Unicode characters assigned to each. To change the character assigned to a glyph, simply modify the text field above it. For example, if you type 'A', letter 'A' will be assigned to your glyph. The text field below each glyph shows Unicode point assigned to the glyph in hexadecimal. Before downloading your font, you can change its name via the Preferences panel. For more advanced settings and to change your font's baseline or em size, use the Preferences panel.

Note: Using Latin letters is not recommended for icons fonts. Using the Private Use Area of Unicode is the best option for icon fonts. By using PUA characters, your icon font will be compatible with screen readers. But if you use Latin characters, the screen reader might read the single meaning less letters, which would be confusing. You can reset the encoding of your glyphs using the Reset Encoding button.

Ligatures

To enable making ligatures, go to the font tab and press the Preferences button. You will find a checkbox that allows you to enable/disable ligatures. By enabling ligatures, you will be able to type a word (instead of a single character) into the textbox above each glyph. Ligatures are not supported in IE 9 (& older). But IE 10 and other modern browsers support it.

Note: To keep the size of your fonts down, IcoMoon assigns empty glyphs to the single letters that you use in making your ligatures. For example, if you assign the word home to an icon, letters h, o, m and e would be assigned to empty glyphs. Although not recommended, you can change this default behaviour by assigning these letters to other icons/glyphs.

Also note that having empty glyphs for your alphabetic letters is perfectly okay when using the font in web. In case your font fails to load, the browser would fallback to using a different font and therefore the words you assigned to your icons would become readable, which is a good fallback.

Font Metrics

You can set the baseline and the em size (size of the em square) of your font using the IcoMoon app. The height of the baseline is determined as a percentage of the em size.

The IcoMoon app aligns the top of the icon canvas to the ascender line and its bottom to the descender line of the font. Using this technique, the size of your font will directly translate to the size of the icon. For example, if you set your font-size in CSS to be 16px, you will get a 16px icon. This method was first introduced by IcoMoon.

This alignment technique also makes the bottom of the icon be placed near the baseline of any text before/after the icon. This is normally the expected behavior but you can always change the font metrics within the IcoMoon app.

Saving & Loading

When using IcoMoon, almost all of your modifications get saved automatically. You don't need to worry about losing your selections or your imported vectors. In addition, every generated font pack includes a file that ends with .dev.svg which you can import to the app. By importing this file, all of your icons, their tags and encodings will be loaded and you'd be able to easily modify your font.

Alternatively, you can use the database-shaped button at the bottom right hand corner. Using this button you can store everything (the state of the app) locally as a JSON file. You can load this JSON file whenever you need to. This feature is currently only available in Google Chrome.

Resetting IcoMoon

To reset everything, use the reset button at the bottom right hand corner.

Using the Generated Fonts

The zip package that IcoMoon generates contains everything you need to get started using your icon font. Your font is provided in four different formats. Sample HTML and CSS files are included in the package too. The CSS file contains the @font-face rule (which defines a font family), and it also comes with some code which allows you to use data-* attributes to easily insert your icons anywhere you want. Here's a sample markup:

Notice the data-icon attribute in the code above. The value of this attribute should be the character (or its HTML entity) that was assigned to your icon. You can find HML entities of your icons by opening the generated index.html file. Read this css-tricks article to learn more about this technique in using icon fonts.

The IcoMoon app also generates one CSS class per icon; but it is recommended to use the data attribute method explained above, to keep your CSS cleaner.

Gettings Crisp Results

Icon fonts have a bad reputation for looking blurred. But as you can see in the UI of this website (icomoon.io), it is possible to get completely sharp and crisp results.

A Crisp Size is listed for each of the icon sets in IcoMoon's library tab. To get the best results, you should use this size when using your font. For example, if an icon set is optimized for (16 × N)px sizes, you will get crisp results by setting your font-size to 16px, 32px, 48px (= 3 × 16px), etc. If you are using icons from different icon sets, you will get better results if all the icons you're selecting are optimized for the same size. For example, it is not recommended to combine icons from a set that was optimized for (16 × N)px, with icons from a set that was designed for (14 × N)px. Also, note that by using the -webkit-font-smoothing: antialiased property, or by prioritizing the SVG font over other formats, you can get better results.

Accessibility and Screen Readers

Some screen readers (such as Apple's VoiceOver), read the content inside pseudo elements. When you assign single characters to your icons, you wouldn't want the screen reader to read these characters. By using the PUA or the symbols options for the encoding of your glyphs, you can prevent this problem.

You can make screen readers read any text you wish. This is usually useful when you want to use an icon without any visual text near it. Here's an example:

The visuallyhidden class in this example is taken from H5BP:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Supporting IE 7 and IE 6

Old versions of Internet Explorer (IE 7 and older), don't support pseudo elements. To make the icon fonts work in these browsers, you can use the file called lte-ie7.js which is included in the package that IcoMoon app generates. You can use conditional IE comments to add this Javascript polyfill to your web pages.

Note: Make sure you use the PUA or Basic Latin encodings if you intend to support these browsers.

Note: Instead of using a javascript polyfill to bring support to IE 7 and older, you could also use CSS expressions (aka dynamic properties). But they have a poor performance, and they actually require Javascript to be enabled to function. It is highly recommended to avoid using CSS expressions.

Icon Delivery Network

Using this service, you can easily upload your icon fonts to Amazon's CDN, which is both reliable and lightning fast.

By purchasing a hosting plan, you will be able to upload your icon fonts to a hosting slot. Each plan gives you access to one hosting slot. A slot can contain only one font pack, but you can always update your font pack by re-uploading.

Uploading Fonts for Hosting

If you purchase a hosting plan, you should see an upload button in the font tab of the IcoMoon App. If you can't see this button, make sure you are signed in. You can sign in here, or using the button at the top right hand corner of the app.

After uploading your font packs, you will be able to use the links assigned to your hosting slot. A CSS code which contains the @font-face rule would be generated for you as well.

Production vs Development Links

Two sets of links are provided for each hosting slot. The development links always point the the latest files uploaded, without any delay. Use these links when developing.

Production links will point to cached files. Threrefore, they will point to the latest uploaded files with a delay of up to 24 hours. You can reduce this delay to 10 minutes by clearing the cache (using the Clear Cache button in the app). When you're ready for production, you should use these links as they are faster and more efficient for serving your fonts.

Questions/Support

Feel free to post in IcoMoon's google group, or use our contact form if you have any questions regarding IcoMoon.