How to create a duotone icons font

Duotone icons from roundicons.com

Icons serve a key purpose in developing rich user experiences. Although there are many ways to provide icons in a web or mobile application, there are some obvious benefits of using an icon font which makes it a go-to choice.

  • Icons are scalable without loss in definition;
  • There’s no need to worry about Retina displays;
  • It’s easy to apply CSS properties without editing the icon itself (color, gradient, shadows, etc.);
  • You can use the same icon in different sizes and colors to save time and space;
  • Better page speed performance (i.e. fewer http requests);
  • Icon fonts load faster than background or inline SVG’s (see this experiment).

If you wish to learn more about this, or about creating icon fonts in general, Gašper Vidovič has created an awesome blog post at mediatemple. I’ll assume you have read that article and know the process of creating an icon font using icomoon app, the focus of this article will only be towards creating duo tone icon font.

Without further ado, let’s fire up the preferred vector editing tool (I’m using sketch) and create a basic icon

1. A simple bell icon

Now we need to split this icon into two colours. But before we do that, it is necessary to understand how duotone icons behave in real world. Let’s take example of Font Awesome 5 duotone icons

As visible from above image, the icons have two parts, one opaque and other semi transparent. Due to this, the icons adapt to any background. If you refer to their documentation, it is explicitly mentioned that the second part has an opacity of 40%. So let’s implement the same change in our icon.

3. Bell icon with applied transparency

The result looks like this with bell top and buzz selected and opacity set to 40%. Before we export this, make sure to merge all the paths with same opacity so you only export two paths in your SVG.

4. Exporting SVG with merged paths

Notice how there are 5 paths in Image 3 but only 2 in Image 4.

5. Generated bell SVG file

You can also verify the same by checking the generated SVG file (Note: I am using Sketch with SVGO compressor plugin, your actual SVG file structure may vary).

Now we’ll import our icon in icomoon app, select it and click on Generate Font

6. Creating icon font in Icomoon App — Part 1
6. Creating icon font in Icomoon App — Part 2

You’ll see a warning in page 2 about multicolor glyphs. This is perfectly normal since what icomoon is doing is creating two icons for bell, one for each path, layering them together and providing a common CSS class to render the icon. Download the font, unzip it and open demo.html file from the directory. You should be able to see the generated icon font used live in your application… How cool is that!

7. Generated Icon font used live in app

Now let’s try applying some theme to the icon. As seen in image below, we have created a duotone icon which is resistant to theming.

8. Icon font with failed theming

To fix this, open the style.css file from same directory

9. Generated icon font’s style.css file with failed theming

Here, you can see color: rgb(216, 216, 216) applied to paths inside icon. These will override any theming applied to icon itself due to CSS specificity hierarchy.

10. Generated icon font’s style.css file with fixed theming

Change that to apply color in line 22 and remove color property from both icon paths. Let’s save this and retry the theming from demo.html

11. Icon font with working theming

…and there you have it. A very basic implementation of duotone themeable icon font. You can take this to the next level by implementing custom CSS properties like Font Awesome has done to allow color theming individual icons by inline styles.

Just seeking knowledge and sharing it with others