IcoMoon is an icon solution. It provides a vector icon package, and an HTML5 application. Read further to learn more about these two services.

IcoMoon provides both open source and premium icon packages.

The package you download should include the following:

• IcoMoon Font.svg
• Read Me.txt
• License.txt
• Manual.pdf
• Icons (contains all the icons in different formats)

The file called IcoMoon Font.svg is a special SVG font that includes some metadata and tags. SVG fonts cannot be opened in Adobe Illustrator. Make sure you import this file to the IcoMoon app if you are a premium user. (You will get a smile too!)

Head over to http://keyamoon.com/icomoon/app using a modern web browser to start using IcoMoon. This HTML5 web 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 on the Chrome Web Store (works offline).

You can simply click on an icon cell to select or deselect it. 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.

By hovering over each icon, an Edit button will appear below the icon cell. Clicking this button will reveal detailed information about the icon. It also allows you to add tags to the icon or do some simple modifications such as rotating or mirroring. You may use the left and right arrow keys to navigate and see the details of the other icon.

You can import your own SVG images or fonts to IcoMoon. The SVG images you choose for importing will be parsed into a single layer and color. This is necessary for font glyphs. If you choose an SVG font, all the glyphs in that font will be imported.

IcoMoon’s icon package includes 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.

To make a font, select the icons that you want to include in your font and then press the second button at the bottom of the page. This will bring up a preview of your font; along with some settings. You can customize your font and its metrics (em size and baseline). You would mainly want to change the encodings. A text box on top of each glyph allows you to enter or paste a single character. This character’s encoding will be used for the encoding of that glyph. Pressing the button on the right side of this text box reveals a menu with three encoding options. The Symbols option in this menu is the best option for icon-fonts. If you can’t find a proper Unicode symbol using this option, you can use the PUA option. This option assigns the next available Unicode point from the Private Use Area blocks of Unicode. Using either of the symbols or PUA encoding options will make your icon-font compatible with screen readers.

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

It is better to use an em size that is proportional to the size of the canvas that your chosen icons were designed on. If you are using IcoMoon’s icon set, an Em size of 512 is recommended.

IcoMoon provides two different alignment options. The following image shows the difference between these two. Notice that the whole image canvas will be subject to this alignment. The Ascender & Descender alignment is recommended for most use cases.

When using IcoMoon, almost all of your modifications get saved automatically. You don’t have to worry about losing your selections or your imported icons or glyphs. To reset everything, you can use the button at the bottom right hand corner.

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:

    <a href="#">
        <span data-icon="?" aria-hidden="true"></span>
        Help
    </a>
  

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.

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

    
    <!--[if lte IE 7]><link rel="stylesheet" href="lte-ie7.css" /><![endif]-->
  

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

IcoMoon’s icon package contains all the icons in both vector (SVG, AI, PDF) and raster (PNG) formats.

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.

The folder named PNG contains all the icons in two commonly used sizes: 16px and 32px.

For Photoshop users, a Custom Shapes file is also included inside the Icons folder. To import Custom Shapes into Photoshop, select Preset Manager… under the Edit menu. Or you can simply double click and open the CSH file. (You may need to restart Photoshop.)

Use this contact form if you have any questions regarding IcoMoon.