SVGs are right at home in vector-based design apps. And it's the best way to get Duotone icons into your designs.

Advertisement

Before You Get Started

Make sure you already:

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 Sketch

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.

A Word to the Wise

When you add an SVG file, you are making direct edits to the SVG, so we recommend saving any changes you make in a new file and keeping files organized for future use.

Advertisement

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 color applied to the primary layer in Figma

A duotone icon with a new color applied to the primary layer in Figma

A duotone icon with color applied to the secondary layer in Figma

A duotone icon with a new color applied to the secondary layer in Figma

Setting opacity of a duotone layer to 100% in Figma

Setting opacity of a duotone layer to by adjusting the Pass Through in Figma

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!