ℹ The following is the documentation for IcoMoon's new app, which is currently in beta. You can find the old docs here.
Getting Started
Head over to https://icomoon.io/new-app to try IcoMoon's new app. In short, this app lets you:
- Import icons from different sources
- Edit or create icons in the built-in SVG editor
- Export in various different formats
All of which can optionally be done in a shared project with live collaboration among multiple team members. This feature requires an active paid plan.
To bring up the command bar to search available shortcuts and actions in each section of the app, use the question mark button in the upper right corner or press Cmd/Ctrl + K or Shift + : or Slash.
One-off Usage
For one-off use cases where you only want to grab a few SVG icons, see the library page in the IcoMoon app. It comes with thousands of free icon packs.
You can press the chevron on the right side of each icon pack in the library to find information about its license and author. There are currently three paid icon packs which can only be purchased separately, with a one-time payment. You won't have to pay a subscription fee and you can optionally access them from the library.
When you click/tap on an icon using the Copy tool, its code will get copied to your clipboard. The Download tool would generate a file and download it to your system. The Add/Select tool is useful when you want to add multiple icons to your project for editing or collective export formats such as fonts or sprites.
Main Usage
When you first open the IcoMoon app, it will load an empty project for you. You could add multiple icons to your project using the import panel or by dragging and dropping your files and folders. Depending on your screen size, the button for toggling the import panel would either appear on top left (on wide screens) or at the bottom. You could also search for "show import" in the command bar mentioned earlier.
The IcoMoon app comes with an advanced SVG editor, which you can bring up by double-clicking/tapping on the icons that have been imported. This does not work on the icons in the library. You will have to import them to your project first.
Next to the toggle button for the import panel is a button for toggling the batch panel, which is for making changes to multiple glyphs at once.
The next toggle button is for the export panel, which lets you choose the formats to be generated. This panel also allows for publishing generated assets for testing, development, or production.
This is all you need to know to get started with the IcoMoon app. Remember to use the question mark on top right or press Shift + : (or Slash) when you're stuck or can't find a certain functionality. The rest of this guide will provide more detailed information about each part of the app.
Projects
To reach the Projects page from a loaded project, use the back button on top left. This section of the app lets you make multiple projects, sort them, or flag them with a color. You could download each project as a JSON file, which you could later import back by drag and drop or using the Import button on top. Generated project files will contain your recent undo/redo history too.
By default, IcoMoon projects only get stored locally in the browser. They won't get saved in your account. This has been noted in the sign up page too. If you want your changes to get saved to your account automatically, consider our paid plans.
Live Collaboration
With an active paid plan, you can collaborate and make changes to IcoMoon projects in real time. This can work in two ways:
- By sharing the same account, multiple users can log in and make changes to the same projects together.
- Using the new Sharing mechanism explained in the next section, you can allow other IcoMoon members with an active paid plan to access your projects with different permissions.
Import Panel
The import panel lets you open the library page to explore thousands of icons, select your own files to be imported, add empty glyphs, import SVGs by entering their code, or extract SVGs from a web page by entering its URL. JSON files generated by the Export panel or the old app can be imported too.
By default, newly imported glyphs appear in front and on top. You could change this behavior using the Import Settings tab of the Import panel.
Unlike the old app, you no longer need to convert strokes to fills or change the fill-rule when importing SVG images. If you do encounter any issues when importing SVGs, you could report it to us.
Importing Fonts
The current version of IcoMoon supports importing OTF, TTF, and WOFF(2) files. SVG fonts (deprecated) can be imported too. Bitmap glyphs are not supported. Keep in mind that SVG images can store curves with a higher precision, while fonts usually store glyphs with some approximation. On the other hand, when you import fonts, its code points and ligatures (and glyph names, if present) will get imported as well, which may be desirable when making changes to fonts.
Note: OTF files support cubic Bézier curves and provide a higher precision compared to TTF files. WOFF(2) files may contain either type of glyph data. Therefore, we recommend importing OTF files over other font formats where possible.
You can inspect whether a WOFF(2) font is using higher precision cubic Bézier curves by importing it first and then using the built-in vector editor to inspect its curves. Cubic Bézier curves would have two off-curve control points/handles, while quadratic curves, which are used in TrueType outlines would have a single off-curve control point for each curve.
Note: Importing fonts is a relatively new feature and may not work as expected in some cases. For example, multicolor fonts with gradients (COLR/CPAL v1) are not currently supported. Feel free to report any issues you notice when importing fonts.
Replacing Glyphs
You might need to re-import your SVGs to an existing project in order to update them without changing other metadata (such as code points) associated with them. This can be done by enabling the Replace by Matching Names option in the Import Settings tab of the import panel. This feature works by matching file names with names of imported glyphs.
You could also replace the contents of glyphs manually using the SVG editor.
Imported Glyphs
Imported glyphs appear in separate cells in the main area of the app. You could select one or more glyphs (by dragging) in order to make changes to them. When you select some glyphs, a hovering toolbar would show available options for renaming, deleting, copying, moving, marking, and more. Each tool has a hotkey and could be triggered using the command bar too.
Pro Tip: IcoMoon's search fields support emojis. You could enter an emoji to find icons with a matching/similar name. Or/union operation is also supported. You may separate keywords using "OR" (all caps) or the pipe symbol (|). This can be useful when you want to combine search results and view different icons alongside each other. As an example, try searching for "undo | redo" (without quotes) in the library. Double quotes are supported for exact matches.
After selecting a glyph, you can move the selection using the arrow keys on the keyboard. Vim-like shortcuts (H, J, K, L, G, 0, $) are also supported for moving the selection. This is useful when you want to go through your glyphs to rename them (by pressing Enter) or view/edit their metadata in the batch panel. Or you could use the view panel to view your glyphs at different sizes.
There is an important distinction between selecting and marking/flagging glyphs. Selections are volatile and aren't meant to be saved. Think of them in the same way that selections in file managers work in operating systems. Marks/flags, on the other hand, get saved in the project. In other words, you would use marks when you want to save and restore a selection of glyphs later. To select all marked glyphs, you can use the batch panel or search for :marked and then select all matching glyphs.
A code point (aka character code) gets assigned to each glyph that you import. These codes would only matter when generating fonts.
Export Panel
This panel lets you export your imported glyphs in various different
formats. The following formats are currently supported:
Font, SVG, SVG Sprite (symbol definitions), Elm, React, Vue, Tiles
(SVG), PNG, Favicon, and CSH (Photoshop's custom shapes format).
There is also a Library Set format, which is used for the sets in the library. Exported library sets can get imported to the library as long as they are hosted on a server with CORS enabled.
More export formats may get added in the future. If you have any suggestions, feel free to get in touch.
You can add or remove these formats to be included in the generated package. Each generated package would include a JSON file with an icomoon.json extension, which you could import back to the app to retrieve your glyphs. A folder gets generated per export format. You will find a demo.html file for some export formats. This file can be used as a reference and documentation for using generated files. This file can be opened in the browser and will only work properly after unzipping the generated package. Opening it from within the generated zip will lead to errors.
Besides downloading files, you can also upload them for hosting. A new revision with a unique URL is created for each uploaded package. In addition to these unique URLs, you will also find a generic, non-changing URL which will always point to the latest upload. By visiting these URLs, you can browse generated files or copy their URLs for usage in your code or build tool, which can be very handy in development.
For each project, a number of revisions are kept: 20 with the Basic plan and 40 with the Unlimited plan. These revisions are unaffected by new uploads. This means that you could use unique URLs in production to make sure your changes would only get applied once you manually update the URLs. Generic links are more suitable for development.
When using these generated URLs, you won't have to worry about enabling CORS or setting the right HTTP headers. It's all taken care of.
By default, when using the Free plan, generated links will stop working in 24 hours. With the Basic plan, generated URLs will work for 30 days. The Unlimited plan will unlock permanent CDN links which are suitable for production use; they will continue to work as long as your plan is active.
The Quick Export tab of the export panel lets you specify which format to use when using the Copy and Download tools or their keyboard shortcuts. You can choose among typical export formats such as SVG or React; or choose text formats such as Name, Character, or Data URI for what gets copied/downloaded.
Fonts
The Font export format lets you generate both webfonts and desktop fonts. IcoMoon supports generating plain multicolor (COLR/CPAL v0) fonts as they are widely supported. Multicolor fonts featuring gradients are not yet very well supported. In particular, they aren't supported in any version of Safari.
By default, a character code from the Private Use Area of Unicode gets assigned to each glyph that you import. You could then assign an appropriate code point to your glyphs either using the Metadata tab of the batch panel or by enabling the Show Characters switch in the view panel.
Fonts that have icons as their glyphs are often referred to as icon fonts. We recommend using icon fonts as a progressive enhancement, for customizing emojis or other Unicode characters. Learn more about this technique.
Ligatures
Using ligatures, you can map a sequence of characters to a single glyph.
To add a ligature to a glyph, either use the
view panel to make ligature fields visible or
use the Metadata tab of the
batch panel.
By assigning a word to an icon, you can type that word and the icon
would appear:
Interactive Demo at Linearicons.com
Multiple words may get assigned to each glyph. If the app/platform you're using supports ligatures, typing any of the words assigned to a glyph should bring it up.
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. To assign these letters to actual glyphs rather than empty ones, you can use the AlphaNum16 set available in the library. You could also import any alphanumerical font file.
Also note that having empty glyphs for your alphabetic letters is perfectly fine when using the font in web. In case your font fails to load, the browser would fall back to using a different font and therefore the words you assigned to your icons would become readable, which is a good fallback.
Installing
To use the generated font in desktop applications, you can install the TTF or OTF font on your system. OTF fonts usually have a higher precision. After installing the font, the operating system might not list all the glyphs included in the font. Instead, most operating systems would only list the Basic Latin portion of the font.
If you are using macOS, you can open Font Book to see all the glyphs included in the font by pressing ⌘ + 1 or choosing View as Specimen under the View menu.
You could also refer to the generated demo.html file to see a list of the glyphs in your font. You should also find an option for copying the character associated with each glyph upon clicking/tapping on its field.
Note: When using type tools in desktop applications, do not enter characters that don't exist in your font. If you do so, the desktop application may switch your selected font to a different font. You should only be copy/pasting the characters that exist in your font.
To make it easier to use your font locally, consider adding ligatures to your glyphs.
Note: In some operating systems, reinstalling an updated version of a font that you previously installed may not work as expected. You may need to change the version of the font to make sure the operating system would be using the most recently installed font. To set a version for your font, refer to the Metadata subsection of the Font format. Renaming the font (under the Font export format) is another way to remedy this problem. You may also need to reopen the application in which you're using the font.
Strokes
When generating fonts, IcoMoon would make some changes to your SVGs where necessary. For example, if you have any strokes, they will need to get expanded and converted into fills. All intersecting paths would also need to be united into one. Uniting intersecting paths is also known as the union boolean operation. IcoMoon itself would take care of these conversions.
In case you notice any issues, you could send us a sample SVG for further investigation. You could also use IcoMoon's built-in SVG editor to make adjustments and simplifications that may resolve the issue.
Batch Panel
This panel is for applying changes to multiple glyphs.
Colors
The Colors tab lets you change the background color and the default foreground color. If you have multicolor glyphs, all of their colors will get listed, allowing you to change them on all glyphs or a subset of them. You could also import a color palette. When you do so, new colors get assigned to your glyphs based on their distance from the colors of the currently selected palette.
By default, both the background and foreground colors are set to Auto, meaning that their color would be determined automatically based on the system's dark/light mode. This automatic color would also translate to the currentColor value in CSS and SVG in exported glyphs.
Edits
The Edits tab lets you copy the edits/changes made to a glyph in the vector editor and apply them to other glyphs. For example, if you need to change the size or padding of all your glyphs, you can make the necessary change in one glyph and then use this tab to repeat and apply the same change to other glyphs. Multiple edits can get repeated/copied too. As an example, this would allow you to add a background squircle to all your glyphs without having to manually do so on every glyph.
You can specify the name of the glyph from which the edits get copied. The cross-hairs button next to the name field would set the field to the name of the last modified glyph in your current selection. You can select a single glyph and press this button to specify the selected glyph as the source of copy.
Any subset of glyphs may be specified as the target for applying edits. The source glyph itself would be excluded from the target subset unless when it is the only glyph in the specified subset. Therefore, you don't need to manually exclude the source glyph from the target subset.
You can also specify the number of edits to get copied. Changes will get copied up to the current state of the specified glyph. In other words, if you want to copy older changes, you can open the vector editor for the glyph in question and use the history panel to move the current state backwards.
Metadata
The Metadata tab of the batch panel lets you select different subsets of glyphs, rearrange them, or edit the metadata associated with them.
Under the Marking Collections section of the Metadata tab, you could add new empty collections of marks/flags. This feature can be useful for saving and restoring different subsets of glyphs.
Code points can be extracted from glyph names. This functionality is available under the Codes section when editing metadata of multiple glyphs. This feature works by looking for a hexadecimal code prefixed with U0 or U0x in the name. If the code is valid, it will get assigned to the glyph. Otherwise, if the name of the glyph matches the name of an emoji, that emoji's code point will get assigned to the glyph.
SVG Editor
Click or tap twice on a glyph to bring up IcoMoon's SVG editor. The following is a summary of the features currently available in the vector editor:
- Tools for drawing/modifying Bézier paths and SVG shapes
- Gradient and color picker
- Transform tools for resizing/rotating/reflecting shapes
- Snap options for precise edits
- Boolean operations (unite, subtract, intersect, exclude, etc.)
- Outlining/Expanding of strokes to fills
- Smooth corner rounding with G2 continuity
- Code Editor
You can learn more in the SVG editor's documentation.
History & Branches
Changes you make inside a project get reflected with a short description in the history panel. This panel can be toggled using the button depicted below. Depending on the size of your screen, you will find this toggle button on the top right or bottom right of the app.
Each glyph has its own separate history, which can be viewed in the SVG editor. You could choose any of the changes before or after the currently selected one to change the state of the project.
History items can be toggled off using the diamond-shaped button on the right side of each item. This can be very handy at times when you need to keep your most recent changes while undoing some changes in the past.
The 7th item is highlighted, indicating the current state.
The 5th item was disabled and has no effect.
Unlike most implementations, IcoMoon's history is non-destructive. When you undo a bunch of times and then make a new change in the app, the changes that were undone don't get lost. Instead, they will still be reachable in a different branch. Branches get created automatically, and you can switch to available branches using the Branches tab of the history panel.
View Panel
To change the main view of the app in each section (glyphs, library, vector editor), refer to this panel.
While in the library, you can choose which library sets are enabled, or whether glyph names should appear below them.
While in the glyphs section, the view panel lets you decide which metadata fields (name, code point, ligatures, etc.) should appear in the main area where glyphs are listed.
You could also define a number of preview sizes. When you select a single glyph, you'll be able to view it at these sizes. The Pixel Preview toggle would disable the default rendering of the SVG and instead would use pixelated/canvas rendering at a fixed size. The large preview would use the size of the grid when Pixel Preview is enabled. By enabling Pixel Preview and setting the grid size, you could quickly spot pixel alignment issues. Or you might be able to find the size an unknown glyph was designed on by changing the grid size to see which size aligns best with the lines/curves of the glyph or results in the most crisp pixel preview.
The grid setting has no effect on the files you export. It only determines the size of the grid displayed on the large preview as well as the grid used in the SVG editor.
Questions/Support
You might find your question in the FAQ page. Feel free to reach out if you have any suggestions or questions.