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.

A Guide to Better and Sharper UI Icons with Web Fonts

A Guide to Better and Sharper UI Icons with Web Fonts

Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might... Read more

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.

33 Best Websites to Download Free Vectors

33 Best Websites to Download Free Vectors

Vector graphics are flexible and scalable, making it perfect for both web and print. Here's websites to download... Read more

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:

Selected SVG icons for the font set

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.

Combining shapes into a compound path in Illustrator

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.

Custom Icons section on Fontello

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.

Editing icon properties in Fontello

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

Download button for custom font icons in Fontello

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

Generated font formats by Fontello

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