A new addition with Version 6, our ligatures feature allows you to more easily insert icons into a documents text layer. Here's how to get around and use them.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
When working in desktop applications, like Adobe Illustrator, Figma, and Sketch, you can use Font Awesome as a typeface in any text area. We have ligatures for each and every icon so you can type in the name of the icon you want and it will magically appear.
After completing the steps in 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
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
Next, using your app's font/typeface selector, find and select "Font Awesome 6 Pro" or "Font Awesome 6 Duotone" - "Font Awesome 6 Free" is coming soon - as the one you want to use for the current text layer/block. Remember, if you want to insert a brand icon, choose the "Font Awesome 6 Brands" font/typeface.
Selecting Font Awesome 6 Pro
Type the Icon's Name
Next, you're all set to reference the icon you want to use. Just start typing the icon's name and as you finish, our ligatures should convert the letters into the correct symbol. Geee, Mr. Wizard!
"rocket" typed into the text layer renders the icon
Don't worry if other icons appear as you are typing the text for the icon you want. Once you're done, our ligatures will honor the final word you've typed. You can also type in an icon's alias, if you like to stay undercover like Ethan Hunt.
Grab and Go Icons!
Our icons gallery is a perfect place to easily find the icon you want to use and grab its name.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
Font Awesome 6 font comes in 4 font weights: Solid, Regular, Light, and Thin. If you've installed all .otfs, you can change the weight of your text layer/block to switch between the different icon visual styles. (Remember, Brands and Duotones have their own font.)
Switching from regular to thin style of rocket using font weight
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 the icons.
Duotones and Ligatures
You can also add duotone icons into your designs using ligatures, but you'll need to add each of the icon's layers separately, and then take an extra step to align the two layers.
Open your desktop design app and create a text box with the font set to Font Awesome 6 Duotone. To get the primary layer, type the icon's name and then one hash (#). To get the secondary layer, type name and two hashes (##).
Layer
Shortcut
Example
Primary layer
[icon-name]#
crow#
Secondary layer
[icon-name]##
crow##
Typing crow# will get you the body of the crow, and typing crow## will get you the beak and legs.
Then change the font size to the size you want them to appear and set the text boxes to the same height and width. 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.
Assemble and align the parts of the duotone icon
Other Ways to Use Duotone Icons
You can also add duotone icons as as a single unit, but there are a few gotchas to consider. First, your graphics program or application will need to support embedded opacity within typefaces. (Otherwise, both layers of the duotone icon will appear as 100% black.) Also, you won't be able to change the color or opacity of the icon or its parts, unless you first convert the icon to outlines. The icon will default to black, with the second layer at 40% opacity. For this reason, we recommend using the two-part method above.