Use the Icon Wizard to magically add a modifying element to just about any icon!
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
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.
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.
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!
|Kit Uploads + Icon Wizard|| |
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.