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.
We've packed a lot into Font Awesome 6 including:
If you're using a Kit, upgrading to Version 6 should be fa-rabbit-running-fast.
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.
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.
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.
Download and place into your project:
Or Update Packages and Components:
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. If you used all.js or all.css, we recommend switching to individual styles to improve performance if that's an option for you.
Here is an example of adding the Version 6 SVG + JS files:
<head>
<!-- update any styles .js files you have linked -->
<script defer src="/your_path_to_version_6_files/js/solid.js"></script>
<script defer src="/your_path_to_version_6_files/js/brands.js"></script>
<!-- update the core fontawesome.js file -->
<script defer src="/your_path_to_version_6_files/js/fontawesome.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>
<!-- update the core fontawesome file -->
<link href="/your_path_to_version_6_files/css/fontawesome.css" rel="stylesheet">
<!-- update any styles .css files you have linked -->
<link href="/your_path_to_version_6_files/css/solid.css" rel="stylesheet">
<link href="/your_path_to_version_6_files/css/brands.css" rel="stylesheet">
<!-- update existing v5 CSS to use v6 icons and assets -->
<link href="/your-path-to-fontawesome/css/v5-font-face.css" rel="stylesheet" />
</head>
<body>
<!-- Your icons should show up just as before -->
</body>
You can also update the all.js or all.css file, though we recommend switching to using individual styles if possible to improve performance:
<head>
<!-- update the all.css file -->
<link href="/your_path_to_version_6_files/css/all.css" rel="stylesheet">
</head>
<body>
<!-- Your icons should show up just as before -->
</body>
<head>
<!-- update the all.js file -->
<script defer src="/your_path_to_version_6_files/js/all.js"></script>
</head>
<body>
<!-- Your icons should show up just as before -->
</body>
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 -->
<link href="/your_path_to_theme_that_uses_version_5_files" rel="stylesheet" />
<!-- Add the base CSS plus Solid + Brands styles **after previous versions** -->
<link href="/your_path_to_version_6_files/css/fontawesome.css" rel="stylesheet">
<link href="/your_path_to_version_6_files/css/brands.css" rel="stylesheet">
<link href="/your_path_to_version_6_files/css/solid.css" rel="stylesheet">
<!-- update existing v5 CSS to use v6 icons and assets **after previous versions** -->
<link href="/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>
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.
You might want to go check out the big pile of new icons we've added in Version 6, including the new Sharp Family and Thin Style, or check out all of Version 6's new styling options.
Need to upgrade from Version 4 to Version 6? We've written a custom guide just for you. Check out the v4 upgrading instructions here.