Drawing a Mic in the SVG editor
Showcasing IcoMoon's vector editor, this video demonstrates how you can draw a pixel-fitted mic symbol in a few steps using simple shapes and (smooth) rounding.
Showcasing IcoMoon's vector editor, this video demonstrates how you can draw a pixel-fitted mic symbol in a few steps using simple shapes and (smooth) rounding.
The video above shows how you can import icons from Harmonicons while keeping multiple color palettes. This video also demonstrates IcoMoon's multicolor font (COLRv0) output, and publishing features.
In the library, icons that have already been added to your project are shown with an outline. When the colors of an icon don't match with that of the selected palette in library, a dashed outline would appear instead. Re-importing icons with a dashed outline would result in updating their colors as opposed to adding a new icon to the project.
Harmonicons comes with 4 multicolor palettes. You can switch between these palettes in the library. When you select an icon, it would get added to your project along with the selected palette. If you then want to import other palettes of the same icon while keeping the current color palette, you should first Duplicate it.
We have been adjusting the new app, fixing small issues and adding new features since its release. Here are a some of the more recent changes:
scss variables under the
Subformats section of the Font format
settings. The output is similar to that of the old app.
Until now, sharing projects in the new app required both the host and guest accounts to have an active paid plan. This restriction has now been lifted from guest accounts. You can invite any IcoMoon account to your projects. An invitation would appear in the Projects pane of the guest account. After accepting the invitation, you can collaborate on the same project in real time.
If you've been using the new app, take a moment and let us know what you think. We would really appreciate your feedback.
We are excited to announce that after several years in development, IcoMoon's new app is publicly available for beta testing. This version is quite different from its predecessors. Here are some of the biggest features and changes:
Press Cmd/Ctrl + K or Shift + : or Slash to bring up the command bar anytime you get stuck. Chances are you will find what you're looking for. You could also bring up the command/action bar via the question mark button on top right.
There is only one set of glyphs per IcoMoon project. The intention is to help keep IcoMoon projects clean and make them reflect the icons used in production. By default, every glyph imported to an IcoMoon project is meant to be included in exported assets. It is no longer necessary to select icons inside the project. Instead, you can optionally mark (aka flag) glyphs for performing certain operations on them. You could still change the subset that would get exported to marked glyphs, but you should rarely need to do so. The notion of selecting icons makes more sense for the library pane. You can select which icons from the library would be included in your project by a single tap/click. Glyphs selected in the library would get imported to your project. A second tap on the same glyph would remove it from your project. The new library also keeps track of the icons added to your project. It would show a notification when updates are available for the icons you've added, allowing you to optionally update and replace the icons in your project, without affecting their name, character code, or other metadata.
The new app comes with an advanced SVG editor. Unlike most vector editors on the web that use a canvas for rendering, IcoMoon uses SVG for rendering SVG! In other words, what you see is what you get. This editor has been optimized for designing icons and glyphs. We have ourselves used this vector editor for designing all the icons and SVGs you see on this website, as well as two new icon sets available in the library: Harmonicons and Orbiters.
The new app is a PWA and works on narrow and touch screens too. It's offline-first as well. You could "install" it (aka "Add to Home Screen" or "Add to Dock") to have access to an SVG editor on your device whenever needed!
Check out the editor's dedicated docs page to learn more.
IcoMoon can now generate actual multicolor fonts (COLRv0); which are widely supported and work in every modern browser. No CSS layering is required. You can even install generated multicolor fonts and use them in desktop apps.
IcoMoon now supports SVG gradients, masks, clip paths, and more. You no longer need to outline your strokes or convert them to fills or get rid of even-odd fills or intersecting shapes. IcoMoon itself would take care of it all upon export.
Importing fonts is now supported too. You can import TTF, OTF and WOFF(2) font files without having to convert them to SVG first. Kerning gets ignored for now but we do intend to support it in both imported and exported fonts in the near future.
With an active paid plan, you can now collaborate and make changes to the same project in real time.
Using the new Share button under each project, you can allow other members to access your projects with either restricted (read-only) permission, or edit permission.
The history panel reflects changes made to the project. Undoing and then making new changes would result in creation of a new branch, as opposed to destruction of the undo history. Each change can also be toggled off, which can be very handy at times. The history is stored persistently, meaning it won't get removed when you reload/refresh the app. It also gets stored in exported project files.
Each time you upload assets for hosting, a new link would get associated with them, allowing you to switch to previous revisions if necessary. There is also a generic, unchanging link which always points to the latest version.
These are only a few of the changes and features of the new app. You can check out the docs to learn more or reach out if you have any questions or suggestions.
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.