Icon Wizard

Magically add modifiers to any Font Awesome Pro icon. Over 11 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!

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.

Can I combine any two icons together?

Unfortunately, no. While it would be awesome create combos with any icon in our library, we wouldn't be able to guarantee legibility. All current modifiers are custom-designed at smaller sizes to look great, and pixel-perfect, alongside our core icons.

How do I use the Icon Wizard?

1. Log into your active Pro account and make sure you have at least one Kit set up. 2. Search for an icon in our Classic or Sharp families. Open the icon you want, then click the Icon Wizard button. 3. In the editor, choose a modifier, select its position, and optionally make it duotone.

  1. Pick a Kit from the dropdown and click Save to Kit.
  2. Your new icon will appear in the Custom Icons section of your chosen Kit.

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.

Uploaded icons have their own unique 'fak' prefix

To avoid collisions and confusion with official Font Awesome icons, icons created in the Icon Wizard use the fak prefix.

Icons created in Icon Wizard are automatically named

When an icon created using the Icon Wizard is added to a Kit, it will automatically be named using the style it was created from, the core icon name, and the icon modifier name: [style]-[core icon]-[modifier]. Manually changing the style or name when adding it to code will break the icon.
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.

    No results