Upload Your Own Icons

Now with the magic of Kits, you can upload your own icons and use them right alongside official Font Awesome ones!

First Things First!

Make sure you:

A kit set to use Pro icons

You’ll need to have a Kit using Pro Icons in order to upload icons

# Icon Upload Step-by-Step

We've got you covered from start to finish for uploading and using your own icons alongside Font Awesome. Just follow the steps below to get started.

# 1. Design Your Icon

If you’re 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 a icon design guidelines to help your icons look and feel right at home next to Font Awesome icons.

View icon design guidelines

# 2. Get Your Icon Ready for Upload

We put together an extensive guide to prepping icons to upload (<buzz>and beyond!</buzz>). We’ll walk through all of the things you need to know and do to help your icons display perfectly right alongside official Font Awesome icons.

View the Icon Prep Recommendations

# 3. Upload Your Icon to a Kit

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 automagically apply our best practices as we process them. However, we can’t catch and solve all the ways things could go sideways, so be sure to follow the tips for prepping your icons.

Keep these things in mind about uploaded icons:

  • Uploaded icons are tied to a specific kit and will only work on projects that reference that kit
  • Uploaded icons are only available for web use right now.
  • You can upload as many icons as your plan allows (in one or across many kits).
  • Uploaded icons can have the same name as official Font Awesome icons (the unique prefix will set them apart)

Upload Icons to a Kit

# Having Trouble?

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.

Troubleshooting Icon Uploads

# Using Uploaded Icons in a Project

Once you’ve uploaded and published your own icons to a kit, they are immediately ready to use in any project using that kit!

Uploaded icons have their own unique 'fak' prefix

To avoid collisions and confusion with official Font Awesome icons, icons uploaded to a kit use the fak prefix.

Style Availability Prefix Example
Solid Free fas <i class="fas fa-basketball-hoop"></i>
Regular Pro Required far <i class="far fa-basketball-hoop"></i>
Light Pro Required fal <i class="fal fa-basketball-hoop"></i>
Duotone Pro Required fad <i class="fad fa-basketball-hoop"></i>
Brands Free fab <i class="fab fa-dribbble"></i>
Kit Uploads Pro Services Required fak <i class="fak fa-basketball-hoop-broken"></i>

  Here’s an example of an HTML file referencing both official and uploaded icons from a kit…

<!doctype html>
    <!-- Place your kit's code here -->
    <script src="[YOUR_KIT_CODE]" crossorigin="anonymous"></script>

    <!-- official solid icons -->
    <i class="fas fa-pennant"></i>
    <i class="fas fa-basketball-hoop"></i>
    <i class="fas fa-basketball-ball"></i>

    <!-- official brand icon -->
    <i class="fab fa-dribbble"></i>

    <!-- (ficticious) uploaded icons: reference icons you've uploaded to your kit -->
    <i class="fak fa-pennant"></i>
    <i class="fak fa-basketball-hoop-broken"></i>
    <i class="fak fa-shaq-dunking"></i>
    <i class="fak fa-shaq-rapping"></i>

Uploaded icons can use all of the offical Font Awesome styling options, including: sizing, coloring, rotating, power transforms, masking, and layering. You can also use your uploaded icons as pseudo-elements.

Running into trouble uploading or using your own icons?

Check out our guide on how to troubleshoot common issues.

You're viewing the Version 6 Beta

It's all the awesome of 5 but now more six-y! Version 6 brings over 13,000 icons across 5 styles - including the new Thin style! - and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!