Create Your Own Font Icon Set Easily With Fontello

Font Icons have become a staple in web design, and it’s clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be customized in size, color, and position with CSS. This adaptability also extends to animations, making them easy to work with using CSS3 Transforms and Transitions.

While there are many font icon sets readily available for use, there might be occasions when these pre-existing sets don’t meet your specific requirements. In such instances, the solution could be to craft your own custom icon set.

Fortunately, with the array of tools available today, creating a personalized Font Icon set has become more accessible than ever before. This guide will walk you through the process step-by-step. Let’s dive in.

Preparing the Icons

First and foremost, we need to get our icons ready, and they must be in vector format. If you’re adept with vector software such as Adobe Illustrator, Inkscape, or CorelDraw, you can craft your icons ensuring they share common characteristics, and then export them in SVG format.

If creating your own isn’t an option, fret not. There’s a wealth of SVG icons freely available online for you to use.

For our demonstration, we’ll utilize SVG icons from Ionicons. Although Ionicons offers its own Font Icon collection, we’re going to extract just a few to illustrate how you can assemble your own icon set.

Here are the icons selected for this example:

Since some icons are made up of multiple shapes, we need to unify them into a single compound shape before turning them into font icons. This can be done by opening the .svg file in Illustrator, selecting all the shapes, and navigating through: Object > Compound Path > Make.

Repeat this process for each of the icons.

Creating the Font

Fontello simplifies the process of creating Font Icons. It not only allows you to select icons from well-known Font Icon sets but also enables the upload of external icons. Simply drag and drop your chosen icons onto Fontello’s interface. Upon uploading, your icons will be displayed in the Custom Icons section, as shown below.

To adjust your icons further, click on the pencil icon. This lets you modify the icon properties, specifically the CSS Name and the Hex Code.

After selecting your custom icons and naming your font, hit the Download button to get your icons.

Fontello then generates all the necessary font formats: .svg, .eot, .ttf, and .woff, along with the stylesheets and a demo for you.

And just like that, creating font icons is as easy as pie. Hopefully, you’ll find this guide handy.