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.

The Icon Wizard is a beta feature!

This feature is in beta - we're still doing some polishing on the modifier placement and finer points of the SVG... uh, points. You may find icons that don't take the modifier as well as others. However, if we make feature updates, the icons created and saved to a Kit will remain as-is.

Let us know what you think of this feature or if you encounter any bugs!

How do I use the Icon Wizard?

First, make sure you're logged into your active Pro account and have created 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.

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.

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!

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	`fas`	`<i class="fas fa-cloud"></i>`
Kit Uploads + Icon Wizard	`fak`	`<i class="fak 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="fas fa-cloud"></i>

    <!-- reference icons created in the Icon Wizard and added to a Kit -->
    <i class="fak 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.