What is IcoMoon?
IcoMoon is an icon solution. It provides a vector icon package, and an HTML5 application. Read further to learn more about these two services.
The Icon Package
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!)
The Application
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).
Selecting Icons
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.
Icon Details
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.
Importing your own icons
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.
Making a Font
To make a font, select the icons that you want to include in your font and then press the second button (which looks like letter F), 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 SPUA option. This option assigns the next available Unicode point from the Supplementary Private Use Area block of Unicode. Using either of the symbols or SPUA encoding options will make your icon-font compatible with screen readers.
Font Metrics
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.
Alignment Options
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.
Resetting IcoMoon
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.
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). There are also two classes defined in this sample stylesheet: icon-b and icon-a. Using these classes, you can easily insert your icons on the left and/or right side of your HTML elements. For example, if you have a help icon assigned to character '?', and you want to add an icon on the left side of an anchor tag, you can use class icon-b:
<a href="#" class="icon-b" data-icon="?"> 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.
Using Different Image Formats
IcoMoon’s icon package includes all the icons in both vector (SVG) 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).
The folder named PNG contains all the icons in two common 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.)
Questions/Support
Use this contact form if you have any questions regarding IcoMoon.