This video shows basic usage of the pen tool for drawing a grid-aligned flag
icon in IcoMoon's
vector editor.
After drawing the first curve, it is dragged while holding
Alt/Option in order to make a duplicate of it. This works when
dragging the path itself. Dragging control points of the path while holding
Alt has a different effect and won't make a duplicate. You could
also duplicate your selection using the
command bar
(search for "duplicate") or using the copy and paste buttons in the toolbar.
Drawing a Gear in the SVG editor
This video demonstrates how you can use the rotation tool, repeating actions,
and the union boolean operation to draw a simple gear icon in the
SVG editor.
Holding Alt when using the roation tool would make a duplicate
while holding Shift snaps the rotation angle to multiples of 15
degrees.
Drawing a Cloud in the SVG editor
This video shows how you can draw a pixel-fitted cloud icon in the
SVG editor
by rounding squares, joining points, extending and trimming paths.
Notice that the pen tool can be used
for extending a Bézier curve beyond its default endings without adding extra
points.
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.
Multiple Palettes from Library
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.
Star tool, Flutter, scss variables
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:
Star tool: A new drawing tool was added to the vector editor for drawing
stars with an arbitrary number of points. In order to change the radius of
the inner or outer points, you could select them first, move the origin
point to their centroid
and change the width/height fields with the aspect ratio lock toggled on.
Flutter and SCSS variables: You can now enable generation of a Dart class
for Flutter and scss variables under the
Subformats section of the Font format
settings. The output is similar to that of the old app.
You can now paste attributes/styles of copied object(s) onto your
selection in the vector editor. This works across glyphs and can be invoked
from the command bar or using its keyboard shortcut:
Cmd/Ctrl + Shift + V
Invite Non Paid Accounts to Projects
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.
Beta Testing the New App
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:
Command Bar
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.
Clean Projects
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.
SVG Editor
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!
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.
Better Import and Export
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.
Live Collaboration
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.
Non-destructive Undo & Redo
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.
Publishing with Revisions
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.
New Site & Upcoming New App
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.
New CDN Links
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.