If you’re looking to add multiple colors or tones or swap the layer opacity of your icons, you’ve come to the right place. Who doesn’t love a winning flavor combination?
Our duotone style works just like all of our other icons but with two distinct shades of color. Duotone is a great effect when you’re looking to add more of your brand or an illustrative quality to the icons in your project.
Duotone icons use the same syntax Font Awesome icons, and you can reference them like any other icon using their specific style prefix (fa-duotone). They will inherit whatever color is around them, with the secondary layer being a transparent version of the primary color.
<div class="fa-3x">
<i class="fa-duotone fa-camera"></i> <!-- a duotone style camera icon -->
<i class="fa-duotone fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
<i class="fa-duotone fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
<i class="fa-duotone fa-fill-drip"></i> <!-- a duotone style fill-drip icon -->
</div>
You can swap the default opacity of each duotone icon's layers. This will make an icon's primary layer have the default opacity of 40% rather than its secondary layer.
<div class="fa-3x">
<i class="fa-duotone fa-camera"></i> <!-- a duotone style camera icon -->
<i class="fa-duotone fa-camera fa-swap-opacity"></i> <!-- a duotone style camera icon with swapped opacity -->
<i class="fa-duotone fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
<i class="fa-duotone fa-fire-alt fa-swap-opacity"></i> <!-- a duotone style fire-alt icon with swapped opacity -->
<i class="fa-duotone fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
<i class="fa-duotone fa-bus-alt fa-swap-opacity"></i> <!-- a duotone style bus-alt icon with swapped opacity -->
</div>
By default, the secondary layer in a duotone icon is set to 40% opacity (via an opacity 0.4; rule in Font Awesome's support CSS). You can explicitly set the opacity of a duotone icon's layer by using the CSS custom properties (opens new window) below. New to custom properties? Here are some recommendations on using them in a project.
| Properties | CSS Custom Property | Accepted Values |
|---|---|---|
| Set Primary Layer Opacity | --fa-primary-opacity | 0 1.0 |
| Set Secondary Layer Opacity | --fa-secondary-opacity | 0 1.0 |
<div class="fa-3x">
<i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.20"></i> <!-- secondary layer's opacity set to 20% -->
<i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.40"></i> <!-- secondary layer's opacity set to 40% -->
<i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.60"></i> <!-- secondary layer's opacity set to 60% -->
<i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.80"></i> <!-- secondary layer's opacity set to 80% -->
<i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 1.0"></i> <!-- secondary layer's opacity set to 100% -->
</div>
<div class="fa-3x">
<i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!-- primary layer's opacity set to 20% -->
<i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!-- primary layer's opacity set to 40% -->
<i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!-- primary layer's opacity set to 60% -->
<i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!-- primary layer's opacity set to 80% -->
<i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!-- primary layer's opacity set to 100% -->
</div>
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.
Using CSS custom properties (opens new window), we've also added some color hooks to a duotone icon's primary and secondary layers. New to custom properties? Here are some places to set them.
| Properties | CSS Custom Property | Accepted Values |
|---|---|---|
| Set Primary Layer Color | --fa-primary-color | Any valid CSS color value (opens new window) |
| Set Secondary Layer Color | --fa-secondary-color | Any valid CSS color value (opens new window) |
<div class="fa-3x">
<i class="fa-duotone fa-bus-alt" style="--fa-primary-color: gold;"></i> <!-- primary layer color defined -->
<i class="fa-duotone fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
<i class="fa-duotone fa-fill-drip" style="--fa-secondary-color: limegreen;"></i> <!-- secondary layer color defined -->
<i class="fa-duotone fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
<i class="fa-duotone fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
<i class="fa-duotone fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>
When you combine all of the coloring, opacity, and other options together, Font Awesome icons get even more awesome. Here are a few ideas on how duotone icons can take your project to the next level.
<div class="fa-3x">
<i class="fa-duotone fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;"></i>
<i class="fa-duotone fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;"></i>
</div>
<div class="fa-3x">
<i class="fa-duotone fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
<i class="fa-duotone fa-campfire" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;"></i>
<i class="fa-duotone fa-birthday-cake" style="--fa-secondary-opacity: 1.0; --fa-primary-color: pink; --fa-secondary-color: palevioletred;"></i>
<i class="fa-duotone fa-ear" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sandybrown; --fa-secondary-color: bisque;"></i>
<i class="fa-duotone fa-corn" style="--fa-secondary-opacity: 1.0; --fa-primary-color: mediumseagreen; --fa-secondary-color: gold;"></i>
<i class="fa-duotone fa-cookie-bite" style="--fa-secondary-opacity: 1.0; --fa-primary-color: saddlebrown; --fa-secondary-color: burlywood;"></i>
</div>
<style>
.theme-ravenclaw {
--fa-secondary-opacity: 1.0;
--fa-primary-color: rgb(4, 56, 161);
--fa-secondary-color: rgb(108, 108, 108);
}
</style>
<div class="fa-3x">
<i class="fa-duotone fa-hat-wizard theme-ravenclaw"></i>
<i class="fa-duotone fa-flask-potion theme-ravenclaw"></i>
<i class="fa-duotone fa-wand-magic theme-ravenclaw"></i>
<i class="fa-duotone fa-scarf theme-ravenclaw"></i>
<i class="fa-duotone fa-book-spells theme-ravenclaw"></i>
</div>
CSS custom properties (opens new window) are still a pretty new thing for most folks. We've documented some of the ways you can define them within your project.
Because duotone icons are made up of two layers with different color values, they can be more like illustrations than other Font Awesome styles and need extra care for accessibility.
Since they are more complex visually, duotone icons may be harder to read at smaller sizes. In addition to that, the colors and opacity you choose for each icon's layers can also affect their legibility. Some tips for improving legibility and accessibility:
| Class | Details |
|---|---|
fa-swap-opacity | Swap the default opacity of each layer in a duotone icon (making an icon's primary layer have the default opacity of 40% rather than its secondary layer) |
We've added CSS custom properties (opens new window) to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome's defaults.
| CSS Custom Property | Details | Accepted Values |
|---|---|---|
--fa-primary-color | Set primary layer color | Any valid CSS color value (opens new window) |
--fa-primary-opacity | Set primary layer opacity | 0 1.0 |
--fa-secondary-color | Set secondary layer color | Any valid CSS color value (opens new window) |
--fa-secondary-opacity | Set secondary layer opacity | 0 1.0 |
Yes, the duotone icon style can be used alongside CSS pseudo-elements. Doing so is even more complicated than the base difficulty of rendering icons with CSS pseudo-elements. It's recommended only for those who can't control the final markup of their site/project as well as ninjas who want complete control over their markup.
Let's double-check a few things.
fa-duotone style prefix?<head>.Make sure you're using the correct custom property values. Also, make sure you haven't defined a custom property that may be overriding things (check inline and in your custom CSS). We don't recommend writing custom CSS to target a specific class or pseudo-element — there are some differences between our Web Fonts and SVG versions of Font Awesome that can make this tricky.
If you're using the SVG + JS version of Font Awesome, our power transforms and layering let you do some pretty amazing stuff. And you can use things like sizing, fixed-width icons, and animations with duotone icons, too.
Duotone icons render great in all modern web browsers. Since Internet Explorer versions 10 and 11 do not support CSS Custom properties, duotone icons will still render in that browser but you won't be able to define colors or opacity for individual layers. If you must support that outdated browser, we recommend defining the color on the icon or its parent element instead.