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.
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.
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
- Regular is
- Light is
- And the new Duotone style is… you guessed it…
The code snippet:
<i class="fas fa-bell-plus"></i> will pull up our bell icon in the solid style. Change
fad and you’re set.
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.
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.
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
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
<i class="fad fa-apple-crate"></i>
- The icon on the right has the opacity swapped:
<i class="fad fa-apple-crate fa-swap-opacity"></i>
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>
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
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.0"></i>
That’s enough blathering about our new icons. Take them for a spin today by subscribing to Font Awesome Pro!