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 shows what icons are in this Kit

It comes with amazing features like:

Auto or Custom Subsetting: Serve only the icons you need so your pages load lightning-fast
Free or Pro icons
Upload your own icons: Add your own icons and serve them alongside Font Awesome ones!
Auto-Accessibility: Automatically applies accessibility best practices to your icons
Web Font or SVG: Pick how you want your icons to render in your project
JS or CSS only embed options: Choose how you want to get icons into your project, via javascript or javascript-free css-only
Version 4 compatibility: Upgrade to the latest without changing all your icon references
Conflict Detection: Help detect conflicting versions of Font Awesome
… and more!

Creating and Using a Kit

Kits are incredibly versatile. They are the fastest way to get icons into your web projects, using just one line of code. But you can also use them via npm or yarn package, download and self-host, or download to use icons in your desktop apps.

Start from Your Kits Listing

You’ll find a link to your Kits in the main nav or on your account page. From the Kits Listing page, choose one of your existing Kits, or click the “Add New Kit” button to start building a new Kit.

Build a New Kit

When you add a new Kit, we’ll guide you through the set up process so it’s exactly what you need. Here are the steps:

1. Pick Your Styles

Free Icons/Free Kit: Our Free icon styles - Solid and Regular, plus Brands - are bundled together. They’re fast to load, open-source friendly, and a great way to try out Font Awesome.
Pro Pro Styles/Pro Kit: Choose from any of our ever-growing Pro icon styles plus Brands, and you can upload your own custom icons (with or without our Font Awesome icons).

2. Pick Your Delivery Method

Hosted: The easiest way to use Font Awesome. With one line of code, you can get icons onto your site. We’ll host and deliver your icons in a flash!
Pro Self-Host: Download your Kit and include the icons and files into your project.
Pro Package: Use an npm or yarn package to get icons into your project. Using a Kit instead of the full fontawesome package means you can slim it down to just the icons and styles you need.
Pro Download for Desktop: Download your Kit to get the icon SVGs and OTF files to use in your desktop apps.

3. Customize Your Kit

Give your Kit a name: Something memorable like your project name is a good choice. If you leave it blank, we’ll use your Kit’s unique ID.
Pick a Color and Icon: Add some flair to make your Kit easy to identify in your list of Kits on fontawesome.com.

Put Your Kit to Use

From your Kit’s Set Up tab, you’ll find the embed code you need to copy if you’re using a hosted Kit. Add it to the <head> of each template or page of your project that you want to use Font Awesome icons. Or you can select one of the other ways to use a Kit listed your Kit’s Set Up tab.

About CSS-only Embed Codes

For those of you who prefer no JavaScript for “reasons”, you can select the option to use a CSS Kit embed code in the Kit’s Settings tab. Then go to your Kit’s Set Up tab and the copy the new CSS embed code, which will load Font Awesome strictly through CSS.

Heads up: 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 Kits	Cons of CSS-only Kits
No JavaScript	Blocks the page from loading until the icons are ready
No page repaints or jumping UI

Additional Settings

Kits have a number of additional settings which you can access from your Kit’s Settings tab once you create it, so you can tune your Kit to be just what you need.

Kit Feature	Description	Default Setting
Kit Name	An easily identifiable name for your kit (maybe use a project or site name?)	The Kit’s unique ID
Kit Color and Icon	Customize how your Kit looks on fontawesome.com	Yellow, icon is randomly selected
Type of Kit	Free includes all Free icons and is hosted, Pro lets you choose from any Pro icons and allows you to upload custom icons, download, or use as a package	Free for Free accounts, Pro for Pro accounts
Tech	Choose the type of tech you want to use to render your icons, Web Fonts or SVGs.	Web Fonts
Embed method	Change your embed code type from Javascript to CSS-only if you need to avoid using JavaScript in your project. (CSS-only requires using Web Fonts.)	JavaScript
Subset	Choose whether you want to use Auto-Subsetting or pick individual icons with Custom Subsetting. (Custom requires choosing styles and icons.)	Auto-Subsetting
Styles	Select the icon styles you plan to use in your project (i.e. want included in your Kit)	Solid, Regular, and Brands
Font Awesome Version	Select the version of Font Awesome icons and features you want to use	Latest (auto-updates to whatever the latest release is)
Limit Domains	Set which domains are allowed to use this Kit to prevent unauthorized use of your Kit embed code	Open (any domain can use)
Earlier version compatibility	Enables old version 4 or 5 icon names or references	On
Enable npm Download	Creates a package that you can install via npm or yarn for node-based projects	Off
Conflict Detection	Temporarily detects conflicts with other versions of Font Awesome loading in your project	Off

Ready to Get Kitted Up?

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

Set up a Kit

Downloading a Kit

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 & Files	What 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.txt`	License 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 to get the icons and files into your project.

Using a Kit Packages

You can also use your Kit as a npm or yarn package! You’ll need to select Package when you build your Kit, or head over to the Settings tab and check off “Enable NPM Download” and save your settings to generate the package. Then you’ll see a new “Package” tab where you can get the code to load your package and instructions on how to include it in your project.

Check out the Kit Package docs for more details

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

Go to your Kit settings and scroll down to the Domains section.
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.)
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…

Scenario	Use 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 Preprocessors		Pro only: Download a Kit and add the SCSS or Less files into your styling compile
On the Desktop		Pro only: Download a kit and use its SVGs and ligature-based fonts in apps like Figma or Adobe Creative Suite
With WordPress		Use our official Kit-powered WordPress plugin or use a hosted Kit
Other CMSs		Use a hosted Kit
With JS Frameworks		Use our official React, Vue, and other JS Framework components
With Python or Django		Use our official Python/Django package
With Ruby on Rails		Use our official gem