Icon Wizard

Magically add modifiers to any Font Awesome Pro icon. Over 5 million possible combinations!

What is the Icon Wizard?

The Icon Wizard is a Pro-only feature that lets you add a modifier (like a slash, clock, gear, etc.) to any of our core Font Awesome Pro icons (in our Classic and Sharp families). Need a second home? Create a house-circle-plus icon! Building something for the Rebel Alliance? Try a space-station-moon-slash icon!

Create combo icons with the Icon Wizard. Modifiers come in multiple styles. Mix and match icons with modifiers. There are multiple options available!

What modifiers are available?

There are over 40 custom modifiers you can use with the Icon Wizard, with more on the way! You can place modifiers on the bottom right or bottom left of an icon, and even create duotone versions for extra flair.

There are over 40 modifiers.

How do I use the Icon Wizard?

Log into your active Pro account and make sure you have at least one Kit set up.
Search for an icon in our Classic or Sharp families. Open the icon you want, then click the Icon Wizard button.
In the editor, choose a modifier, select its position, and optionally make it duotone.
Pick a Kit from the dropdown and click Save to Kit.
Your new icon will appear in the Custom Icons section of your chosen Kit.

Open an icon modal and tap the Icon Wizard button.

Select a modifier, choose a corner, and optionally make Duotone.

Choose a Kit and Save.

How do I use icons created in the Wizard?

After saving your new icon to a Font Awesome Kit, you can use it just like any other uploaded icon. The new icon will appear the Custom Icons section of your Kit.

Style	Prefix	Example
Solid	`fa-solid`	`<i class="fa-solid fa-file"></i>`
Kit Uploads + Icon Wizard	`fa-kit`	`<i class="fa-kit fa-solid-file-heart"></i>`

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

<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-file"></i>

    <!-- reference icons created in the Icon Wizard and added to a Kit -->
    <i class="fa-kit fa-solid-file-heart"></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.