SVGs are right at home in vector-based design apps. And it's the best way to get Duotone icons into your designs.
You can drop any one of our SVG files into vector-friendly design apps like Figma, Sketch, or Adobe Illustrator, just to name a few. Create a new file or open an existing one, and drag the SVG into the artboard where you would like it placed.
A duotone icon's .svg file open in Figma
Then use the app's tools for resizing and coloring to get it just right in your design.
Duotones and SVG
Just like any other style of Font Awesome icons, you can drag and drop a Duotone SVG file into your SVG-friendly application, and the duotone icon will appear. By default, the secondary layer will be set to 40% opacity and the icon will be set to a single color, but you can change that.
Changing Layer Colors and Opacity
To change the color or opacity in a Duotone icon, select and manipulate the opacity and color of individual layers in the SVG you opened. Here are a few examples in action.
A duotone icon with a new color applied to the primary layer in Figma
A duotone icon with a new color applied to the secondary layer in Figma
Setting opacity of a duotone layer to by adjusting the Pass Through in Figma