Skip to content

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:

  1. From the Figma app: Go to Resources > Plugins and search for “Font Awesome Icons (Official)
  2. 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.

Search for icons in the Figma Plugin 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.

Search Your Kit Custom Icons 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.