Skip to content

Use a Kit

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.

What’s a Kit?

A Font Awesome Kit is the place to manage all your icons for a project. With the power of a Kit, you get the easiest way to use Font Awesome icons, great performance, easy customization, and you can even upload your own icons!

A Kit Icons Page A Kit Icons page shows what icons are in this Kit

It comes with amazing features like:

  • Auto-subsetting: Serves only the icons you use so your pages load lightning-fast
  • Free or Pro icons
  • Web Font or SVG+JS
  • Auto-Accessibility: Automatically applies accessibility best practices to your icons
  • Version 4 compatibility
  • Conflict Detection: Help detect conflicting versions of Font Awesome
  • Upload your own icons: Add your own icons and serve them alongside Font Awesome ones!
  • … and more!

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 embed 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.

2. Adjust Your Kit Settings

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

Kit FeatureDescriptionDefault Setting
Kit NameAn easily identifiable name for your kit (maybe use a project or site name?)The Kit’s unique ID
Icon SetSelect Free or Pro iconsFree for free users, Pro for Pro users
SubsetChoose whether you want to use Auto-Subsetting or manage it yourself with custom subsettingAuto-Subsetting
Version of Font AwesomeSelect the version of Font Awesome you want to loadLatest (auto-updates to whatever the latest release is)
TechChoose the type of tech you want to use to render your icons, Web Fonts or SVG+JSWeb Fonts
Limit DomainsSet which domains are allowed to use this kit and prevent unauthorized use of your Kit embed codeOpen (any domain can use)
Earlier version compatabilityEnables old version 4 or 5 icon names or referencesOn
Conflict DetectionTemporarily detect conflicts with other versions of Font Awesome loading in your projectOff

We automatically 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 Embed Code to your project

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

For those of you who prefer no JavaScript for “reasons”, you can select the option to use a CSS Kit embed code which will load Font Awesome strictly through CSS. You’ll need to set your Kit to use Version 6 with Web Fonts, and make sure you’re okay with the pros and cons:

Benefits of CSS-only KitsCons of CSS-only Kits
No JavaScriptBlocks the page from loading until the icons are ready
No page repaints or jumping UI

Ready to Get Kitted Up?

Take the power of kits into your hand… Head over to Kits and get started!

Create a Kit

Downloading Kits

If you don’t want us to host your Kit, you can download any Pro Kit and host it yourself (or use the icons in your desktop apps). Downloading is available on Kits set to Version 6.4 and higher (or Latest). Then on the Set Up tab in your Kit, you’ll see the options for downloading.

And if you have custom icons in your Kit, they will be included in your download in all the formats, just like the Font Awesome ones.

What’s in a Kit Download?

Folders & FilesWhat They Are
css/CSS files for using with Web Fonts
js/Icons and utility scripts for each style
less/Less-based icons and utiliies
LICENSE.txtLicense detailing permitted use of Pro Icons
metadata/Metadata about the icons
scss/SCSS-based utiliies to use with Web Fonts
sprites/Icons as SVG sprites
svgs/Icons as SVGs
webfonts/Icons as Web Fonts to be used with CSS

Using a Downloaded Kit

Once you’ve downloaded the Kit, you can follow the instructions to Host Yourself - Web Fonts or Host Yourself - SVG+JS.

Custom Subsetted Kits

If you have set your Kit to Custom Subsetting, your Kit will include ONLY the icons you’ve selected plus any custom icons you’ve uploaded. That means:

  • Hosted Kits will only serve the icons you’ve picked and your custom icons (if you have added some).
  • Downloaded Kits will include the same folders listed above, but the files and fonts inside will ONLY include your selected and custom icons.

Once you’ve downloaded the Kit, you can follow the instructions to Host Yourself - Web Fonts or Host Yourself - SVG+JS.

Get Up to Speed on Subsetting with Font Awesome

Tune Your Kits

Performance

Performance is one of those things you don’t care about until you do. And luckily, we already took care of that for you!

If you’re using a Pro Kit, Auto-subsetting takes just the icons you’re using in your project and creates a subset on the fly - whether you’re using Web Fonts or SVG icons. So your Kit only loads the icons you need and gives you the great performance auto-magically.

Or you can custom subset if you want to take full control.

Kits and Pageviews

A pageview is counted whenever your Kit is loaded on a page. We count pageviews per month, and they renew on the first of each month.

How many pageviews do I have?

Every Font Awesome subscription comes with a number of Kit pageviews which are counted across all Kits. (Free accounts a limited number of pageviews as well!) You can check your Kit pageviews usage in your Account.

I’m getting a lot more pageviews than I think I should be. What can I do?

Specifying a domain can help you control where and how you’re using Font Awesome Kits which helps avoid unexpected extreme usage.

If you’re seeing more pageviews than you expected, you might want to add domains to limit which sites can use your Kit:

Add Domains to Kit Settings

Limit your Kit to certain domains

  1. Go to your Kit settings and scroll down to the Domains section.

  2. Click “Add a Domain” and you can enter a domain you’ll use the Kit on. (You can use wildcards to add subdomains or alternate endings - there’s a link to the full details right there next to the setting.)

  3. Click the plus button to lock it in, and repeat to add more. If you need to remove one, hover over it and you’ll have the option to delete.

What if I go over?

If you go over your pageview limit, you may have to pay overage fees. Or if you know you’ll regularly want lots of pageviews, you can subscribe to a Pro Max plan.

Compatibility

Using a Kit can handle a lot of the hassle of setting up and using icons in a project. But there are some cases when you may want to reach for a different tool. Here are some scenarios with recommendations…

ScenarioUse Kits?
On the Web (Hosted)Get instant access to all icons and instant updates without worrying about hosting
On the Web (Self-Hosted)Pro only: Download a Kit and host the production-ready web files yourself
With SCSS/Less PreprocessorsPro only: Download a Kit and add the SCSS or Less files into your styling compile
On the DesktopPro only: Download a kit and use its SVGs and ligature-based fonts in apps like Figma or Adobe Creative Suite
With WordPressUse our official Kit-powered WordPress plugin or use a hosted Kit
Other CMSsUse a hosted Kit
With JS FrameworksUse our official React, Vue, and other JS Framework components
With Python or DjangoUse our official Python/Django package
With Ruby on RailsUse our official gem