Ryan Quinn

Developer, product creator and hammock lounger.

← HOME | August 22, 2014

Creating Your Own Icon Font

Took me AGES to find solid resources on how to generate your own icon fonts, so I thought I'd pull together the process that ended up working for me for anyone else who's interested. If you'd like to replicate my complete setup, you can checkout the github repo which also includes my fontcustom config.

1. Creating your Icons

Creating the actual icons is the most straight forward part of this process. Here's a breakdown of some rules to follow to make sure things look good:

  1. Make all files square, sized 34x34
    • It's easiest if you just make each icon its own artboard
  2. Store all the SVGs together in the same folder
    • Name them appropriately
    • You'll reference them by the filename in css, for example stretchr.svg has a css class of icon-stretchr
  3. Use only one color, black
  4. Convert all lines to fills before you save to SVG

2. Installing FontCustom

There are a few ways to convert your SVG files into a font, but most of them are arduous. FontCustom was the best option I found to make it easier. The installation steps in the docs didn't work for me, here's what did:

brew install python;
brew install gettext libpng jpeg libtiff giflib cairo pango libspiro czmq fontconfig automake libtool pkg-config glib pango;
brew -v install fontforge --with-python --with-cairo --with-czmq --with-gif --with-x --with-libspiro --with-pango --enable-pyextension --debug
brew install ttfautohint
gem install fontcustom

3. Running FontCustom

You can check out the way I setup my project on GitHub to get more information, I chose to use a fontcustom config file to store my preferences for later. If you setup your project different to mine, you'll need to checkout the fontcustom docs and revise this step to match your environment. I'd suggest just cloning my repo and replacing my SVG files with yours.

fontcustom compile

4. Using your Icon Font

FontCustom will generate some font files and a stylesheet for you. Just drop the fonts into /fonts and the stylesheet into /css, include the stylesheet in your html page, and you're ready to go. The syntax for using icons is:

<i class="fontcustom icon-icon-name"></i>