Duotone custom icon set

Project context

Rogervoice can be used as two native mobile applications (iOS and Android). As it is an app for deaf people, a lot of the icons we need are hard to find, even in packs from great designers.
Over the years, the icons used in the apps became inconsistent and a bit dull. As everything else is in-house built, it felt like we needed a proper icon set.

The idea

Duotone
What's a duotone icon ?
Well, basically it's an icon using two colors (or at least two values of the same color).

Our great workaround : multiply mode
An icon may have to appear in different colors, depending on the context, and you don't necessarily want to export a colored icon for each context.
For a monotone icon, it's pretty easy to handle. iOS and Android have methods that tint the icon into the desired color. It takes everything non transparent, and puts it into the desired color.

Now let's try the same thing with our duotone icons :

Of course, this doesn't work, so we found a different solution : create the icons in white and grey, so that they can be tinted differently.

Those icons can now be tinted with Multiply mode. This turns the white into the desired color, and the grey into a slightly darker color.
With this technique, we were able to create a complete set suitable for all the scenarios, without duplicating and manually tinting the icons.

Using both methods ?
Having the icons in both Duotone and Monotone allows more flexibility. An example : monotone icons for disabled state, and colored duotone icons for active state.
See how the tab bar takes advantage of this :

Crafting with care
I crafted those icons with care. They all share the same radius, weight lines, and overall feeling. I keep adding more icons to the sets as we discover new needs.

The result : Two complete icon sets

Key takeaways

Go for duotone icons ! They're beautiful and stand out more than regular icons.
It's possible to create icons with more tones or even with gradients, using the multiply method.

Selected Works