Introducing Duotone

30 July 2019
Jory Raphael

Duo-tone or duo-not. There is no try.

Say hello to Duotone, a beautiful new icon style now available as part of Font Awesome Pro.

Jump to section titled: Say hello to Duotone, a beautiful new icon style now available as part of Font Awesome Pro.

We’re super excited to officially launch Duotone, the newest icon style to join the Font Awesome family. Initially a stretch goal from our 2017 Kickstarter campaign for Font Awesome Pro, Duotone was originally planned as a subset of our 200 most popular icons. That number was ultimately expanded to 600, but the goal remained the same: to supplement our existing icons with a small group that worked–by default–in two colors.

But when we actually sat down to plan out the icons, an idea latched itself to our face and forced its way into our chest. What would happen if, instead of creating a subset of icons in a new style, we included icon-for-icon matches for each and every one of our existing symbols?

Well, it turns out the answer to that question is: something pretty cool. And that something pretty cool–after gestating for the appropriate amount of time–has finally ripped its way into the world.

1 new icon style. Over 1,600 icons. Infinite color possibilities.

Jump to section titled: 1 new icon style. Over 1,600 icons. Infinite color possibilities.

Our duotone icons are now available to all Pro subscribers.

If you know how to use Font Awesome, you already know how to use our duotone icons.

Jump to section titled: If you know how to use Font Awesome, you already know how to use our duotone icons.

Arguably the best thing about our duotone icons is that you can use them exactly the same way you would use any of our existing icon styles. Whether implementing webfonts, our svgs, or our kits, the icons just work.

Let’s say you’re building a website and are currently using the solid style of Font Awesome Pro. Simply switch your code to reference the duotone icons instead and be done. It’s that easy. The new icons inherit your existing base color automatically.

As a refresher, here are the style prefixes for Font Awesome Pro:

Solid is fas
Regular is far
Light is fal
And the new Duotone style is… you guessed it… fad

The code snippet: will pull up our bell icon in the solid style. Change fas to fad and you’re set.

The new duotone prefix joins our existing Font Awesome Pro style prefixes.

Using icons on a light background? No problem. Need the icons to work in reverse, on a dark background? You’re covered. This works out-of-the-box because our duotone icons have two layers, primary and secondary. By default the secondary layer is set to 40% opacity. This allows it to retain the same color as the primary layer, but also visually mix it with the underlying background color.

This is the same icon, only the color and background have changed.

Duotone works with your already established colors.

Double the Layers, Double the Fun

Jump to section titled: Double the Layers, Double the Fun

Here’s where things get really cool. If you’d like to get fancy with our duotone icons–and let’s be honest, we all like to get fancy–you can use our built-in features to easily change their color, or target individual layers.

Each duotone icon consists of two layers: primary and secondary

Bring your UI to life with duotone icons

Coloring Duotone Icons

Jump to section titled: Coloring Duotone Icons

Like all other Font Awesome icons, duotone icons automatically inherit CSS size and color. A duotone icon consists of a primary and secondary layer. By default the secondary layer is given an opacity of 40% so that it appears as a lighter shade of the icon’s inherited or directly set color. Learn more

Change an icon’s color, and the duotone styling remains intact

Easily add color to your interface designs with our duotone icons

Swapping Layer Opacity

Jump to section titled: Swapping Layer Opacity

There may be some occasions when you want to flip the opacity of a duotone icon’s layers, so that the primary layer has a 40% opacity instead of the secondary layer. To do so, just add a fa-swap-opacity class to your code. Learn more

In the example below, the icon on the left uses the standard implementation of 
The icon on the right has the opacity swapped:

If default primary and secondary layers don’t work for you, you can swap them!

Roll a natural 20 with our duotone icons

Changing Opacity

Jump to section titled: Changing Opacity

As mentioned above, the default opacity for the secondary layer in our duotone icons is set to 40%. If that’s too light or dark for you, it’s easy to customize that percentage by using our CSS custom properties. Learn more

In the example below, we dropped the opacity of the secondary layer from 40% to 15%.

<i class="fad fa-laugh" style="--fa-secondary-opacity: 0.15"></i>

Need more subtle colors? Easily change opacity.

Adding Unique Colors

Jump to section titled: Adding Unique Colors

Perhaps the most powerful tool at your disposal is the ability to target each layer in a duotone icon and apply a distinct color and opacity to both.

This takes our duotone icons a step above all other icon styles available from Font Awesome. Easily match your company’s brand colors, or bridge the gap between icon and illustration with Duotone. Learn more

Duotone icons are a great way to pull your brand personality into your designs. Right on!

In the example below, we’ve applied a distinct color to each layer, and bumped the opacity of the secondary layer to 100%.

<i
  class="fad fa-french-fries"
  style="
    --fa-primary-color: red;
    --fa-secondary-color: gold;
    --fa-secondary-opacity: 1;
  "
></i>