Skip to content
Font Awesome Docs
Check out the all-new Web Awesome AND get an exclusive lifetime discount on Font Awesome!
Live on Kickstarter!

Icon Wizard

Use the Icon Wizard to magically add a modifying element to just about any icon!

What is the Icon Wizard?

The Icon Wizard is a Pro feature that lets you add a modifier element to almost any icon in the Font Awesome collection. Need more ice cream? Make a soft-serve-circle-plus icon! Making an app for the Rebel Alliance? Make a space-station-moon-slash icon!

Create combo icons with the Icon Wizard.

There are multiple modifiers available, in most Font Awesome styles. Create combo icons with the Icon Wizard. There are multiple modifiers available, in most Font Awesome styles.

How do I use the Icon Wizard?

First, make sure you’re logged into your active Pro account and have create a Kit.

Then search for an icon - You’ll find the button for the Icon Wizard in either the modal from the icon search or when viewing an icon’s detail page.

Open an icon modal and tap the Icon Wizard button. Open an icon modal and tap the Icon Wizard button.

Once you’re in the Icon Wizard editor, you’ll see the current icon with modifier options below. Select a modifier, and you’ll see it added to the icon. Once you’re happy with your icon combination, use the dropdown menu to choose a Kit, and press the “Save to Kit” button. It will be saved as a custom uploaded icon in the Uploaded Icons section of your Kit.

Select a modifying element and save the new icon to a Kit. Select a modifying element and save the new icon to a Kit.

How do I use icons created in the Wizard?

After a new icon variation is saved to a Font Awesome Kit, you can use it in a project just like any other uploaded icon. The new icon will be added the Uploaded Icons section of the Kit you saved it to, and that icon will remain there just as you created it - it was generated just for you!

StylePrefixExample
Solidfa-solid<i class="fa-solid fa-cloud"></i>
Kit Uploads + Icon Wizardfa-kit<i class="fa-kit fa-solid-cloud-gear"></i>

  Here’s an example of an HTML file referencing both official and uploaded icons from a Kit…

<!DOCTYPE html>
<html>
  <head>
    <!-- Place your Kit's code here -->
    <script src="[YOUR_KIT_CODE]" crossorigin="anonymous"></script>
  </head>


  <body>
    <!-- official solid icon -->
    <i class="fa-solid fa-cloud"></i>


    <!-- reference icons created in the Icon Wizard and added to a Kit -->
    <i class="fa-kit fa-solid-cloud-gear"></i>
  </body>
</html>

Icons added to a Kit can use all of the official Font Awesome styling options, including sizing, coloring, rotating, power transforms, masking, and layering. You can also use your uploaded icons as pseudo-elements.