Figma Plugin
Easily search and add icons in Figma with our Official Figma Plugin. And if you have custom icons in your Pro Kits, you can easily search and add those too!
Overview
While you can use any of our methods for adding icons in Figma, our Figma Plugin lets you easily search and add icons as SVGs right from Figma. You just need a Font Awesome account!
With the Figma Icon Plugin, you can search and add any free icons if you’ve got a Free account. If you’ve got Pro, you’ll also be able to search and add any Pro icons, including any custom icons you’ve added to your Kits.
Set Up the Plugin
1. Create a Font Awesome Account
First, you’ll need to create a Font Awesome account if you don’t already have one. (They’re free!)
2. Install the Plugin in Figma
Next, you’ll need to install the plugin in Figma. You can get the plugin in one of two ways:
- From the Figma app: Go to Resources > Plugins and search for “Font Awesome Icons (Official)”
- From a browser: Visit the Font Awesome Icons (Official) page, click the “Open in…” button, and select a file to open it in
3. Add Your API Token to the Plugin
Finally, the first time you open the plugin, it will ask you for an API Token, which you can create (for free!) in your Account on fontawesome.com:
Copy the token and paste it into the Figma Plugin. If you prefer to enter your token every time you run the plugin, you can uncheck “Remember my token”. Now you’re set to search and add icons!
Using the Plugin
Search for Icons
Our official Figma Plugin lets you search our icons to find just what you need for your designs. By default, the plugin is set to show the Classic Solid icons, but you can switch to any of our other Families or Styles using the dropdown menus.
Searching for icons in the Font Awesome Figma Plugin
Add Icons to Your Figma Designs
Once you find an icon you want to use, just click it to drop it into your design. It will be placed as an SVG into the center of your current view in Figma at 16px high in a frame named with the icon’s name. You can then drag it to where you would like it in your design. Once the icon is placed, it is a standard SVG element so you can adjust color and sizing just like like any vector element.
Adjust the Size of the Placed Icon
While you can change the icon’s size after placing it in your design, we’ve also added a way to adjust the size of the icon before placing it into your design. The sizes range from 10px to 160px, which match up with Font Awesome sizing utilities for easy design-to-dev hand-off, if that’s something you need.
Adjust the Padding of the Placed Icon Frame
We’ve also added a few commonly requested padding options that you can set on the placed icon:
- No padding: The frame fits the icon
- Fixed-width: The frame will be 20px wide and 16px high (or relative proportions if you’ve changed the size) for all icons regardless of the icon’s actual width
- Square: The frame will be 20px square (or relative proportions if you’ve changed the size) for all icons
- Roomy: The frame will be 24px square (or relative proportions if you’ve changed the size) for all icons
Search Your Kit Custom Icons Pro
For Pro folks, if you’ve added custom icons to any of your Kits, those icons are available in the plugin as well, and can be used just like the Font Awesome icons. Select “Kits” from the family menu, and you will see any Kits with custom icons listed in the styles menu. Searching custom icons will show you icons with the search in the name of the icon.
Access your Kits with custom icons in the Font Awesome Figma Plugin
Tips and Tricks
Plugin Settings: You can access the Plugin Settings from the gear icon in the bottom left of the plugin. The Settings view shows the status of your token, lets you remove the token if you need to update it, and refresh your Kits if you need to update your custom icons.
Custom Icons: If you can’t see your custom icons, make sure you’ve entered an API Token from a Pro account - The name of the token in your account should say “Figma (Pro)” and the “Read Kits data” and “Pro icons and metadata” scopes should be checked.
Upgrading to Pro: If you use the plugin with a Free Token and then upgrade to Pro, you’ll need to create a new Figma token that allows you to load Pro Icons. The new token you create as a Pro subscriber will be named “Figma (Pro)“.
Replacing a Token: If you’re having trouble loading icons, you might need to create a new token from your Font Awesome Account and replace your token in the plugin.
Kit Subsetting: Kit subsetting and other Kit settings are not yet supported in the Figma plugin. Only custom icons are loaded from Kits.
Version: The version of Font Awesome that the plugin is using is shown in the bottom right corner. When Font Awesome is updated, the plugin will automatically update to the latest icons, but any previous icons you have placed in your designs will not change.