Building your own version of Genericons

Genericons is an icon font created by Automattic. The default icons work great for most applications, but sometimes custom tailoring is required. Perhaps you need to add a new logo, or want to remove those you’re not using? In any case, Genericons Grunt makes it easy to bake your own flavor of Genericons. Let me show you how it works.

Step 1: Install ttfautohint and fontforge

Genericons Grunt uses FontForge as a font rendering engine. It also depends on ttfautohint for hinting. The first thing we need to do is install these dependencies.


brew install ttfautohint fontforge --with-python


sudo apt-get install ttfautohint fontforge


  1. Download and install ttfautohint.
  2. Download and install FontForge.
  3. Add C:\Program Files (x86)\FontForgeBuilds\bin to your PATH environment variable.

Step 2: Clone genericons-grunt

Next, let’s clone the Genericons Grunt repository and cd into it.

git clone
cd genericons-grunt    

Step 3: Choose your icons

Now we’ll choose the icons for our version of Genericons. This is as easy as adding, editing, or removing SVG source files from the svg/ directory.

Note: All icons should be aligned on a 16 by 16 pixel grid for the best results.

Step 4: Bake the font!

Finally, we get to build our icon font! It’s as easy as running two commands:

npm install
npm run build

If all goes well, the genericons directory will now contain your customized Genericons font.

Note for Windows users

You may encounter a build error when running npm install. If so, install Visual Studio 2015 and try again.


Now you know how to build your own version of Genericons. Please leave a comment below if you have any questions or suggestions!      

Leave a Reply

Your email address will not be published. Required fields are marked *