Cadabra | Tutorial: How to Make an Icon Font in Sketch3
Start my project

Tutorial: How to Make an Icon Font in Sketch3

Today’s article I want to begin with the definition of the topic. What is the icon font? It’s a font, which consists of symbols and special elements instead of letters and numbers. Why is it so needed? Because customers usually ask for sending not only “svg” icons, but also ask to make icon font. What are the predominant features of this font? The main benefit is making developers’ work so much easier. They can use one font, upon that easily change the icons in necessary colours. In other words, in one font you have one icon and you can make different variances. That is to say it speeds up the development process. It’s very important to mention, that such fonts are cross platform, that is they are available even in old versions of Internet Explorer.

In today’s tutorial I want to show how to make icons in Sketch3 and then make an icon font. As an example, I have chosen a club card and gear.

Begin your work with creation of an artboard. I make it in a conventional size 32×32 pixels. Before starting, make a grid. I click on the “View” and choose “Grid Settings”. Also, to do it more faster, you can carry out this tools on the “Customize Toolbar”. You can fix the grid not just for web version, but divided on blocks size and mini size.

So take a look on a making process. Let’s begin. Why have I chosen such card? The answer is easy. The figure consists of small elements, connected in one icon. It helps to show some useful details. The figure is supposed to be outlined, without fill. The first thing I do is a circle via tool “Oval” and put it in the middle of the artboard. There is a specific snap to grid. But in case it’s not straight, you can use align panel.

Then, I copy this oval element with the combination of keys Alt+Shift. So we get two more circles, which I put lower and align it as well.

After that, you need to combine all the elements in one figure. I select them on the layer panel or directly on the artboard with the help of Shift. On the top toolbar you can see a tool “Union”. You can click on it and here we go.

The particularity of combination figures in Sketch is that you can go inside this figure and change the elements severally. For example, change the size, move it or refresh.

Let’s get to figure’s “leg”. I draw a square and place it in the middle. For convenient work I set a dark tint, to differ this element from the main figure.

After that I open tool “Edit”(also you can go the mode by double-click on this object) . I click on the angle points of this element. Now I can edit them in the way I need. In this case I move two high points up and make them closer to each other.

After that, I select two lower points. I choose tool “Edit” again and on the appeared right panel I choose “Corners” to round the points on 2 pixels.

After that I look at the icon and realize, that there is a lack of something so I decide to add a curve. I select upper points again and apply the property “Disconnected”. That means I can move anchors points for them independently from each other. To make it more attractive, I move the lower points and set the curvature. In this situation really helps early created grid to make two sides equal (the right side and the left side). Also we can draw only the half of the “leg”, reflect it and unite.

Later I unite all the elements in one figure. I can do it like I did before. Now, you need to customize a border. I take away fill and add a stroke. I go to the section “Borders” and click on “Settings”. When you do this actions, you can set up a small rounding on the curve of lines.

During the process I see, that it doesn’t look the way I want it to look. So I change a “leg” a little bit. I decide to make it more slender. As I have a combined figure, I can go inside this shape and choose the layer “Rectangle” and make it more slender with the help of Alt (it helps to transform element symmetrically). Now you can do with this layer whatever you want. When you move the width, it changes symmetrically.

When it seems like it’s ready, I understand that I don’t like too rounded lower points. So I change the rounding to 1 pixel.

Now it looks more realistic. To make it more look like a club card, I move the “leg” a little bit up.

As you see, the icon is ready. Let’s move on to the part, when we make an icon font. To download an icon and make an icon font, we need the icon in “svg” format. I select name of artboard, go to panel “export”, choose “svg” format and click “export”. Then I choose where I want to save my icon.

To make an icon font I use site IcoMoon. You just need to download “svg” icons. When you enter the site, click “import icons’.

BUT, when I try to download an icon in such form, it shows “dismiss’.

Why? What do we need to avoid such issue? The problem is that combined shape gives the opportunity to edit the inner content, this file saves all the small actions, which were used during the creation. To download the icon on IcoMoon you need a simple action. Click Layer — Pass — Flatten. In such way you take away the combined way and receive one figure. That means you can’t edit this icon separately, element by element.

Then I go back to Sketch and choose Layer — Convert to Outlines. You need it for better work, because program works with shape. Or you can double the file, which will be better. In such case you will have an initial version and the outline version in which you can’t change the inner elements. Or you can double an artboard or file.

From now you can download an icon into the IcoMoon. Directly in the program you can change the name, write information, the name of designer, etc.

In the same way I do the icon “Setting”. It’s a simple gear. I draw inner and external circles. Then I draw a small one, which is a notch. After that I group two central parts (to make them well-turned). In the panel “Transform” I designate rotate on 30 degrees and point it to the centre. It looks correctly. I copy parts again and displace on 30 degrees as well. Gear is ready.

I download my set from two icons on IcoMoon. When my set is ready, I select these icons and move to another step — generate font.

For each icon I can change the colour, add tags and name.

When I generate the font, I have a setup. Life hacking: if I click on “Preferences” or on the button near the “Download”, I see more expanded setup. Considering this setup I advice to ask your developer. He will suggest which items should be noticed for his convenience, e.g. prefix or postfix. After that you download and in result you get a zip folder with the whole set. Now you have a ready icon set, so you can send it to your developer.

Originally written for Cadabra Studio.

Authors: Olga Barkova, Alyona Bogdashevskaya.

Thanks for reading us! For more interesting topics follow Cadabra Studio.

You can find us here

Instagram, Behance, Dribbble, Facebook and Twitter.

We have something special for you. 

Type the your request
Thank you
Your request has been submitted.
We’ll get in touch with you very soon!