# Duotone Icons
Guide to using and styling Duotone Font Awesome icons in your projects.
> 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 icons (in both the Duotone and Sharp Duotone styles) [work just like all of our other icons](/web/add-icons/how-to.md) 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.
Make sure you're:
- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).
- An [active Pro-level plan subscriber](https://fontawesome.com/plans) or have a Pro license with access to v7.
Double the Fun with Less Hassle
All the styles in the Duotone and Sharp Duotone families work with the Duotone styling properties described on this
page. So once you get the hang of styling Duotone icons, take all the Duotone styles for a spin!
## Basic Use
Duotone and Sharp Duotone icons use the same syntax Font Awesome icons, and you can reference them like any other icon. They will inherit whatever color is around them, with the secondary layer being a transparent version of the primary color.
```html
```
## 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.
```html
```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) below. New to custom properties? Here are some [recommendations on using them in a project](/web/style/custom.md#using-custom-properties-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` |
```html
```
```html
```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), 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](#using-in-a-project).
| Properties | CSS Custom Property | Accepted Values |
| :------------------------ | :--------------------- | :------------------------------------------------------------------------------------------ |
| Set Primary Layer Color | `--fa-primary-color` | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) |
| Set Secondary Layer Color | `--fa-secondary-color` | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) |
```html
```
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
```html
```
### Create Full-Color Icons that Look Like Illustrations
```html
```
### Theme Icons with Brand Colors
```html
```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) are still a pretty new thing for most folks. We've documented [some of the ways you can define them](/web/style/custom.md#using-custom-properties-in-a-project) 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 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](https://contrast-ratio.com) together to make sure they have enough [color contrast](https://webaim.org/articles/contrast).
- Test layer colors together to make sure they handle [color-blindness](https://webaim.org/articles/visual/colorblind) scenarios well.
## Custom Icon Uploads Are Like Onions
They now have layers! You can add your very own Duotone creations to a Kit if you have a [Pro-level plan](https://fontawesome.com/plans). Get up to speed on [how best to make some](/web/add-icons/upload-icons/prep-icons.md), and [how to use them](/web/add-icons/upload-icons.md#using-uploaded-icons-in-a-project) once they're in your Kit.
## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to make customizing easier and more efficient. Define your own values for the following properties to [override and customize](/web/style/custom.md#using-custom-properties-in-a-project) Font Awesome's defaults.
| CSS Custom Property | Details | Accepted Values |
| :----------------------- | :-------------------------- | :------------------------------------------------------------------------------------------ |
| `--fa-primary-color` | Set primary layer color | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/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](https://developer.mozilla.org/en-US/docs/Web/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, Duotone icons can be added to your web projects as [CSS pseudo-elements](/web/add-icons/pseudo-elements.md). Doing so is [even more complicated](/web/add-icons/pseudo-elements.md#using-css-pseudo-elements-with-duotone-icons) than the base difficulty of rendering icons with CSS pseudo-elements though. 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 as a Duotone icon!
Let's double-check a few things.
- Are you using the Duotone-specific `fa-duotone` or `fa-sharp-duotone` family 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 **v5.10.0 or greater** for regular Duotone or **v6.6.0 or greater** for Sharp Duotone icons.
- 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 ``.
### 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 Font Awesome styling with Duotone icons?
Yes! You can use any of our [styling options](/web/style.md) - like [sizing](/web/style/size.md) and [animations](/web/style/animate.md) just to name a couple - with Duotone icons. And if you're using the SVG + JS version of Font Awesome, our [power transforms](/web/style/power-transform.md) and [layering](/web/style/layer.md) let you do some pretty amazing stuff.
### I'm using a subsetted Kit and the layers of my Duotone icon look weird!
If you are using a Kit where you have set Icon Selection to "By Icon" or "By Style", it is possible for the layers of your Duotone icon to be rendered separately. This will happen when you try to add a Duotone icon in a style that you have not included in your Kit. Here's the fix:
- If you're using "By Style": Check the style of your icon and make sure the icon in that style is included in the styles you have included under Icon Selection.
- If you're using "By Icon", make sure you have included the icon in that style in your selected icons.
### Help! My Duotone icon is cut off in Safari!
Safari clips a Duotone icon's secondary layer when it reaches past the [Icon Canvas](/web/style/icon-canvas.md). Web Fonts + CSS only. `fa-sun` and the `fa-message-*` icons are the ones you'll notice. It's [a WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=294556).
Pad the secondary layer, but scope it to Safari:
```css
@supports (-webkit-hyphens: none) {
i[class*='fa-']::after {
padding-block: 0.1em;
}
}
```
That `@supports` line is load-bearing. Unscoped, the padding lands on a fractional device pixel in Chromium and knocks the two layers about a pixel apart.
The broad selector is fine. A non-Duotone `::after` has no content, so there's no box to pad.
See the Clipping and Fix in Safari
We render icons on this site with SVG + JS, which never crop. To see the issue, open this [Web Fonts + CSS demo on CodePen](https://codepen.io/fontawesome/pen/xbgyXqm) in Safari.
### Do Duotone icons work with all browsers?
Yep! They work in all the browsers that we list on our [Browser Support](/web/dig-deeper/browser-support.md) page. One quirk worth knowing: [Safari clips Duotone secondary layers](#help-my-duotone-icon-is-cut-off-in-safari). A few lines of CSS fixes it.