'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Use icon fonts
Before you start
Who can use this feature
Anyone on any plan can use icon fonts in their designs.
You need can edit access to edit text layers.
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 local fonts in Figma Design, you can use the Figma desktop app, or download the Figma font helper.
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.
Once you have installed your local fonts, you can find them in the font picker. Learn how to browse and apply fonts.
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
- Create a text layer in the canvas.
- In the Text section of the properties panel, click the arrow next to the font.
- 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
- Find the icon you want to use from the corresponding Font Awesome library. Click on the icon to view the icon details:
- Choose which weight of the icon you want to use. Figma supports both Solid and Regular icons.
- 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.
- Paste the icon into your text layer in Figma using the keyboard shortcut:
- macOS: Command V
- Windows: Ctrl V
- 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:
- 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.