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.
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?
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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.
Here’s an example of an HTML file referencing both official and uploaded icons from a Kit…
<!doctypehtml><html><head><!-- Place your Kit's code here --><scriptsrc="[YOUR_KIT_CODE]"crossorigin="anonymous"></script></head><body><!-- official solid icon --><iclass="fas fa-cloud"></i><!-- reference icons created in the Icon Wizard and added to a Kit --><iclass="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.
