Duotone Icons on the Desktop
Our new duotone style 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.
# Using SVGs
We recommend using the duotone-specific optimized .svg vector files for duotone icons on the desktop because of the multiple elements that make up the duotone icons. (You'll find the files in the /svgs/duotone folder of your Font Awesome download.)
# Adding a Duotone SVG Icon
In a desktop design application that supports working with .svg files, open any of the individual duotone SVG icons found in /svgs/duotone. You should see an SVG shape that contains two distinct layers.
# Changing Layer Colors and Opacity
Once open, you can select and manipulate the opacity and color of individual layers in the SVG you opened. Here are a few examples in action.
# Troubleshooting
# Why don't you recommend using ligatures?
To be able to manage the color and opacity of two parts of the duotone separately, each icon's layer has been split into two separate glyphs, a primary and a secondary. With ligatures, you need to reference each in a separate text layer and then visually align those layers, which is less than ideal.
# Why have we separated duotone icons into two glyphs in the font file?
If you've followed the OpenType spec you may know about SVG in OpenType. It allows colors, gradients, opacity and generally all the available options of the SVG format to be embedded in an OpenType font file. You are already familiar with this technology if you've ever used an emoji on your Android or iPhone device. (If you haven't used an emoji, seriously; what have you been doing on your phone??)
We experimented with this technology while we were adding the duotone feature and found it had one major drawback: it doesn't inherit color. In desktop apps that we tried (Photoshop, Illustrator, Sketch, and Figma) the opacity worked well but the icons always remained a boring gray, unable to be changed unless you broke it up into outlines. This ability to inherit color is supposed to work and does in most Internet browsers. In desktop apps, though, it trips over its shoelaces and face-plants into failure.
We are going to keep our eyes on this as more vendors implement more of the OpenType spec. When it's ready for prime-time we'll most likely release an update that makes this fully magical to use.