Design & UX
Article

Create an Icon Font Using Illustrator & IcoMoon

By Massimo Cassandro
Hieroglyphs -- 'old school' iconography

photo: listentoreason

An icon system can often become central design element in your web project. You can find many free or commercial icon sets on the web, and they are often included in major CSS frameworks (Bootstrap 3 Glyphicons is a perfect example).

On some occasions, however, you may need more specific glyphs not included in a generic set. Or you may just want to better coordinate the design of your icons with the other design elements of your project. In these cases you’ll want to draw a new icon set from scratch.

There are two widely-used methods to add a set of icons to your projects:

  1. Web font
  2. SVG

Today I’m going to cover web fonts. We’ll cover the use of SVG in another article.

Traditionally font creation had been known as a difficult and demanding task, but thankfully building icon font sets, has become considerably easier thanks to easy online tools such as IcoMoon, Fontastic, or Fontello. Each allows you to build a font by either ‘cherry-picking’ pre-built icons from public libraries, or by uploading and compiling SVG files you’ve prepared yourself.

BYO Icons

To build your own icon font, the first step is to design icons – we will use Illustrator for this task – and then save them as SVGs.

Find your design style

Before you start drawing, you need to define style properties for your glyphs such as stroke sizes, grid proportions and so on.

Begin by doing some readability test at different sizes and build a template you will use to draw all your glyphs. It’s no use designing finely-detailed icons that don’t work at lower resolutions.

It’s also very useful to sketch your font before drawing, also a very rough sketch (like the one below) will help you to find ideas for all the symbols you need.

A very very rough sketch

You can then to decide on a grid size for your glyphs. My tip is to not draw directly at your target size (for example 16x16px) or at very big sizes either. Instead I’ve found that a grid of 60-80px side is often good for me. Scaling up or down from this size is generally successful.

Of course, this is not a ‘set-in-stone’ type rule: project needs and experience may change on a case by case basis.

For this article, I chose to draw my icons with a stroke of 8px, without fill and set inside a grid of 64x64px.

Starting drawing

Illustrator artboards are very useful for this job: you can draw each glyph in a different artboard, keeping each in a single file. The artboards can be rearranged, renamed and can be exported as standalone SVG files (which is precisely what we need for IcoMoon).

Each artboard can also have independent axis coordinates, that will be very valuable for objects alignment, as we will see later.

We can now start creating a new 64x64px Illustrator document:

Illustrator New document panel

Note that you can start create all the artboards you need using the Number of Artboards option: I prefer to add artboards as I need them, but there is no reason why you can’t create all your artboards first.

The new document with the first artboard

Now we can set up the grid. We want it to start from each artboard origin (the top-left corner) and to divide the artboard into a 8×8 checkerboard. Before doing that, let’s take a quick look at the way the Illustrator coordinates system works.

Illustrator workspace

Illustrator workspace is composed of a canvas that contains one or more artboards.

Artboards are placed on the canvas starting from a point called the Global ruler origin. In addition every artboard has its own origin point and rulers as well.

When you’re positioning new artboards using the Artboard tool, you will always use the global ruler. In almost all other cases, you will use the artboard ruler according to ViewRulersChange to Artboard (or Global) Ruler option.

If you are using the Global ruler, every object you draw on any artboard is drawn in relation to that single origin point (i.e. the Global ruler origin). Otherwise coordinates refer to the origins of the artboard which contains it.

In short, using the Artboard ruler system:

  • Artboards are placed in the canvas according to the Global ruler origin
  • The objects we draw are placed in an artboard according to the Artboard ruler origin (in the screenshot below, you can see that the two squares have the same coordinates values even if they are placed in two different artboards).

Illustrator workspace

For this job, we will use the Artboard ruler, since it is more suitable for glyphs alignment.

Setting up the grid

Illustrator’s grid is placed on the workspace starting from global ruler origin. You can set its properties choosing PreferencesGuides & Grid. Since we want our 64x64px canvas to be divided into 8 parts each side, we will set a main gridline every 16px (this will cause our artboards to be divided in 4×4 parts) with two subdivision:

Guides & Grid preferences panel

Now we have to ensure that our grid matches exactly our artboard. By default, the first artboard is placed at global ruler origin, but, since artboards can be moved and reset: to do this simply double-click the ruler origin with the artboard tool.

Our grid should now perfectly align with our artboards:

Workspace with grid

The first glyph

Let’s start our first glyph, a simple check-sign inside a circle:

Check sign

To draw the circle, we have to select the Ellipse tool, click in a point inside the artboard and input the ellipse width and height:

Ellipse tool

Next, we have to remove any fill and to set a black stroke of 8px size. At this point we can align the circle to the artboard (make sure the align to artboard option is selected):

Align panel

But the result isn’t quite what we expected: Illustrator aligned the path without computing the stroke width. Thankfully, this can be easily resolved, setting the Use Preview Bounds option in the Preference Panel. Now Illustrator will compute stroke widths inside the artboard regardless of aligning and resizing, and this makes drawing quicker and more accurate.

Preview Bounds example

Completing the glyphs drawing

We now have to draw each glyph, adding a fresh artboard each time. You can add an Artboard using the Artboard tool and option/alt dragging an existing one or clicking the New Artboard icon in the Artboards Panel.

Artboards can then be easily rearranged by choosing ObjectArtboardsRearrange (or the Rearrange Artboards command in the Artboards Panel menu) following the order in the Artboards Panel.

Rearrange artboards panel

Note that glyphs are always uploaded in alphabetical order, so keep this in mind if you want the artboard order in Illustrator to match the glyphs order in the font.

Give to each Artboard a name (no spaces): this will become the name of the glyph and also the class names of the generated CSS, so it’s very important to use meaningful words for them.

The completed icons file

Although we often use strokes to draw our symbols, font creation has some special needs. We have to remember that:

  • Each stroke must be converted to fills
  • Fills must be combined creating compound paths if necessary (no overlapping shapes)
  • Any color will be ignored: glyphs will always be interpreted as black. You also can’t use white for backgrounds: you can have only transparent ones
  • Any embedded image in your SVG will be ignored

You can use the Expand command to convert paths to filled shapes, and the Pathfinder panel to quickly combine overlapping shapes into single elements.

Strokes to paths process

Once our glyphs are ready, we can save each one as a distinct SVG file by using the Use Artboards option in the Save as dialog.

Exported SVG files

Illustrator saves SVG files by prefixing their names with the .ai document name (icons_). Since IcoMoon uses files names for glyphs, I prefer to remove this prefix (there are a lot of small applications to easily rename all files) to reduce any confusion.

Uploading files to IcoMoon

The IcoMoon site provides an online app to build icon fonts. The app starts with an Untitled project with access to some free icon libraries from which you can choose symbols.

Since we will upload our own glyphs, we can remove all preloaded libraries using the small menu at the right of each of them (note that this is not mandatory, since only selected symbols will be added to your font). It just keeps your project clean.

You can then save your project clicking the Manage projects icon on the right of the app menu bar. Note that with IcoMoon free accounts, your project will be stored locally in your browser, so, you won’t be able to access it elsewhere until you download the project data (a JSON file) or upgrade to Premium account (that allows you to store projects in the cloud).

Icomoon app

Now, you can upload your SVG files using the Import icons button: your glyphs will appear in the app as a Set. It’s easy to rearrange, delete them or edit each glyph using the tools provided by the app at this stage. You can also edit the set metadata (the name of the set and some author info) or perform other tasks using the small menu at the right of the set.

Icons can be edited in the app using the edit tool. You can’t alter vector data in this way, but it is possible to resize or move the glyph, download the SVG file or replace it.

The edit symbol panel

To build your font, you’ll first need to select all required icons using the select tool (or just Select All/None command in the Set menu if that suits). You’ll be able to identify selected glyphs by their yellow borders. Then you must click the Font button at the bottom of the page.

IcoMoon app with all glyphs selected

The app will load a secondary window with all selected symbols, displaying for each of them the glyph, the name, and the Unicode point that IcoMoon assigned to it in the PUA range. The use of the PUA range is considered the safest unicode sector to host your icons, although IcoMoon lets you use the standard Basic Latin range, if you like, by clicking the Codes button in the top bar.

You can also assign different range codes to each character by manually inserting a new code or a character:

The glyphs list

Before downloading your font, add a font name (this will be used in the @font-face rule), and Class Prefix and/or Postfix (that will be used as selectors in the generated CSS).

There are many other parameters you can set: from Metadata info to Metrics values, I recommend to read carefully the short and well explained documentation to set properly all of them.

The font preferences panel

Your icon set is done! Download your font (or, if you have a premium account, simply link to the CSS) and add it to your project.

The downloaded .zip file contains the font in various formats, a demo file you can use as a reference, a .json file that can be re-uploaded to restore your project (to view it into another computer, for example), and, of course, a .css file encoding your icons.

The font folder

The CSS (you can see an example below) contains the @font-face rule and all your symbols selectors.

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-88cxph');
    src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
        url('fonts/icomoon.woff?-88cxph') format('woff'),
        url('fonts/icomoon.ttf?-88cxph') format('truetype'),
        url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="myicon-"], [class*=" myicon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.myicon-alert:before {
    content: "\e600";
}
.myicon-arrow-down:before {
    content: "\61";
}

/* etc */

Have a go!

I’ve found this is a very quick way to build an icons font, but it certainly takes time to find the perfect workflow, and to test all options that both Illustrator and IcoMoon can offer.

Have fun

  • JerryAlmeidaFoxx

    Wow, great tutorial thanks :)

  • Prosystem

    yes great tutorial thanks a lot

  • http://yourauthenticweb.com/services/web-design/ Ashley Pajak

    That is actually really interesting! Thanks, I’ll try to implement that in future.

  • Michael

    Massimo, excellent walkthrough. Centered my thoughts about a side project we’ve been toying with here at Webwerx. Thanks for providing the encouragement your step-by-step tutorial provides.

  • http://envokedesign.com/ Envoke Design

    Exceptional article! Very thorough, thank you!

  • Ivan Goloub

    Excellent details. Thank you.

  • http://jordancooperman.com Jordan Cooperman

    Don’t usually comment, but this is damn thorough and very helpful, thank you!

  • http://www.umairulhaque.com/ Umair Ulhaque

    That was brilliant teaching and I guess there is nothing left from drawn to render such icons. Many thanks :)

  • kukeit

    Thanks for the tutorial. Unfortunately I am using Illustrator 5.5 and it seems not to be possible to save separate artboards as an SVG file… do you know anything about that?

  • Johanna

    Thanks for the post! This is why I love the internet and the people who help build it – so much sharing. :)

  • JohnGaltUSA

    Thank you for the great tutorial. I am curious about one thing, is there any advantage to using a 64px grid versus a 64pt grid?

    • https://www.behance.net/massimocassandro Massimo Cassandro

      In a standard 72 DPI environment pt and PX bring to the same result. Anyway I prefer using px

  • https://www.behance.net/massimocassandro Massimo Cassandro

    I apologize for my very late answer, but I saw your post just now. Unfortunately I think that using illustrator 5.5 everything becomes more complicated but you can use it for the initial part of the drawing at least

  • JohnGaltUSA

    One little trick that I have learned is that you can do a “Save A Copy…” when saving the SVG files and replace the name of your file with a single space. This will save your artboards with your artboard names without having to worry about renaming them. When you upload them to IcoMoon it strips away the leading space.

    • Corey Lewis

      Thanks for the info! Works like a charm!

  • sankar

    I have doubts using the fonts into html.Cant getting the icons in there..How.?can anybody clear me
    …please

    • https://www.behance.net/massimocassandro Massimo Cassandro

      If you mean how can you link your icon files to your html page, it’s quite simple: IcoMoon produces a CSS file, you only need to add it to your code

  • sola moon

    Great!thank you!

  • Decorné Sébastien

    ladu it’s for you !
    a great article for our webdesigner. very easy to read and understand
    thank you very much

    • https://www.behance.net/massimocassandro Massimo Cassandro

      thanks

  • http://www.nanobirdtech.com/ Nanobird Technologies

    Very Good article.. Thank You..!

  • Olitouf

    Awesome tutorial, I’ll update my fonts with your advice and grid system !

  • John Vincent

    Does this work IE? If not anyone know how to set up icons for IE?

  • Kamal Patel

    Thanks so much! Very helpful!

  • Corey Lewis

    This is really helpful! Thank you! One thing I am confused on is why the arrows do not expand to the max width/height of the container. Before expanding the stroked lines, I would assume you should scale up the arrows to the max width/height, while the stroke remains fixed. Is my assumption correct?

    • https://www.behance.net/massimocassandro Massimo Cassandro

      Hi Corey
      I am not sure I correctly understood your question: are you talking about an icon containing an arrow? Which container do you mean?

      • Corey Lewis

        Hi Massimo,
        If doing a 64×64 canvas for all icons, should all icons expand proportionally to fit the container? Or will there be rare occasions where icons should NOT expand proportionally to fit the container? For instance, in your case, the “up arrow”, “down arrow”, “left arrow”, and “right arrow” icons do not expand proportionally to fit the full width and height but rather they are sized to appear smaller than all other icons. I’m just trying to understand why one should consider making arrows smaller in a 64×64 canvas vs the trash can icon. Another example of a smaller icon would be the hamburger menu. This icon also appears to be sized a tad smaller than other icons. Hope this clarifies my question lol. Thanks!

        • https://www.behance.net/massimocassandro Massimo Cassandro

          Hi Corey
          It isn’t a technical reason, but a design choise…

          • Corey Lewis

            Great! Good to know Massimo and thanks for your feedback. And again, AMAZING tutorial. This was extremely helpful and I am happy to adopt these methods in making effective icon fonts ;)

  • Bill Watters

    I do not do coding so work in Adobe Muse for website building. I needed a chili-pepper icon for a menu listing and so I created it with illustrator cc, saved it as a SVG and imported it into ico-moon where it sits top left of the free pack. How do I now get it into my page in Adobe Muse, please?

    • https://www.behance.net/massimocassandro Massimo Cassandro

      Hi Bill
      I’m sorry but I don’t know Adobe Muse

      • Bill Watters

        Thank you

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.