Webfont app - simple webfont and icon library manager for mac os
Create your custom icon font

Create Your Own Icon Font in Three Simple Steps

Over the past few years, icon fonts have grown in popularity and have been widely used on many websites as an alternative to more traditional approach of bitmap images (e.g. png, jpg).

There are many advantages of using icon fonts over bitmaps, but the most important difference is in the file size (vector icons are much smaller than bitmap images), scalability (icons can be scaled to any dimensions without loosing image quality) and they can be easily customized (for example. you can easily change the color of a vector icon) or even animated! Adding vector icons to your website is easier than ever and one of the best ways to use them is through a custom webfont. Let’s take a closer look what icon fonts are and how to create your own webfont in no time.

What Is an Icon Font?

But first things first – what is an icon font and what are some of the advantages of using it on your website? Icon fonts are very much just regular fonts (as any other webfonts used on the web – e.g. Roboto, or Open Sans), but instead of letters and numbers, they contain symbols and icons. As soon as you include your font on your website, each icon can be then very easily used in HTML or referenced in CSS.

Here are some advantages to organizing your vector icons into an icon font:

  • Fast loading time: all your icons are available and cached after just one http request (loading the font file)
  • You can easily change the size and color of your icons with CSS selectors
  • Organizing your icons into one custom font keeps your codebase nice and tidy. There are no SVG files all over the codebase, just a font file containing all your interface icons.

Using Webfont app for Mac

How to create your own icon font

1) Import your existing icons

Export your existing icons into SVG files and open Webfont app. Create a new project in the app and drag & drop exported SVG files.

2) Customize the font and icons

Filenames of your original SVG files are going to be used as your custom icon CSS classnames when you export your font. If you wish to make and changes, customize each icon in the Settings section.

3) Export and use it on your website

Navigate to the Export section and generate your icon font. Downloaded file will include your font available in the most common webfont formats as well as simple usage instructions for your website or blog.

Enjoy!