Now with the magic of Kits, you can upload your own icons and use them right alongside official Font Awesome ones!
We’ll cover the basics of uploading and using your own icons alongside Font Awesome.
Are you new to making icons or want to become more familiar with our icon grid, shapes, and approach when designing your own? We've put together icon design guidelines to help your icons look and feel right at home next to Font Awesome icons.
We put together an extensive guide to prepping icons to upload (
View the Icon Prep Recommendations
Head on over to your Pro Kit of choice to get started. From there, you can upload SVG files in the "Uploaded Icons" section of your Kit. We accept SVGs via drag and drop, file browsing, and even pasting in the SVG directly — for those of you who want to copy straight from Adobe Illustrator or edit raw SVG code.
When uploading icons to a Kit, we’ll do our best to apply our best practices as we process them automagically. However, we can’t catch and solve all the ways that things could go sideways, so be sure to follow the tips for prepping your icons.
Keep these things in mind about uploaded icons:
If you've hit a snag, check out our troubleshooting for Icon Uploads to check some of the common stumbling blocks or good-to-know tips.
Once you’ve uploaded and published your own icons to a Kit, they are immediately ready to use in any project using that Kit!
| Style | Availability | Prefix | Example |
|---|---|---|---|
| Solid | Free | fa-solid | <i class="fa-solid fa-basketball-hoop"></i> |
| Regular | Pro only | fa-regular | <i class="fa-regular fa-basketball-hoop"></i> |
| Light | Pro only | fa-light | <i class="fa-light fa-basketball-hoop"></i> |
| Thin | Pro only | fa-thin | <i class="fa-thin fa-basketball-hoop"></i> |
| Duotone | Pro only | fa-duotone | <i class="fa-duotone fa-basketball-hoop"></i> |
| Sharp Solid | Pro only | fa-sharp fa-solid | <i class="fa-sharp fa-solid fa-basketball-hoop"></i> |
| Sharp Regular | Pro only | fa-sharp fa-regular | <i class="fa-sharp fa-regular fa-basketball-hoop"></i> |
| Sharp Light | Pro only | fa-sharp fa-light | <i class="fa-sharp fa-light fa-basketball-hoop"></i> |
| Brands | Free | fa-brands | <i class="fa-brands fa-dribbble"></i> |
| Kit Custom Icons | Pro Services Only | fa-kit | <i class="fa-kit fa-basketball-hoop-broken"></i> |
| Kit Custom Duotone Icons | Pro Services Only | fa-kit-duotone | <i class="fa-kit-duotone fa-basketball-hoop-broken"></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 icons -->
<i class="fa-solid fa-pennant"></i>
<i class="fa-solid fa-basketball-hoop"></i>
<i class="fa-solid fa-basketball-ball"></i>
<!-- official brand icon -->
<i class="fa-brands fa-dribbble"></i>
<!-- uploaded icons: reference icons you've uploaded to your Kit -->
<i class="fa-kit fa-pennant"></i>
<i class="fa-kit fa-basketball-hoop-broken"></i>
<i class="fa-kit fa-shaq-dunking"></i>
<i class="fa-kit-duotone fa-shaq-rapping"></i>
</body>
</html>
Uploaded icons 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.
It may feel like you're caught in a time warp (but maybe with less flux capacitors), but did you know you can download a Kit with the icons you uploaded? Yes! Now with version 6.4, you can download a Kit, and if it has uploaded icons, those icons will be included in all the formats we make for Font Awesome.
You can download your Kit for hosting yourself on the Web as Web Fonts or SVGs or to use in your Desktop apps. Just make sure the Kit's version in Settings is set to "Latest 6.x" or if you selected a specific version, it needs to be at least 6.4. Then from the Set Up tab in your Kit, you'll see the options for downloading.