Use icon fonts

You can add icons to your designs as actual images, or use an icon font. Icon fonts are fonts that are made up of symbols, as opposed to regular letters and numbers.

Like regular text, icon fonts can be styled using CSS, which makes them popular in web development.

Access icon fonts

If you have icon fonts installed on your computer, you can use these as fonts in Figma. To access them, use the Figma desktop app, or download the Figma font helper to be able to use them in a web browser.

The font must be installed on your computer and be in an OpenType (.OTF) or TrueType (.TTF) format. Learn how to add a font to Figma Design.

Use the Font Awesome icon fonts

Font Awesome is a popular set of icons in an easy-to-use font format. There are both free and paid versions that are available to use in Figma.

Figma supports four different Font Awesome fonts. Browse each of the icon libraries associated with each font using these links:

• Font Awesome 6 Pro (Font Awesome subscription required)
• Font Awesome 6 Free
• Font Awesome 5 Pro (Font Awesome subscription required)
• Font Awesome 5 Free

Use Font Awesome icons in Figma

1. Create a text layer in the canvas.
2. In the Text section of the properties panel, click the arrow next to the font.
3. Select the Font Awesome font you want to use:
   • Font Awesome 5 Brands (Pro)
   • Font Awesome 5 Free
   • Font Awesome 6 Brands (Pro)
   • Font Awesome 6 Free
4. Find the icon you want to use from the corresponding Font Awesome library. Click on the icon to view the icon details:
5. Choose which weight of the icon you want to use. Figma supports both Solid and Regular icons.
6. Hover over the icon version in the top-right corner between the unicode value and the download icon. Click to Copy glyph to your clipboard.
7. Paste the icon into your text layer in Figma using the keyboard shortcut:
   • macOS: Command V
   • Windows: Ctrl V
8. Some Font Awesome icons only support regular or solid versions, while others support both. Based on your icon choice, use the font style field to select Regular or Solid:
9. Figma will display the icon in the canvas:

Font Awesome has both regular or solid versions of an icon. If an icon isn't showing up when you paste it, you may need to switch to the solid style to see the icon.