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.Ĭustom 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. Plugin Settings: You can access the Plugin Settings from the gear icon in the bottom left of the plugin.

If you update the custom icons in your Kits on, you’ll need to refresh your Kits from the Figma plugin’s Settings to see your changes. Searching custom icons will show you icons with the search in the name of the icon.Īccess your Kits with custom icons in the Font Awesome Figma Plugin Select “Kits” from the family menu, and you will see any Kits with custom icons listed in the styles menu. Roomy: The frame will be 24px square (or relative proportions if you’ve changed the size) for all iconsįor 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.Square: The frame will be 20px square (or relative proportions if you’ve changed the size) for all icons.

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.

We’ve also added a few commonly requested padding options that you can set on the placed icon: Adjust the Padding of the Placed Icon Frame 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.

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. Once the icon is placed, it is a standard SVG element so you can adjust color and sizing just like like any vector element. You can then drag it to where you would like it in 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. Once you find an icon you want to use, just click it to drop it into your design. Searching for icons in the Font Awesome Figma Plugin Add Icons to Your Figma Designs By default, the plugin is set to show theĬlassic Solid icons, but you can switch to any of our other Families or Styles using the dropdown menus. Our official Figma Plugin lets you search our icons to find just what you need for your designs. Now you’re set to search and add icons! Using the Plugin Search for Icons If you prefer to enter your token every time you run the plugin, you can uncheck “Remember my token”. From a browser: Visit the Font Awesome Icons (Official) page, click the “Open in…” button, and select a file to open it inįinally, 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 :Ĭopy the token and paste it into the Figma Plugin.From the Figma app: Go to Resources > Plugins and search for “ Font Awesome Icons (Official)“.You can get the plugin in one of two ways: Next, you’ll need to install the plugin in Figma. Create a Font Awesome Accountįirst, you’ll need to create a Font Awesome account if you don’t already have one. 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. With the Figma Icon Plugin, you can search and add any free icons if you’ve got a Free account. 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.

And if you have custom icons in your Pro Kits, you can easily search and add those too! Easily search and add icons in Figma with our Official Figma Plugin.

Figma font preview plugin