Whether you’re a FA n00b or an old pro, we've worked hard to make upgrading to Version 6 as smooth and easy as possible. Learn more about what's changed and how to update your project.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
If you are currently hosting Font Awesome 5 yourself or installed Font Awesome using a package, you'll need to swap out and disconnect the old Version 5 files, then place and hook up the new Version 6 files in your project.
1. Locate and remove Any Version 5 Files From Your Project
Loading two different versions of Font Awesome may cause conflicts, so you’ll need to find the location of the old files and remove them.
Finding the location of the Version 5 files depends on how you installed Font Awesome. Here are a couple of examples of possible project set-ups:
Find the fontawesome files in your project directories:
project_root
|__assets
|__fontawesome
Example installed with npm
project_root
|__node_modules
|[email protected]
|__version_5_files
You can safely delete any of old version files since you'll be replacing them with the new Version 6 files in the next step.
2. Download and Install Version 6
Next, download Version 6 and unpack the files and icons, or update your Font Awesome packages/components to Version 6, depending on what works best for your project.
3. Update Version 5 References to Point to Version 6 Files
You've removed the old Version 5 icons and files and added in the new Version 6 icons and files, and now you need to update your old Version 5 references to point to the new Version assets you've added.
For projects with HTML templates, you'll need to edit the script or CSS links in the head of your templates
Here is an example of adding the Version 6 SVG + JS files:
<head><!-- all.js loads all styles and icons + include all v5 backwards compatibility by default --><scriptdefersrc="/your_path_to_version_6_files/js/all.js"></script></head><body><!-- Your icons should show up just as before --></body>
And here is an example of adding the Version 6 Web Fonts + CSS files:
<head><!-- all.css loads all styles and icons + include all v5 backwards compatibility by default --><linkhref="/your_path_to_version_6_files/css/all.css"rel="stylesheet"></head><body><!-- Your icons should show up just as before --></body>
You may also want to only load some styles:
<head><!-- Add the base CSS plus Solid + Brands styles --><linkhref="/your_path_to_version_6_files/css/fontawesome.css"rel="stylesheet"><linkhref="/your_path_to_version_6_files/css/brands.css"rel="stylesheet"><linkhref="/your_path_to_version_6_files/css/solid.css"rel="stylesheet"><!-- update existing v5 CSS to use v6 icons and assets --><linkhref="/your-path-to-fontawesome/css/v5-font-face.css"rel="stylesheet"/></head><body><!-- Your icons should show up just as before --></body>
If You're Unable to Remove Font Awesome 5
If you can't remove a previous version of Font Awesome from your project (e.g. it's bundled in a theme or plugin you're using), it's important to make sure that you include the v6 files after those previous versions are included in the <head> of your project's HTML. This is extra important when including the v5-font-face.css utility.
<head><!-- Example: A theme's CSS that uses an older version of Font Awesome that can't be removed --><linkhref="/your_path_to_theme_that_uses_version_5_files"rel="stylesheet"/><!-- Add the base CSS plus Solid + Brands styles **after previous versions** --><linkhref="/your_path_to_version_6_files/css/fontawesome.css"rel="stylesheet"><linkhref="/your_path_to_version_6_files/css/brands.css"rel="stylesheet"><linkhref="/your_path_to_version_6_files/css/solid.css"rel="stylesheet"><!-- update existing v5 CSS to use v6 icons and assets **after previous versions** --><linkhref="/your-path-to-fontawesome/css/v5-font-face.css"rel="stylesheet"/></head><body><!-- Your icons should show up and render using Font Awesome 6 --></body>
Backward Compatibility When Hosting Yourself
We've included files to help make Font Awesome 6 easily backward compatible with older versions. Learn how you can easily get your Web Fonts or SVG project using v6 icons without touching a single <i> element or pseudo-element CSS rule.
Upgrading should be easy. But Downgrading could be difficult.
Version 6 has some new icons, styles, and stylinggoodies. Once you've started using them in your project, downgrading to Version 5 may result in missing icons and styling. If you do downgrade, make sure you remove anything that's Version 6 specific.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
Your project will now load Version 6 and render any existing icons using our newest and freshest icons and options. Are you running into trouble? Check out our troubleshooting guide for answers to common questions about using Font Awesome on the Web.