Illustrator to Icomoon workflow

Setting up the canvas

The canvas for the icon should be square and defined in pixels at 32 times the intended size. You can do this by typing the calculation into the height or width boxes. For example "12*32" would create a canvas suitable for a 12 pixel icon.

Setting up the pixel grid

Setup the grid to give 1 line every 32 pixels.

Setting snap to grid on

Set "Snap to Grid" on and show (not hide) the grid.
You now have a space which you can draw scaleable artwork that you can be certain of the pixels rendering at your defined size. You can turn off "snap to grid" at your discretion to overcome its creative limitations but be mindful of the effects on the outcome, and always test the icon in the browser at the intended size by exporting and building as described in the rest of the guide.

Stroked paths

Your artwork may appear solid when viewed in preview mode but if strokes instead of fills are used the visual will not transfer to an icon font. You can see what is a stroke or a fill by switching to "Outline" mode (command+Y on mac or View > Outline)

Outline

Preview

Outline Stroke

NOTE: The next steps make the artwork harder to change, so save a copy. You can convert strokes to solid shapes by selecting them and then Object > Path > Outline Stroke from the menu.

Strokes now shapes

Viewing the same shape in Outline mode shows all the artwork is now solid shapes

Make compound path

The artwork must be a single compound path for best results as an icon font. Select all the shapes and then Object > Compound Path > Make.

The effect of compound paths on the svg code

The icon font will generate a single vector path for each icon even if it is made up of several shapes (consider the lower case letter 'i' in a regular font, this is a single path that is scaled and coloured uniformly.)

After compound path

With all the shapes in a single compound path, there is only a single "path" tag in the svg code.

<svg version="1.1" id="Layer_1" x="0px" y="0px" width="384px" height="384px" viewBox="0 0 384 384" enable-background="new 0 0 384 384" xml:space="preserve"> <polygon points="336,208 192,64 48,208 16,176 192,0 368,176 "/> <rect x="32" y="224" width="320" height="32"/> <rect x="32" y="288" width="320" height="32"/> <rect x="32" y="352" width="320" height="32"/> </svg>

Before compound path

With no compound path made, the component parts of the artwork can be seen as separate laters in the layers panel. These are translated directly to separate tags in the svg code.

<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 384 384" enable-background="new 0 0 384 384" xml:space="preserve"> <path d="M48,208l-32-32L192,0l176,176l-32,32L192,64L48,208z M32,256h320v-32H32V256z M32,320h320v-32H32V320z M32,384h320v-32H32 V384z"/> </svg>

Pathfinder Unite

Do not confuse the pathfinder "unite" function with making a compound path. Whilst still inside illustrator, this seems the same but does not have the same effect on the layers or the code.

<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 384 384" enable-background="new 0 0 384 384" xml:space="preserve"> <g> <polygon points="192,64 336,208 368,176 192,0 16,176 48,208 "/> <rect x="32" y="224" width="320" height="32"/> <rect x="32" y="288" width="320" height="32"/> <rect x="32" y="352" width="320" height="32"/> </g> </svg>

Save As > SVG options

Most the default options for Illustrators save as svg are sound. Check to make sure your options match the ones below.

NOTE: give your svg (and all your files!) a good name. Example = <iconame>-<size>.svg e.g. "hurger-12.svg"

1. The "Responsive" option adds a width and height attribute to the opening SVG tag ("width="384px" height="384px"). This is not needed for the icon-font and 

1. The "Responsive" option adds a width and height attribute to the opening SVG tag ("width="384px" height="384px"). This is not needed for the icon-font and 

The Icomoon App

Open the icomoon app at icomoon.com and take note that:

  1. Each icon must be within a set, the "import icons" button will bring icons into a newly created set.
  2. The example below has several sets of icons already imported.
  3. Each set contains icons that share the same 'size'.

Import into a set

Import an SVG into a set by selecting hamburger > Import to set and then find your svg file on your desktop.

New Icon shown in set

You can see the new icon below is not selected (yellow border)

Change the grid size of a set

Change the "grid size" of an icon set by selecting hamburger menu > Get info ...

... then "Reset Grid Size".

Input the size that corresponds with the icons intended size.

Repeat for all your icons/sets.

Generate Font

Once you have all your icons ready, make sure they are all selected and then click "Generate Font" at the bottom right of the app.

Download the icon font

Click the "download" button at the bottom right of the app.