Duotone Icons

There are some unique specifics on how to upgrade to Font Awesome 6 when using Duotone Icons on the Desktop. Let’s walk through them.

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.

Duotone Icons Using Ligatures

Before You Get Started

Make sure you’ve:

• Upgraded your project to Font Awesome 6 and are ready to manage some mischief.
• Become familiar with using ligatures to add icons on the desktop.

What’s Changed?

You can still add duotone icons into your designs using ligatures, but we’ve changed how you access duotone layers using ligatures. In Version 5 you would access the primary layer using the -primary suffix and the secondary layer using the -secondary suffix. In Version 6 you now access the primary layer using a single hash (#) suffix and the secondary layer using a double has (##) suffix.

Layer	v5 Shortcut	v5 Example	v6 Shortcut	v6 Example
Primary layer	[icon-name]-primary	crow-primary	[icon-name]#	crow#
Secondary layer	[icon-name]-secondary	crow-secondary	[icon-name]##	crow##

Updating Version 5 Icon References

If you have existing files that reference Version 5 Duotone icons using the v5 ligature shortcuts, those will need to be manually updated to the new v6 syntax. Here are the manual steps to take for each reference:

1. Select the text boxes that contain the v5 Duotone icon’s layers
2. Set the Font/Typeface to Font Awesome 6
3. Type the v6 shortcut for the current Duotone icon and layer

Adding New Icons After Upgrading

To use the Version 6 duotone icons open your desktop design app and create a text box with the font set to Font Awesome 6 Duotone. To get the primary layer, type the icon’s name and then one hash (#). To get the secondary layer, type the name and two hashes (##).

Layer	v6 Shortcut	Example
Primary layer	[icon-name]#	crow#
Secondary layer	[icon-name]##	crow##

Typing crow# will get you the body of the crow, and typing crow## will get you the beak and legs.

Then change the font size to the size you want them to appear and set the text boxes to the same height and width. Adjust the color and opacity of the two layers as you like. The last step is to align the two text boxes to overlap using the align tools for vertical and horizontal center.

Assemble and align the parts of the duotone icon

---

Duotone Icons Using Glyphs

Before You Get Started

Make sure you’ve:

• Upgraded your project to Font Awesome 6 and are ready to manage some mischief.
• Become familiar with using glyphs to add icons on the desktop.

While upgrading your duotone glyphs is pretty straightforward it’s a bit fiddly. You’ll treat it like changing any other type of font. The fiddly part about duotone icons is that they have multiple layers. Here’s what you need to do.

1. Select each existing glyph layer.
2. Switch the selected font to Font Awesome Version 6.

Your glyph layers will update and now you’re rocking the latest and greatest Font Awesome! For more information on aligning or using your glyphs please refer to our guide for using duotone glyphs.

---

Duotone Icons Using SVGs

Before You Get Started

Make sure you’ve:

• Upgraded your project to Font Awesome 6 and are ready to manage some mischief.
• Become familiar with using SVGs to add icons on the desktop.

In order to upgrade your duotone SVGs to Version 6, you’ll need to do the following.

1. Grab the latest SVGs from the Version 6 desktop download.
2. Drop the desired SVG into your vector friendly program.
3. Update your layers to give them the desired look.

You can find more information about how to use duotone SVGs on our SVG desktop doc.