Create Your Own Font Icon Set Easily With Fontello

By Thoriq Firdaus. in Web Design. Updated on April 24, 2018.

We can see that Font Icons are widely used across websites, and for good reason. The Font Icon is reliable, looks crisp and sharp in high DPI screen, and is easily adjustable in terms of icon size, color and icon position through CSS. This makes font icons easy to animate with CSS3 Transforms and Transitions as well.

There are a great number of font icon sets available for use right away, but they may not always cater to all your needs. You may want to be able to customize your icons, in which case, perhaps it’s better that you create your own icon set.

With all the tools we now have, creating your own Font Icon set is not as hard as it used to be. In this post will show you how to do this easily. Let’s check it out.

Recommended Reading: Better And Sharper UI Icons With Web Fonts

Preparing The Icons

First of all, we need to prepare the icons. The icons must be in vector form. If you are familiar with vector applications like Adobe Illustrator, Inkscape, and CorelDraw, you can create your own icons. Make sure the icons preserve uniform traits, and then export them in SVG format.

Alternatively, you can also collect SVG icons that are available online for free.

In this example, we’ll be using the SVG icons from Ionicons. Ionicons actually has its own Font Icon but in this example we will only extract a few to explain how to create your own icon set.

Here’s what I picked out:

Some of these icons consist of multiple shapes. So before we can put them up as a font icon, we have to merge the shapes into one compound. To do so, open the .svg in Illustrator. Select all the shapes and go to: Object > Compound Path > Make.

Do this to the other icons as well.

Creating Font

Fontello makes creating Font Icon easy. Aside from picking up icons from popular Font Icon sets, Fontello also allow us to upload external icons. Simply drag and drop all of your selected icons onto Fontello. Once they are uploaded, it will appear in the Custom Icons section, like so.

You can click on the pencil icon to edit the icon properties namely the CSS Name and the Hex Code.

Select your custom icons, set the name of your font and click the Download button.

Fontello will generate all necessary font formats: .svg, .eot, .ttf, and .woff. and the stylesheets plus the demo.

That’s it. Creating font icons has never been easier than this. I hope you find this tip useful.