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
brew install ttfautohint fontforge --with-python
sudo apt-get install ttfautohint fontforge
- Download and install ttfautohint.
- Download and install FontForge.
C:\Program Files (x86)\FontForgeBuilds\binto your
Step 2: Clone genericons-grunt
Next, let’s clone the Genericons Grunt repository and
cd into it.
git clone https://github.com/bporcelli/genericons-grunt.git 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
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!