For those using npm or yarn package managers, you can use the Font Awesome packages to easily keep your project up-to-date with the latest icons and improvements.
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
We’ll cover the basics of choosing the package that best suits your needs, access configuration, tips for which method to use for adding icons, and more!
We have a couple of packages available:
Package
What's in it
What's it good for
fontawesome-pro
All the Version 6 goodness including all the latest features and Pro icons, spanning 5 styles available in 2 families, Classic and our new Sharp. And there's our Brands icon family on top of that too.
Making projects awesome
fontawesome-free
All the Version 6 goodness but just the Free icons
Open Source projects
Basically, the packages contain all the stuff in the Font Awesome for Web download or when downloading a Font Awesome Kit, but bundled as a package. Pick the one that suits your project and follow the steps below to get set up.
1. Configure Access
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
If you're just using the Free package, you can skip this step.
If you plan to use the Pro packages, which contain more icons and styles, you'll need to have an active subscription to a Pro Plan and a valid Pro Package Token and then follow the steps below to configure Pro access for your project.
Keep It Secret, Keep It Safe!
Your super-secret npm token - TOKEN - is private. Don't share it with anyone who shouldn't have it. (You can find it in your account.)
Now that you've got your package token handy, you'll need to configure the @fortawesome scope to use our Pro npm registry. You can set this up globally or per-project.
Set Up npm Token for All Projects
This global setup will allow any of your projects to use the Font Awesome package and your token. For the global set up, run:
This per-project setup lets you configure each project individually, which can be good for teams and CI/CD.
To authenticate when using npm or yarn v1, create a .npmrc file in the root of your project (or wherever your package.json file lives). For yarn v2 you will need to create a .yarnrc.yml file. Then add one of the following snippets to the file.
There are two options to for installing the Font Awesome packages:
Install
What You Get
All The Things
The Free and Pro packages include not only the icons in all the styles, but also all the supporting files to make them render. This is the easiest and most common installation. Follow the steps below for this installation.
Certain Specific Things
You can start with just the core javascript files and then select specific styles of icons. This gives you more control if you plan to use our Javascript API, a Javascript component, tree-shaking, or just want to fine-tune what gets included. Follow the steps for Javascript API for this installation.
The Pro Package
Once you have global or per-project access setup, you can install the Version 6 Pro package via npm or yarn:
npminstall--save @fortawesome/fontawesome-pro
yarnadd @fortawesome/fontawesome-pro
Or if you're using environment variables, you can do this instead:
It is recommended to store the token in an environment variable in order to avoid to commit it in a public repository.
Make sure that the environment variable is available and readable by the package manager, this may be the cause of
authentication issues on remote servers.
Use the Public Repository
If your application needs to use the Public Repository, ensure that the above configuration is not set.
Switching from Private to Public Repository (and vice versa)
When switching from the Private Repository to the Public Repository, remove the currently installed Font Awesome packages from the lock file. The specific command to do this depends on the package manager you are using (yarn or npm).
If a global configuration is provided for Font Awesome Pro, it is possible to use per-project configuration for projects that require Font Awesome Free, so that the lock files are not overwritten with references to the Private npm Repository.
# per-project configuration example for `yarn` to force the usage of the Public Repository
@fortawesome:registry=https://registry.yarnpkg.com