Why IcoMoon?

See the Examples
622 vector icons and counting
IcoMoon’s HTML5 application allows you to make your own custom font, with the icons you choose, as its glyphs.
Use the @font‑face method to have your icons in vector and in any size or color. You may basically add any CSS effect you wish.
Fully Accessible and Compatible with Screen Readers. (VoiceOver Demo | Test Page)
Only one HTTP Request for including all the shapes you need!
Regular free updates
Supported in IE (6+), iOS Devices, Android, Chrome, Firefox, Opera, Safari.
Complete Documentation
Developer-Friendly License

622 Icons (and counting…)

Click for a full preview

Preview Icons

Video Demo

The following is a screencast explaining how you can start using the IcoMoon app.

HTML5 App

IcoMoon provides an HTML5 web application. With this application you can,

Browse and search icons
Import your own icons
Generate icon-fonts
Download icons

By only containing the icons that you need, the resulting icon-font will be ideal for use in web due to its small size. Since you would be using a single file to include all the icons you need, you will only have one HTTP request when loading these icons.

You can watch a video demo of this applicaion here.

622+ Vector Icons and Counting (Regular Free Updates)

The current version of IcoMoon comes with 622 vector icons. Based on the requests received, more icons will be added to the package. By purchasing IcoMoon, you will be able to download all these updates for free. You can also send your suggestions regarding what kind of a shape you’d like to see added to the pack.

Icon Fonts Done Right

With most of the icon fonts, when you set the size of the font to N pixels, the actual size of the icon (or its height) won't be N pixels. With IcoMoon, your font-size translates to the size of the icon. This is achieved by aligning the icon to the ascender and descender of the font while the baseline is located on (or near) the descender. The following image shows how regular fonts are designed (right), and what IcoMoon lets you achieve (left).

In result, the bottom of your icons will be aligned to the baseline and you will be able to precisely control the size of your icons. You can always change the default font metrics via IcoMoon’s app.

Accessible and Compatible with Screen Readers

Using Icomoon, you can use any encoding you wish for you fonts. But you are also provided with two special encoding options. You can use Unicode points defined specifically for symbols; or you can use the Supplementary Private Use Area A of the Unicode. Using these options, screen readers will not read the character/letter that is assigned to your icons. Watch this 45s VoiceOver demo; or check out this test page for yourself.

Designed on a grid

IcoMoon’s icons are carefully designed on a 16 by 16 grid. In result, these icons look crisp and sharp even in a size as small as 16px. Check out the preview section and see for yourself.

Live Demo and Documentation

Check out the live demo page to see a few of the possible use cases of IcoMoon. Some information on how you can start using IcoMoon is provided here.

SVG, PNG and Custom Shapes for Photoshop

All the icons come in 2 different formats (SVG, PNG). The PNGs come in two sizes, 32px and 16px. You can easily use the SVG format in almost any vector editing software. You may also import all the icons as vector custom shapes to Photoshop.

Download a Free Version

You can find and download a limited version of IcoMoon's icon pack on github. This open source package currently features 300 icons, licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. In short, commercial use and modification of this work is allowed as long as you give back credit. See the purchase page if you are looking for a royalty free license.

Download

By default, all these free icons are loaded for you in the IcoMoon App. You can easily search among all the icons and make your own custom fonts!

Note: Over time, more icons will be added to this free package. To to be informed of IcoMoon’s updates, you can watch the repository on github or follow @keyamoon on twitter. Major changes will also be listed on the changelog page.

Purchase

You can buy the full version of IcoMoon for only $35 (USD). If you really can't afford it, you can choose the $25 option below; but with this option, you won't receive any of the future updates. If you are willing to, you can support IcoMoon by choosing the higher prices. That would be very much appreciated. You can read the license agreement or if you have any questions, feel free to use this contact form.

You will receive all the future updates in your email. You may also Subscribe to this feed to be notified of these updates.

Buy IcoMoon

Changelog

Subscribe to Updates Feed

Loading…

Contact

Have any suggestions or questions? Please take a minute and let me know.

Documentation

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.

Live Demo

You may have already noticed that IcoMoon’s website is itself using IcoMoon! The size of the woff font that’s being used here (containing 19 icons) is only 4 KB! You can see a few more samples below. No image has been used here.

IcoMoon is 100% compatible with screen readers. (VoiceOver Demo)

Icon fonts are scalable. Use your icons in any size!

Experimental loading wheel using CSS animations. Works best in webkit.

You can always use a static icon as a fallback.

Easily change the color of your icons using CSS.

Build your own icon font using the IcoMoon app.

License Agreement

This license grants you the following, in using IcoMoon’s icon package:

You can use the icons and/or generated font(s) on a website.
You can use the icons and/or generated font(s) in commercial products such as website templates or software.
You can modify or alter all icons, in any way you wish.

This license does not give you the right to reproduce, resell, copy or publish this product (IcoMoon).

If you have any questions regarding this license, contact Keyamoon, the licensor, using this contact form.

Support IcoMoon

Hi! I hope you enjoy using IcoMoon. If you find it useful, please consider supporting this service. You may:

Buy IcoMoon's icon package
Share it on social networks
Say Hi to @keyamoon!