What is the license for IcoMoon icons/fonts?
There is a license link for each icon pack in IcoMoon's library. If you are using your own vectors, there are no license requirements for using the IcoMoon app.
Where are the webfonts?
Instead of providing a big font containing hundreds of icons/glyphs that you may or may not use, IcoMoon lets you make your own custom and optimized font. Icon font packs generated using the IcoMoon app contain all necessary webfont formats including WOFF and TTF; they also come with an HTML cheat sheet which you can refer to when using your icon font. In order to generate WOFF 2.0 fonts, you need to use one of our paid plans.
Why doesn't my font glyph show up?
- Check the generated demo.html file (after unzipping). You should be able to see the icons you selected, followed by their name. If you don't see the icons, please contact us for further investigation. Please note that there is a text field at the bottom right of each icon, which contains the character associated with your icon. This field may appear as blank or an empty square, which is normal. The only purpose of this field is to let you copy the character assigned to your icon.
- If you are trying to install and use the TTF font in a desktop application, see this guide.
- If you are hosting the fonts yourself, make sure to set CORS headers properly.
- Check your browser's console to see if there are any reported issues related to the font.
- If you can see the icons in the demo.html but they don't show up in your own implementation, try to find the difference between the demo and your own code. If you still couldn't figure out what's wrong, try to make a reduced test case and contact us.
How do I prevent codes from changing?
The IcoMoon app stores everything in your browser's cache by default. In addition to that, if you're using one of our paid plans, your data will get saved to your account. As a result, you would most likely find your IcoMoon setup the same way you left it from the last time you downloaded a font pack. If so, go ahead and modify your icon selection. The codes of your previously selected glyphs won't change. But if your IcoMoon setup is different from the last time, you can import the selection.json file included in the zip pack you downloaded previously. You can import this file both via the Import Icons button in the app, or via IcoMoon's project manager: Main Menu β Manage Projects.
Note that newly imported SVGs do not have any codes assigned to them. Therefore, re-importing all your SVGs and reselecting them each time would most likely result in different codes, based on the order of icons. If you want to re-import all your SVGs each time while keeping your previous codes, add the code to your file names: home-U0xE999 would get imported with a default code of E999 (hex).
Why are my projects missing in the IcoMoon app?
Unless you are using one of IcoMoon's paid plans, your projects only get stored locally in your browser. This has been noted in the sign up page as well as the Projects page in the IcoMoon app.
If you have been using a paid plan, your projects get stored in your account, and we keep periodic backups of them as well. You could contact us if you need your projects to be reverted to an earlier state.
If you have been using the free plan and your projects are missing, you could import the selection.json file that is included in every icon pack downloaded from the IcoMoon app.
Why doesn't my SVG get imported properly?
There can be many reasons for that. The current version of IcoMoon ignores strokes and text, make sure you convert them to fills. See importing guidelines for more info.
Who is going to access/own the resources uploaded to IcoMoon?
Almost everything you do inside the IcoMoon app happens locally. When you import SVG files or when you generate a font, everything happens in your browser and your SVGs won't get "uploaded" to our servers; unless you choose to use our paid plans, which enable saving of projects in your account.
If you still have privacy concerns, you can use the IcoMoon app while you're offline. Just make sure to load the Generate Font/SVG pages before going offline. You could then import your files to the app while you're offline and generate your icon pack.
How can I add more glyphs to my font?
Each font pack you download from the IcoMoon app comes with a selection.json file which you can import back to the app in order to modify or update your font and the class names associated with its glyphs. You could also save/load your IcoMoon project from Main Menu (top left) β Manage Projects.
If you don't have access to any of these files, you can import the SVG version of your font using the Import Icons button in the IcoMoon app.
Is it possible to add alias class names to icons?
Yes! Use comma to assign multiple names to a glyph.
Does IcoMoon generate WOFF2 fonts?
IcoMoon generates WOFF 2.0 fonts when using a paid plan.
How do I get rid of the color property in the generated CSS?
The color property only gets added if your icon has a color. You can remove colors from your icons in the IcoMoon app via the edit panel. To bring up the edit panel, click on the icon while youβre in the Generate Font tab. Or you can use the pencil button in the toolbar of the Selection tab. Using the edit panel, you can remove any colors associated with your icon. Once you do that, the extra CSS property would go away.
In order to remove all colors from a set of icons, use the Properties panel. To bring up the Properties panel, use the menu on top right of the set.
How can I move icons or sets between IcoMoon projects?
- Select the icons that you want to move to a different project.
- From the main menu on top left, choose New Set From Selection.
- Select Download JSON from the menu on top right of the set that you want to move/copy.
- After loading the target project, use the Import Icons button (or drag/drop) to import the JSON file from previous step.
Why is my font empty or lacks some glyphs?
IcoMoon uses the Private Use Area of Unicode by default. Operating systems usually don't list the glyphs in this part of Unicode. Therefore, it might appear that your TTF font is empty or lacks some glyphs. If you are using macOS (or OS X), after installing your font, select it in Font Book and then press cmd + 2, or choose the option with four squares on top. Doing so would make Font Book show all the glyphs included in the font.
See this gif to learn about other methods of finding/copying characters in your font.
Before downloading your font, you can set different codes for your glyphs. If you assign Latin character codes to your glyphs, your font will no longer look empty. You may also consider making ligatures if you want to install and use your font locally.
Why can't I switch to, or use the TTF font I installed?
While using the type tool, if you enter a character that doesn't exist in your font, most desktop apps would switch the font to something else. To prevent this, do not enter any characters that don't exist in your font. See this gif to learn about various different methods of copying the characters in your font.
Why is there a question mark followed by some characters added to URLs generated by IcoMoon?
To prevent browsers from loading an older version of the icons from the cache, it is necessary to make the URLs look different while still pointing to the same (updated) files. This technique is often called "cache busting". With cache busting in place, we can take advantage of far-future expiration headers for better performance and lower bandwidth usage.
You could replace the cache-busting string that IcoMoon generates with
any arbitrary string that you haven't used before. For example, you can
use ?v1
,
?v2
, etc.
Importing SVGs creates a new set in the IcoMoon app. How can I import to an existing set?
You can use the Import to Set option from the menu on top right of each set to import your SVGs to existing sets. You can also drag your files and drop them in the area that appears on top and around each set.
Why doesn't IcoMoon apply font-family to :before?
See this pen. The
default value for vertical-align
is baseline
. Changing the
font-family of only the pseudo element will result in elements with
differing fonts. Different fonts can have different font metrics and
different baselines. In order for different baselines to align, the
overall height of the element has to increase, which is undesirable.
Why do some of my icons get imported into wide cells?
IcoMoon displays SVGs with a large width to height ratio in a wide
rectangle, rather than a square. In other words, IcoMoon does not ignore
the width/height ratio of your SVGs. This feature gives you a more
precise control. If you want your icons to appear in a square, you will
need to modify your SVG's canvas and make its width and height equal.
If you have a bunch of icons with the same width but varying heights,
and would like to convert them all to squares, try importing all of them
together. If you import them together, IcoMoon will recognize their
pattern and it will automatically convert all of their canvases to
squares.
Why is the generated CSS referencing TTF before WOFF?
TTF fonts with an installable fsType provide better browser support than WOFF fonts. Additionally, when gzipped, TTF fonts are slightly smaller in size than WOFF fonts. Therefore, IcoMoon recommends using TTF over WOFF. To generate WOFF 2.0 fonts which provide the best compression rate, you can use our paid plans.
Is it possible to increase the precision of generated font glyphs?
You may increase the precision of your font by increasing its Em Square Height. This setting can be found under Generate Font → Preferences → Font Metrics. Note that by increasing a font's Em size, your font file will get larger. You shouldn't increase the em size if not necessary.
Which plan should I get? Basic or Unlimited?
If you are planning to host the files generated by IcoMoon yourself, get the Basic plan. Otherwise, get the Unlimited plan which generates CDN links suitable for production. The Basic plan does not generate these links. This is the only difference between the two plans.
Why doesn't importing to Wordpress theme/plugin work?
There are some third party Wordpress themes and plugins that support importing font packs generated using the IcoMoon app. To emphasize, this means that purchased icon packs aren't compatible with these Wordpress plugins out of the box. You will need to generate a font pack using the IcoMoon app first.
If your icons don't appear after importing your font pack to Wordpress plugins, try changing the class prefix setting from the Preferences panel before downloading. This way, you can prevent collisions with other CSS selectors of preexisting fonts. You could also try changing the Font Name setting.
In case your icons still don't appear, you could verify that the generated font pack itself isn't the culprit by unzipping and extracting it to a folder first and then opening the demo.html file in your browser. It is important to unzip the generated package. Opening the demo.html from within the zip won't allow loading of the generated CSS. When you open demo.html in your browser, you should see the glyphs you selected on the left side of their names. You can ignore the empty-looking fields below each glyph as they are only present to allow copying the character associated with each glyph. If you do see the icons you selected, something else in your setup might be causing the issue. You might want to consider contacting the developers of the Wordpress theme/plugin you're using.
Where can I download an invoice for my purchase?
After making your purchase, you will automatically receive a receipt and a link to generate the invoice. Make sure to check your spam and junk folders too.
Unanswered Questions…
If your question was not answered above, please feel free get in touch.