Add icons to text layers with icon fonts
Before you start
Who can use this feature
Users on any plan can use icon fonts in their designs.
You will need to have can edit access to a file to edit any text layers.
Icons are images or symbols that represent specific actions or tools in an interface. 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.
Font Awesome icons
By default, Figma supports Font Awesome, a popular set of icons in an easy-to-use font. Font Awesome is free to use, or you can purchase an extended range of icons.
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.
In Font Awesome
View and copy icons from the Font Awesome cheatsheet.
- Open the Font Awesome cheatsheet
- Use the tabs at the top of the page to choose between Solid or Regular Font Awesome icons. You'll need to update the font style in Figma to match:
- Right-click on the icon you want to use and select Copy from the menu to add it to your clipboard:
In Figma
- Create a text object in the canvas.
- In the Text section of the properties panel, click the arrow next to the font.
- Select the Font Awesome 5 Free font from the list.
- Based on your icon choice, use the font style field to select Regular or Solid:
- Paste the icon into your text object in Figma using the keyboard shortcut:
- macOS: Command V
- Windows: Ctrl V
- Figma will display the icon in the canvas:
Other icon fonts
If you have a different icon font installed on your device, you can still use these icon fonts in Figma.
There are a few ways to access fonts from your device:
Once you have access to your local fonts, you can find any icon fonts in the font picker.