Generating Font Icons from Sketch
There are various ways in which icons can be used on the web, with SVGs and font icons being the most popular formats. This article will cover how to export the icons convert them to font icons with a single click.
Why font icons? Font icons are easy for developers to use. You can easily give the icons a font size, or any color you wish while coding. As a result, you have full control over their style. So how do we create font icons?
The Process
Create an icon library
Create icon symbols in Sketch, assuming you don’t already have an icon library. You can start with a 24x24 artboard for creating icons, as that is usually a good standard and can be scaled easily. If you want to read how to create a dynamic icon library on Sketch, head over to this article. I have also created a Sketch resource of 4 icons for this article in case you don’t have an icon library. You can download it here.
Convert strokes to outlines
In case you have used borders/strokes on any of your icons, be sure to convert them into outlines before proceeding. Font icons are one single shape, and do not work with borders.
You can select the parts of the icon that are strokes, and select Layer > Convert to Outlines. A shortcut to do this is simply pressing Shift+Cmd+O.
Combine the shapes down to a single shape
In order for an icon to be a font icon, they need to be one single combined shape. You can do so from the Sketch toolbar. Select two layers you wish to combine, and select the boolean operation you wish to perform. Repeat this till you are left with one single combined shape.
If you have trouble combining the shapes, I have a resource available of 4 icons that are all complex shapes, so you can interact with them and see how they are made. You can download the Sketch file here.
Export the icons to a folder as SVGs
Select all the icons you want to export, make them all exportable, and select SVGs from the dropdown under the export options. You can do this under Presets on the right sidebar. Export all of them into a single folder for easier discovery.
Upload all the icons to Icomoon
Now that we have all the icons in an SVG format, open up Icomoon (it’s free) and click on Import Icons. Select all the icons you want to convert to font icons, and upload them. You don’t even have to log in in order to do this, and your icon library remains online whenever you visit icomoon, as long as you visit from the same device.
Convert the icons to font icons
Once we have all the icons uploaded, select them all, and click on Generate Font on the bottom right of the page. You will now see a list of all the glyphs created, and you can simply download them from the bottom right of the page.
That’s it! Now we can simply give the ZIP file to developers, and they can use the contents to use the font icons on the website.
Thanks for reading! 🙌 If you want to learn how to create a dynamic icon library in depth, you can head over to this article.
