Host Yourself - SVG + JS
If you like control, you can host Font Awesome yourself, and you can choose to use SVG + JS described below or Web Fonts + CSS to get icons into your projects.
Set up with SVG+JS
Inside the Font Awesome Download or package, you’ll find the files you need. The /js folder contains the core styling, utilities, and icons for all of Font Awesome’s families (Classic, Sharp, and Brands) as well as style options (Solid, Regular, Light, Duotone, and Thin).
| Which Files and Folders | What’s in there |
|---|---|
/js | Icons and scripts for each style, or all of them at once. |
Add Font Awesome Files to Your Project
Copy both the fontawesome.js loader and the .js files for the styles you’d like to use into your project’s static assets directory (or wherever you prefer to keep front end assets or vendor stuff). Be sure to include the core file - /js/fontawesome.js - as well as the JS files for any individual styles you want to use.
Copy the core and specific style files you need into your project directories
Here’s a handy table that shows which file goes with which style:
| Icon Style | Availability | JS Filename |
|---|---|---|
| Brands | Free | brands.js or brands.min.js |
| Solid | Free | solid.js or solid.min.js |
| Regular | Pro only | regular.js or regular.min.js |
| Light | Pro only | light.js or light.min.js |
| Thin | Pro only | thin.js or thin.min.js |
| Duotone Solid | Pro only | duotone.js or duotone.min.js |
| Duotone Regular | Pro only | duotone-regular.js or duotone-regular.min.js |
| Duotone Light | Pro only | duotone-light.js or duotone-light.min.js |
| Duotone Thin | Pro only | duotone-thin.js or duotone-thin.min.js |
| Sharp Solid | Pro only | sharp-solid.js or sharp-solid.min.js |
| Sharp Regular | Pro only | sharp-regular.js or sharp-regular.min.js |
| Sharp Light | Pro only | sharp-light.js or sharp-light.min.js |
| Sharp Thin | Pro only | sharp-thin.js or sharp-thin.min.js |
| Sharp Duotone Solid | Pro only | sharp-duotone-solid.js or sharp-duotone-solid.min.js |
| Sharp Duotone Regular | Pro only | sharp-duotone-regular.js or sharp-duotone-regular.min.js |
| Sharp Duotone Light | Pro only | sharp-duotone-light.js or sharp-duotone-light.min.js |
| Sharp Duotone Thin | Pro only | sharp-duotone-thin.js or sharp-duotone-thin.min.js |
Reference Font Awesome in Your Project
Link the core fontawesome.js file along with the JS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to. We recommend referencing the fontawesome.js loader last. Make sure the paths correctly point to where you placed the files!
Here’s an example html page with the file links in the <head> and a couple of icons in the content.
<head> <!-- Our project just needs Font Awesome Solid + Brands --> <script defer src="/your-path-to-fontawesome/js/brands.js"></script> <script defer src="/your-path-to-fontawesome/js/solid.js"></script> <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script> <script defer src="/your-path-to-fontawesome/js/sharp-thin.js"></script> <script defer src="/your-path-to-fontawesome/js/duotone-thin.js"></script> <script defer src="/your-path-to-fontawesome/js/sharp-duotone-thin.js"></script></head><body> <!-- uses solid style --> <i class="fa-solid fa-user"></i>
<!-- uses brand style --> <i class="fa-brands fa-github-square"></i>
<!-- uses pro styles --> <i class="fa-sharp fa-thin fa-dog"></i> <i class="fa-duotone fa-thin fa-dog"></i> <i class="fa-sharp-duotone fa-thin fa-dog"></i></body>Just this once, we recommend letting things go to your head.
Yuss! You’re Ready to Add Icons
Like Anakin said, it’s woooorking! All of our icons are now ready to do your project’s bidding. Learn how to add them to your project and then use their power to bring order and style to your UI!
Alternate Install: Using all.js
In the /js folder, you may have noticed a file named all.js. This file contains the core styling and utilities PLUS all of the icons in all the Classic styles in Font Awesome. (The Sharp family is not included in the all.js file - you’ll need to the Sharp .js files separately.)
It’s a handy file if you’ll be using all the icon styles or testing out different styles as you develop your project. But if you’re using just a couple of styles, we don’t recommend it for production sites since loading all of the icons isn’t great for performance.
If you’d like to use the all.js, just copy it into your project’s static assets directory, or wherever you prefer to keep front-end assets or vendor stuff.
Then, add a link to the /your-path-to-fontawesome/js/all.js file into the <head> of each template or page where you want to use Font Awesome icons.
Hosting Your Own Downloaded Kit
Starting with version 6.4, you can now download a Kit and host it yourself just like you do with Font Awesome! To download your Kit, make sure the Kit’s version in Settings is set to “Latest 6.x” or if you selected a specific version, it needs to be at least 6.4. Then from the Set Up tab in your Kit, you’ll see the options for downloading.
Custom Icons in Downloaded Kits
If you have custom icons in your Kit, they will be included in your Kit download. You’ll find these additional files included in the download zip:
| Path to the files | What the files do |
|---|---|
/css/custom-icons.css | Handles the display of custom icons with Web Fonts |
/js/custom-icons.js /js/custom-icons.min.js | Handles the display of custom icons with SVG+JS |
/sprites/custom-icons.svg | All your custom icons in one SVG sprite |
/svgs/custom-icons/ | Folder containing all your custom icons as SVGs |
/webfonts/custom-icons.woff /webfonts/custom-icons.ttf | Custom icon font in WOFF2 and TTF formats |
/scss/custom-icons.scss and /less/custom-icons.less | Sass (SCSS) and Less Preprocessor partials that handle the display of custom icons with Web Fonts |
These files will work the same as the Font Awesome files and assets. And if you are using all.js or all.css, your custom icons will be included in those, though for performance reasons, we recommend adding just the files you are using in your project.
Here’s an example project using Sharp Solid and custom icons from a downloaded Kit:
<head> <!-- Our project just needs Font Awesome Sharp Solid + our Custom Icons --> <script defer src="/your-path-to-fontawesome/js/sharp-solid.js"></script> <script defer src="/your-path-to-fontawesome/js/custom-icons.js"></script> <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script></head><body> <!-- uses sharp solid style --> <i class="fa-sharp fa-solid fa-user"></i> <!-- uses Kit custom icon style --> <i class="fa-kit fa-your-custom-icon-name"></i></body>Using Kit custom icons is easy peasy.
Older Version Compatibility
If your project is using an older version of Font Awesome, we’ve got you covered with backward compatiiblity. That means you won’t have to update any icon names in your project - we’ll translate any older version icon names, style syntax, and CSS pseudo-element icon references automatically. Here’s how to enable that support for the previous version you need to support:
Version 5 Compatibility
Once loaded, our SVG + JS framework handles translating any Font Awesome 5 icon names, style syntax, and CSS pseudo-element icon references automatically. This is true when using the js/all.js file or using only certain styles.
Version 4 Compatibility
If your project contains Font Awesome 4 icon references, add the v4-shims.js file after any v6 JS files you’re including. That file will map v4 icon names to icons in the latest version of Font Awesome.
Here’s an example:
<head> <!-- Add the v6 core styles and then select the individual styles you need, like Solid and Brands --> <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script> <script defer src="/your-path-to-fontawesome/js/solid.js"></script> <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
<!-- support v4 icon references/syntax --> <script defer src="/your-path-to-fontawesome/js/v4-shims.js"></script></head>If you need more help upgrading an existing project to a newer version of Font Awesome, check out our upgrading guides.