Font Awesome Kits are here to save the day! Fast, flexible, friendly, and full of icons—They're the personal CDN you've been waiting for.

Advertisement

What's a Kit?

A Font Awesome Kit is like a knapsack that carries all the icons and awesomeness you need in a neat little lightweight bundle you can sling on the back of your project with ease.

A Kit Settings Page

A Kit Settings page

It comes with amazing features like:

  • Auto-subsetting that serves only the icons you use so your pages load lightning-fast
  • Easy settings for switching between Free and Pro icons, Web Font and SVG+JS
  • Auto-accessibility so everyone can join the icon party
  • Easy options for Version 4 compatibility
  • Conflict Detection for those tricky situations
  • ... and more!

And now you can upload your own icons and serve them alongside Font Awesome icons!

How to Use a Kit

Our Kits service gets icons into your web projects with just one line of code. Just create, add the kit code to your project, and you're set to get the icons flowing!

1. Create a Kit from Your Kits Listing

You can access Kits in your account menu or from your account page. From the Kits page, you can easily create a new kit and follow the steps to get it set up in your project.

Advertisement

2. Adjust Your Kit Settings

By default, a new kit is set up with these settings:

Kit Feature Description Default Setting
Kit Name An easily identifiable name for your kit (maybe use a project or site name?) Random alpha numeric string
Icon Set Select Free or Pro icons Free for free users, Pro for Pro users
Tech Choose the type of tech you want to use to render your icons, Web Fonts or SVG+JS Web Fonts
Limit Domains Set which domains are allowed to use this kit (helps prevent unauthorized use of your kit code) Open (no limits)
Version of Font Awesome Select the version of Font Awesome you want to load Latest (auto-updates to whatever the latest release is)
Auto-accessibility Automatically applies accessibility best practices to your icons On
Version 4 Compatibility If you're still using Version 4 syntax for some icons, this will make those icons work On

We also generate a random string for your kit's name but you can name it something memorable, like your project's name, what you'll use the kit for, or your favorite Star Wars character. Visit the settings for your Kit if you would like to make adjustments to suit your project.

3. Add the Kit Code to your project

From your kit's detail page, you can copy the kit code. Then just add it to the <head> of each template or page of your project that you want to use Font Awesome icons.

Ready to Get Kitted Up?

Take the power of kits into your hands... Head over to Kits and get started!

Create a Kit

Looking for the CDN?

The Font Awesome CDN does not support v6 so your best bet is to use a Kit.

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!