Variant Awesome

About this plugin

Variant Awesome - Font Awesome Icon Plugin for Figma with variants.

Variant Awesome is a powerful Figma plugin that allows you to easily search, browse, and add Font Awesome icons directly to your Figma designs. Access thousands of icons from Font Awesome's extensive library, filter by family and style, and create icon variants with ease.

Features

- Search & Browse: Search through Font Awesome's complete icon library

- Multiple Families: Access Classic, Duotone, Sharp, Sharp Duotone, and Brands icon families

- Style Variants: Choose from Solid, Regular, Light, and Thin styles

- Customizable Sizes: Select from 10px to 160px icon sizes

- Easy Integration: Click to add icons directly to your Figma canvas

- Icon Variants: Create component variants with multiple styles automatically

Getting Started

Step 1: Install the Plugin

1. Open Figma desktop app

2. Open any Figma document

3. Go to Plugins → Browse plugins in Community (or use Quick Actions)

4. Search for "Variant Awesome"

5. Click Install or Run

Step 2: Get Your Font Awesome API Token

To use this plugin, you need a Font Awesome API token. Follow these steps:

1. Log in to Font Awesome

- Go to https://fontawesome.com

- Sign in to your Font Awesome account

- If you don't have an account, create one (free accounts are available)

2. Navigate to Tokens Page

- Once logged in, go to: https://fontawesome.com/account/tokens

- This is your account's token management page

3. Copy Your API Token

- On the tokens page, you'll see your API token

- Click the Copy button next to your token to copy it to your clipboard

- Important: Keep your token secure and don't share it publicly

Step 3: Authenticate in the Plugin

1. Open the Plugin

- Run the "Variant Awesome" plugin from your Figma plugins menu

- You'll see the authentication screen

2. Enter Your Token

- Paste your Font Awesome API token into the input field

- Click the "Add Token" button

3. Verification

- The plugin will validate your token with Font Awesome's API

- If successful, you'll be taken to the main icon browser

- If there's an error, check that you copied the complete token

How to Use

Searching for Icons

1. Use the search bar at the top to search for icons by name

2. Icons will filter in real-time as you type

3. Scroll down to load more icons (infinite scroll)

Filtering Icons

- Family Selector: Choose from Classic, Duotone, Sharp, Sharp Duotone, or Brands

- Style Selector: Select Solid, Regular, Light, or Thin (availability depends on family)

- Size Selector: Choose your preferred icon size (10px - 160px)

Adding Icons to Your Design

1. Click any icon in the grid to add it to your Figma canvas

2. The plugin will create icon variants with all available styles for that icon

3. Icons are added as Figma components that you can customize further

Logging Out

- Click the "Logout" button at the bottom of the plugin panel

- This will remove your stored token and return you to the login screen

Troubleshooting

"Unauthorized" Error

- Your token may have expired or been revoked

- Go back to https://fontawesome.com/account/tokens and generate a new token

- Re-enter the new token in the plugin

No Icons Showing

- Check your internet connection

- Verify your token is still valid

- Try logging out and logging back in

Plugin Not Loading

- Make sure you're using the Figma desktop app (not browser)

- Check that you have the latest version of Figma installed

- Restart Figma and try again

Security & Privacy

- Your API token is stored securely in Figma's encrypted clientStorage

- Tokens are only sent to Font Awesome's official API over HTTPS

- No token data is logged or exposed

- You can delete your token at any time via the logout button

Support

- Font Awesome Documentation: https://fontawesome.com/docs

- Get API Token: https://fontawesome.com/account/tokens