Using Glyphs
Since Font Awesome was released, we’ve supported copy and pasting glyphs of our icons into your favorite desktop apps. Learn the basics of creating a text layer, selecting an icon, adjusting the style and weight, and how to use Duotone icons as glyphs.
Add an Icon as a Glyph
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 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
Set the Font/Typeface to Font Awesome 6
Next, using your app’s font/typeface selector, find and select the Font Awesome icon family you want to use for the current text layer/block:
| Font/Typeface name | What’s included |
|---|---|
| Font Awesome 6 Free | only the Free icons |
| Font Awesome 6 Pro | includes Classic Solid, Regular, Light, and Thin |
| Font Awesome 6 Duotone | inluces Duotone Solid, Regular, Light, and Thin |
| Font Awesome 6 Sharp | includes Sharp Solid, Regular, Light, and Thin |
| Font Awesome 6 Sharp Duotone | includes Sharp Duotone Solid, Regular, Light, and Thin |
| Font Awesome 6 Brands | only Brand Icons |
| Font Awesome Kit (kit-ID) | includes Custom Icons in a Kit Download (if you’re using one) |
Selecting Font Awesome 6 Pro
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
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
Adding Kit Custom Icons
If you are using the Kit custom icon font, it works the same as all the other Font Awesome font glyphs. You can just paste in the icon’s glyph into a text layer and it will appear!
Choose a Style by Adjusting Font Weights
Font Awesome 6 comes in several styles, depending on the typeface you’re using. If you’ve installed all .otfs, you can change the weight of your text layer/block to switch between the different icon styles. (Duotone and Brands have their own typefaces that only have one weight.)
| Font/Typeface | Style | Weight |
|---|---|---|
| Font Awesome 6 Free | Solid Regular | 900 400 |
| Font Awesome 6 Pro | Classic Solid Classic Regular Classic Light Classic Thin | 900 400 300 100 |
| Font Awesome 6 Sharp | Sharp Solid Sharp Regular Sharp Light Sharp Thin | 900 400 300 100 |
| Font Awesome 6 Duotone | Duotone Solid Duotone Regular Duotone Light Duotone Thin | 900 400 300 100 |
| Font Awesome 6 Sharp Duotone | Sharp Duotone Solid Sharp Duotone Regular Sharp Duotone Light Sharp Duotone Thin | 900 400 300 100 |
Switching from Regular to Thin style of rocket
Duotones and Glyphs
You can 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.
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.
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.