IcoMoon has a new website now. We have also been working on a completely new version of the IcoMoon app for the past couple of years. We are aiming to release it this year if everything goes well.
You could set the newsletter option in your account to get notified when it becomes available.
We are now using cdn.icomoon.io for CDN links generated in the IcoMoon app. Previously generated links will continue to work for months to come. We are committed to give you ample time for this transition.
If you are using IcoMoon’s Unlimited plan, we recommend switching to new links to achieve better performance. In order to do so, you could perform a find and replace operation and change d1azc1qln24ryf.cloudfront.net to cdn.icomoon.io in the URLs you’re using.
With this change, in the unlikely event that there is a problem with our CDN provider, we could easily move to a different one. It would also allow us to provide better services in future.
We will be sending email notifications before disabling the old links.
Since Amazon CloudFront provides better response times and performance, IcoMoon’s Unlimited plan no longer generates S3 links.
You will notice that the IcoMoon app would only list CloudFront links for use in production. Previously generated S3 links can no longer be updated through the app and they will get completely disabled on June 5th. If you have been using S3 links, make sure to switch to CloudFront to prevent any issues on your side.
If you’re not using IcoMoon’s Unlimited plan, or if you have been using CloudFront links, you don’t need to make any changes.
Feel free to contact us if you have any questions.
A new export format was added to the IcoMoon app for those who use flutter. In order to enable generating this output, refer to the Preferences panel in the Generate Font page.
IcoMoon’s selection.js file now gets uploaded in addition to the other necessary files when you enable Quick Usage. The app would show two links, one for selection.json (which can be used in build tools), and one for reference.html. This reference.html is a dynamic page that lists the icons in your selection along with their class names. If you are using a paid plan, the link to this page does not change unless you rename your project. This lets teams share the link to the reference page as a cheatsheet for other team members who want to use the icon set.
For font smoothing, Zach Leatherman argues that it is better to use the default antialiasing (subpixel) instead of grayscale antialiasing.
However, there is an issue with subpixel antialiasing on macOS. It adds extra pixels. If you design a glyph on a pixel grid and draw a straight line that exactly fits in pixels, then use the default subpixel antialiasing on macOS, it’ll add some gray pixels around your line. That’s unexpected. A line that fits in pixels should not get rendered with a bunch of extra pixels around it. On the other hand, grayscale antialiasing does not add these extra pixels. It is the standard antialiasing which is also used for rendering SVG and any shape drawn with CSS.
This demo shows a simple glyph with and without grayscale antialiasing. If you zoom in on pixels, you can clearly see the difference and how subpixel antialiasing is adding some extra, unwanted pixels.
To zoom in on pixels, you can either take a screenshot and then use an image editing program like Photoshop, or you can use the zoom functionality in macOS, which can be enabled from System Preferences → Accessibility → Zoom → Check “Use scroll gesture…”. Make sure to uncheck “Smooth Images”.
This is a scaled up screenshot of the demo above, taken on macOS.
On macOS, the default font-smoothing makes fonts appear bolder than they’re supposed to. As a workaround for this issue, use the following CSS properties:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
After several months of hard work, we are proud to introduce Lindua, a new icon pack with a unique and distinctive style. This premium icon pack is now available for $69. We hope you enjoy using this set in your projects.
We are also unveiling Vect.com, a new domain that we are planning to use as IcoMoon’s new home in future.
The IcoMoon app no longer ignores strokes upon importing SVGs. They still get ignored when you want to generate fonts or CSH files (which don’t support strokes). But for other cases, e.g. when generating PDFs, you can use strokes without problem.
For generating fonts and CSH, you could convert strokes to fills before importing your SVG.
There are some browser extensions that allow changing fonts. Such extensions may be used by people with dyslexia. Some of these extensions (such as Font Changer and dyslexie) affect all fonts on the page, even icon fonts. This is obviously a bug in the extension, but to prevent issues like this, you can add !important to your icon font’s font-family. Another solution would be to use a CSS selector like .icon, .icon:before.
The CSS generated by the IcoMoon app has been updated to address this issue.
IcoMoon lets you use your icons both as SVGs and icon fonts. There are pros and cons to both methods. SVGs are recommended in most cases; but if you need a lot of icons in your UI, fonts can provide better file size compression. The following is a comparison of the same set of icons containing 170 icons in both SVG and font formats. The SVG file has been minified and it contains all the <symbol> definitions ready to be inserted via the <use> tag. Files used in this comparison have been linked below.
* WOFF 2.0 files should not be gzipped because they are already compressed using the “brotli” algorithm.
