Our duotone style works just like all of our other icons, but with two distinct shades of color. They're great for adding more of your brand or an illustrative quality to the icons in your project.

Before we start, make sure you're already...

• Set up with Font Awesome
• Familiar with the basics of adding Font Awesome icons
• Using Font Awesome Version 5.10.0 or greater
• An active Pro-level plan subscriber or have a Pro license with access to Version 5.10.0 or greater

This page will walk you through a variety of examples and exercises to get you limbered up for mastering duotone icons, and at the bottom we have the duotone classes and custom-properties for quick reference and a dedicated duotone troubleshooting tips to throw you a life line if you're stuck.

Basic Use

Duotone icons use the same syntax Font Awesome icons and can be referenced 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>

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="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>

Your Turn!

Swap until you drop with these Codepen opacity-swapping examples.

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 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>

Your Turn!

Let's make sure this concept is super “transparent”. Try tinkering with these different opacity examples.

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, 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
Set Secondary Layer Color	--fa-secondary-color	Any valid CSS color value

  <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>

Your Turn!

Here's a Codepen that has some coloring examples for you to go cray-cray(ola) with.

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="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>

Create Full-Color Icons that Look Like Illustrations

  <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>

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="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>

Your Turn!

Ready for "Advanced Defense Against the Dark Arts" and Duotone Icon Use? Here are some advanced examples you can start from to cast some real duotone magic. Want to ace those upcoming O.W.L.s on theming? Check out even more examples.

Using in a Project

CSS custom properties are still a pretty new thing for most folks. We've documented some of the ways you can define them within your project.

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 when it comes to 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 together to make sure they have enough color contrast.
• Test layer colors together to make sure they handle color-blindness scenarios well.

Duotone Classes

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)

Customization

We've added CSS custom properties 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
--fa-primary-opacity	Set primary layer opacity	0 1.0
--fa-secondary-color	Set secondary layer color	Any valid CSS color value
--fa-secondary-opacity	Set secondary layer opacity	0 1.0

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.

Harrumph! 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 fa-duotone style 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 tough.

Can I use other Font Awesome styling alongside duotone icons

Yep! Things like sizing, fixed-width icons, and animations can all be used with 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.

What browsers will duotone icons work in?

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.