Our Duotone icons, while extra stylish, need a little extra care when working on the Desktop.

Advertisement

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

• All 30,013 icons in Font Awesome
• 5 Classic styles of every icon
• 4 Sharp styles of every icon
• A Perpetual License to use Pro
• Services and tools to make easy work of using icons
• Fresh icons, features, and software updates
• Plus support from real humans

Already have a Pro Plan? Sign in

Pro Plan Required

Pro Plan Required!

This is a Pro feature so you'll need to grab a Pro-level plan to use it. You'll also get thousands more icons, access to services, and support! Already got a plan? Sign in!

Our duotone style provides an alternate version of each Font Awesome icon, but with two distinct shades of color. They're great for adding brand colors or a more illustrative quality to the icons in your project.

We’ll cover the basics about what to consider when using duotone icons.

Considerations Before You Get Started

Duotone icons need some special attention when added into your designs, so look over the options and decide which is right for you.

Method	Add as	The Good	The Ugly
Add as SVGs	Image file	Full control over color, styling, opacity for the entire icon as a unit or the layers individually.	Have to manually manage the icons in your design files.
Add Using Ligatures	Text box	Easiest way to add duotone icons - Just set the font to Font Awesome 6 Duotone and type the icon name. Lets you to change the font family to switch to a different style.	Can't adjust the color or opacity without first converting the icon to outlines.
Add Using Glyphs	Text box	Straightforward copy and paste of the primary or secondary glyphs from the icon details into a text box.	Need to align the two text boxes to combine the layers of the full icon.