Our duotone style works just like all of our other icons. On top of that, they provide a version of every icon in Font Awesome that has two distinct shades of color. They're great for adding more of your brand or an illustrative quality to the icons in your project.
Basic Use
Duotone icons use the same syntax Font Awesome icons and can be referenced like any other icon using their specific style prefix (fad).
<div class="fa-3x">
<i class="fad fa-camera"></i> <!-- a duotone style camera icon -->
<i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
<i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
<i class="fad fa-fill-drip"></i> <!-- a duotone style fill-drip icon -->
</div>
Swapping Layer Opacity
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="fad fa-camera"></i> <!-- a duotone style camera icon -->
<i class="fad fa-camera fa-swap-opacity"></i> <!-- a duotone style camera icon with swapped opacity -->
<i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
<i class="fad fa-fire-alt fa-swap-opacity"></i> <!-- a duotone style fire-alt icon with swapped opacity -->
<i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
<i class="fad fa-bus-alt fa-swap-opacity"></i> <!-- a duotone style bus-alt icon with swapped opacity -->
</div>
Changing Opacity
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="fad fa-bus-alt" style="--fa-secondary-opacity: 0.20"></i> <!-- secondary layer's opacity set to 20% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.40"></i> <!-- secondary layer's opacity set to 40% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.60"></i> <!-- secondary layer's opacity set to 60% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.80"></i> <!-- secondary layer's opacity set to 80% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 1.0"></i> <!-- secondary layer's opacity set to 100% -->
</div>
<div class="fa-3x">
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!-- primary layer's opacity set to 20% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!-- primary layer's opacity set to 40% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!-- primary layer's opacity set to 60% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!-- primary layer's opacity set to 80% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!-- primary layer's opacity set to 100% -->
</div>
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.
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="fad fa-bus-alt" style="--fa-primary-color: gold;"></i> <!-- primary layer color defined -->
<i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i> <!-- secondary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
<i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
<i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>
Advanced Use
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.
Use Color to Highlight a Part of an Icon or to Note Status
<div class="fa-3x">
<i class="fad fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;"></i>
</div>
Create Full-Color Icons that Look Like Illustrations
<div class="fa-3x">
<i class="fad fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
<i class="fad fa-campfire" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;"></i>
<i class="fad fa-birthday-cake" style="--fa-secondary-opacity: 1.0; --fa-primary-color: pink; --fa-secondary-color: palevioletred;"></i>
<i class="fad fa-ear" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sandybrown; --fa-secondary-color: bisque;"></i>
<i class="fad fa-corn" style="--fa-secondary-opacity: 1.0; --fa-primary-color: mediumseagreen; --fa-secondary-color: gold;"></i>
<i class="fad fa-cookie-bite" style="--fa-secondary-opacity: 1.0; --fa-primary-color: saddlebrown; --fa-secondary-color: burlywood;"></i>
</div>
Theme Icons with Brand Colors
<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="fad fa-hat-wizard theme-ravenclaw"></i>
<i class="fad fa-flask-potion theme-ravenclaw"></i>
<i class="fad fa-wand-magic theme-ravenclaw"></i>
<i class="fad fa-scarf theme-ravenclaw"></i>
<i class="fad fa-book-spells theme-ravenclaw"></i>
</div>
Using in a Project
CSS custom properties (opens new window) are still a pretty new thing for most folks.
Setting Properties with CSS :root
You can define duotone icons' custom properties at CSS :root pseudo-class (opens new window) level. This will make any duotone icons you include inherit the properties by default.
<!-- by default, everything will be in the holiday spirit -->
<style>
:root {
--fa-primary-color: green;
--fa-secondary-color: red;
}
</style>
<i class="fad fa-holly-berry"></i>
<i class="fad fa-wreath"></i>
<i class="fad fa-candy-cane"></i>
Setting Properties with Project-Based CSS Rules
You can also set custom properties inside of your project's CSS, in the <head> of a page or in a separate stylesheet. These properties will be scoped to just elements that match the selector of the rule you've included them in. This technique is great for theming in general and when you may not have easy access to the raw HTML of your project.
<!-- setting a rule for house styling -->
<style>
.theme-slytherin {
--fa-primary-color: darkgreen;
--fa-secondary-color: silver;
}
</style>
<i class="fad fa-wand-magic theme-slytherin"></i>
<i class="fad fa-scarf theme-slytherin"></i>
<i class="fad fa-book-spells theme-slytherin"></i>
Setting Properties with Inline Styles
Many of the examples in these docs define CSS custom properties using inline styling by adding a style attribute to an element. This is best for one-offs or very custom colored/styled duotone icons that you won't need to change at a system level.
<!-- using inline styles to define duotone icon custom properties -->
<i class="fad fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
Accessibility Best Practices
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:
- Render duotone style icons at larger sizes (2x your base type size is a good starting point).
- Test layer colors (opens new window) together to make sure they have enough color contrast (opens new window).
- Test layer colors together to make sure they handle color-blindness (opens new window) scenarios well.
Duotone Cheatsheet
| Properties | Syntax | Values | Notes |
|---|---|---|---|
| Set Primary Layer Opacity | --fa-primary-opacity | 0 1.0 | Use as a CSS custom property (opens new window) |
| Set Secondary Layer Opacity | --fa-secondary-opacity | 0 1.0 | Use as a CSS custom property (opens new window) |
| Set Primary Layer Color | --fa-primary-color | Any valid CSS color value (opens new window) | Use as a CSS custom property (opens new window) |
| Set Secondary Layer Color | --fa-secondary-color | Any valid CSS color value (opens new window) | Use as a CSS custom property (opens new window) |
| Swap Layers' Opacity | fa-swap-opacity | N/A | Add alongside other Font Awesome-specific classes to <i> |
Troubleshooting
Can I use Duotone Icons by using CSS pseudo-elements?
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.
Doh! The icon I want to use isn't showing up in duotone style!
Let's double-check a few things.
- Are you using the duotone-specific
fadstyle prefix? - Duotone icons are only available with Font Awesome Pro — make sure you have an active Pro-level plan or a Pro license with access to Version 5.10.0 or greater.
- We release icons pretty frequently these days. Make sure you’re using the latest and greatest version, so any new icons you want to use are at your fingertips.
- If you’ve decided to host your own copy of Font Awesome, check that you’ve moved all of the files you need to use the icon you want. Also, double-check the paths to those files in your HTML’s
<head>.
Help! I can't target individual layers!
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.
Can I use other Font Awesome styling alongside duotone icons
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.
Do duotone icons work with all browsers?
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.