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 showing a Kit that includes 12 hand-picked icons
It comes with amazing features like:
- Easy Icon Selection: Serve only the icons you need - whether it's by icon, by style, or the full library - so your pages load lightning-fast
- Upload Your Own Icons: Add your own icons and serve them alongside Font Awesome ones!
- Customize for What You Need: Picky about Web Font or SVG? Want JS or need a CSS only embed option? Want to download or use as an npm package? Kits have you covered!
- Older Version Compatibility: Upgrade to the latest without changing all your icon references
- Conflict Detection: Help detect conflicting versions of Font Awesome in complex dev environments
- ... 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 on fontawesome.com or from your Account page. 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. Select Your Icons
There are 4 options when it comes to icon selection:
| Name | Details |
|---|---|
| All our Free icons - Solid and Regular styles, plus Brands - bundled together. They're fast to load, open-source friendly, and a great way to try out Font Awesome. | |
| Includes ALL the icons Font Awesome you have access to in your plan. It's the easy option - All the icons will be available in your project, but will result in the largest Kit size. | |
| Includes all icons in only the styles you choose to include. A nice medium option to slim down the size of your Kit but still have the flexibility to try out a variety of icons. | |
| Hand-pick exactly the icons your project needs. Smallest Kit, fastest load. The most nitty-gritty option for full control. |
2. 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.
- Create a Package (optional): If you plan to use your Kit as a package, you can check off the package option. You can also do this from your Kit's Settings tab later.
- 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 then copy the new CSS embed code, which will load Font Awesome using only CSS, no JavaScript.
Heads up: You'll need to set your Kit to use v7 with Web Fonts, and make sure you're okay with the pros and cons of this method:
| Pros of CSS-only Kits | Cons of CSS-only Kits |
|---|---|
| Prevents page repaints or jumping UI | Blocks the page from loading until the icons are ready |
| Loads without JavaScript | Cannot set your Kit to use SVG icons |
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/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. | Varies with initial Icon Selection |
| 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 |
| Icon Selection | Choose your Icon Selection mode: Full Library, By Style, or By Icon. (By Icon lets you hand-pick individual icons.) | user selected |
| 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 v4 or v5 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!
The Font Awesome CDN only supports v5 and below so you need to use a Kit for the latest version.
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 v6.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 |
LICENSE.txt |
License detailing permitted use of Pro/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.
Head over to the Desktop Kit Docs to get the scoop on what's in the download and how to use icons.
Using Kit Packages
You can use and manage your Kit's assets as a package with package managers like npm or yarn!
A Kit package will contain whatever you put into your Kit. This includes the icons or styles you've selected in Icon Selection settings for your Kit, any uploaded Custom Icons, and Font Awesome's core Styling Toolkit.
Remember: Your Kit package will only include the icons or styles you've selected, and if you make changes, you'll need to update your package.
Enable Package Installation for Your Kit
To make your Kit available as a package:
- Go to your Kit's Settings
- Check the "Enable Installing Your Kit as a Package" option
- Save your changes
- Check the Kit's Package tab for configuration details and usage instructions
Tune Your Kits
"By Icon" or "By Style" Subsetted Kits
If you have set your Kit's Icon Selection Settings to "By Icon" or "By Style", your Kit will include ONLY the icons or styles 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.
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!
Pro Kits offer multiple Icon Selection modes to help you optimize performance:
-
"By Style" to include only selected styles
-
"By Icon" to hand-pick the exact icons your project needs for the smallest Kit and fastest load.
Learn More About Performance with Font Awesome
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:
Limit your Kit to certain domains
-
Adjust Your Kit Settings: Go to your Kit settings and scroll down to the Domains section.
-
Add Domains: 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.) Make sure to 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.
-
Save Your Kit: Make sure to Save your Kit. Once it's saved, it will update within minutes and only load icons on the domains you entered.
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 may consider upgrading your 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 Preprocessors | Pro only: Download a Kit and add the SCSS 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 |