Since Font Awesome was released, we've supported copy and pasting glyphs of our icons into your favorite desktop apps.

Advertisement

We’ll cover the basics of creating a new text layer, setting the typeface to Font Awesome 6, adjusting styles and weights, and how to use Duotone icons in a glyph application.

Before You Get Started

Make sure you’ve:

Open a Document in Your Desktop App

After getting set up, open a new or existing document in the Desktop app you want to use Font Awesome icons in. We'll use a new document in Figma (opens new window) for the walkthrough below.

Create a New Text Layer

However your app allows you, create a new layer or text block to insert text into.

A new text layer created in a Figma document

A new text layer created in a Figma document

Set the Font/Typeface to Font Awesome 6

Next, using your app's font/typeface selector, find and select "Font Awesome 6 Free" or "Font Awesome 6 Pro" as the one you want to use for the current text layer/block. Remember, if you want to insert a brand icon, choose the "6 Brands" font/typeface.

Selecting Font Awesome 6 Pro

Selecting Font Awesome 6 Pro

Advertisement

Copy the Icon's Glyph

Next, you're all set to reference the icon you want to use. First, find the icon and copy its glyph to your clipboard.

Select the copy glyph button on any icon's details

Select the copy glyph button on any icon's details

Then, paste the glyph of that icon into the text layer you've created.

rocket's glyph pasted into the text layer renders the icon

rocket's glyph pasted into the text layer renders the icon

Adjusting Styles/Weights

Font Awesome 6 comes in 5 styles/weights (plus brands!). If you've installed all .otfs, you can change the weight of your text layer/block to switch between visual styles.

Switching from solid to regular style of rocket

Switching from regular to thin style of rocket

Exporting and Prepping for Production

Remember to convert your icon text layers to vector outlines or rasterized copies before sending the file to others. The production folks may not have access to the Font Awesome font files that those text layers need to display icons.

Advertisement

Duotones and Glyphs

You can also add duotone icons into your designs as glyphs, but you'll need add each of the two layers separately and then take an extra step to align the two layers. You'll find the glyphs in any icon's quick preview in the icon gallery or an icon's detail page.

Find the Icon and Copy the Glyphs

First, find the icon you want to use in the icon gallery.

Icon details copying the primary and secondary glyphs

Copy the primary and secondary glyphs

Copy the glyphs one at a time and paste them in your graphics program.

Paste into Your Design App

Open up your desktop design app and create a text box with the font set to Font Aweseome 6 Duotone, then paste in the primary glyph. Create a second text box and epeat for the secondary glyph. Change the font size to the size you want them to appear and set the text boxes to the same height and width.

Assembling the parts of a Duotone icon

Assemble and align the parts of the duotone icon

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.

Be Mindful of Accessibility with Duotone Icons

Duotone icons are comprised of two layers with different color values, which make them more complex symbols. Read up on some accessibility best practices to be mindful of when using them on the web, desktop, and in print.

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!