How to create a duotone icons font
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
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.
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.
Notice how there are 5 paths in Image 3 but only 2 in Image 4.
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
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!
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.
To fix this, open the style.css file from same directory
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.
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
…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.