# Using a Package Manager Learn how to install and use Font Awesome packages in your web development workflow. > For those using package managers (such as `npm`, `yarn`, or `pnpm`), you can use the Font Awesome packages to keep your project up-to-date with the latest icons and improvements. We package up our icons and Styling Toolkits for project use in a few different ways. | Package Type | Description | | --------------------------------------------------- | -------------------------------------------------------------- | | [Kit Package](#kit-packages---recommended) | Custom package, Pro+ icons | | [SVG Icon Packages](#svg-icon-packages) | Individual core toolkit + style packages | | ["All" Inclusive Packages](#all-inclusive-packages) | One package with everything except Pro+ icons (which is a LOT) | We recommend using a Kit package, but read on and select the package that is right for your project. ### Kit Packages Recommended! [Font Awesome Kits](/web/setup/use-kit.md) are the **most efficient and customized way** to get just the Font Awesome icons you need into your project when using a package manager! A Kit package will contain whatever you put into your Kit including: - Any individual icons or styles that you've added to your [subset](/web/dig-deeper/subsetting.md) - including Pro+ icons if you have a Pro+ plan! - Uploaded [Custom Icons](/web/add-icons/upload-icons.md) - Font Awesome's core Styling Toolkit A Kit and its package are subsetted and optimized so it will not include any icon styles and features you have not enabled. Talk about lean and mean! Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages. ### SVG Icon Packages These packages are JavaScript-based and replace any `` instances with `` icons. They also handle loading the proper CSS into your page to render those icons. SVG Icon Packages are great to use alongside our official Font Awesome [Vue.js](/web/use-with/vue.md), [React](/web/use-with/react.md), and other JavaScript components, or installing and using with our JavaScript API. | Package Name | What's included | Availability | | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------- | | `free-brands-svg-icons` | [Brands Icon Pack](https://fontawesome.com/icons/packs/brands) | Free | | `free-solid-svg-icons` | [Free Classic Solid Icons](https://fontawesome.com/search?o=r&ic=free&s=solid&ip=classic) | Free | | `free-regular-svg-icons` | [Free Classic Regular Icons](https://fontawesome.com/search?o=r&ic=free&s=regular&ip=classic) | Free | | `pro-solid-svg-icons` | [Pro Classic Solid Icons](https://fontawesome.com/search?o=r&ic=pro&s=solid&ip=classic) | [Pro only](https://fontawesome.com/plans) | | `pro-regular-svg-icons` | [Pro Classic Regular Icons](https://fontawesome.com/search?o=r&ic=pro&s=regular&ip=classic) | [Pro only](https://fontawesome.com/plans) | | `pro-light-svg-icons` | [Pro Classic Light Icons](https://fontawesome.com/search?o=r&ic=pro&s=light&ip=classic) | [Pro only](https://fontawesome.com/plans) | | `pro-thin-svg-icons` | [Pro Classic Thin Icons](https://fontawesome.com/search?o=r&ic=pro&s=thin&ip=classic) | [Pro only](https://fontawesome.com/plans) | | `sharp-solid-svg-icons` | [Sharp Solid Icons](https://fontawesome.com/search?o=r&s=solid&ip=sharp) | [Pro only](https://fontawesome.com/plans) | | `sharp-regular-svg-icons` | [Sharp Regular Icons](https://fontawesome.com/search?o=r&s=regular&ip=sharp) | [Pro only](https://fontawesome.com/plans) | | `sharp-light-svg-icons` | [Sharp Light Icons](https://fontawesome.com/search?o=r&s=light&ip=sharp) | [Pro only](https://fontawesome.com/plans) | | `sharp-thin-svg-icons` | [Sharp Thin Icons](https://fontawesome.com/search?o=r&s=thin&ip=sharp) | [Pro only](https://fontawesome.com/plans) | | `duotone-solid-svg-icons` | [Duotone Solid Icons](https://fontawesome.com/search?o=r&s=solid&ip=duotone) | [Pro only](https://fontawesome.com/plans) | | `duotone-regular-svg-icons` | [Duotone Regular Icons](https://fontawesome.com/search?o=r&s=regular&ip=duotone) | [Pro only](https://fontawesome.com/plans) | | `duotone-light-svg-icons` | [Duotone Light Icons](https://fontawesome.com/search?o=r&s=light&ip=duotone) | [Pro only](https://fontawesome.com/plans) | | `duotone-thin-svg-icons` | [Duotone Thin Icons](https://fontawesome.com/search?o=r&s=thin&ip=duotone) | [Pro only](https://fontawesome.com/plans) | | `sharp-duotone-solid-svg-icons` | [Sharp Duotone Solid Icons](https://fontawesome.com/search?o=r&s=solid&ip=sharp-duotone) | [Pro only](https://fontawesome.com/plans) | | `sharp-duotone-regular-svg-icons` | [Sharp Duotone Regular Icons](https://fontawesome.com/search?o=r&s=regular&ip=sharp-duotone) | [Pro only](https://fontawesome.com/plans) | | `sharp-duotone-light-svg-icons` | [Sharp Duotone Light Icons](https://fontawesome.com/search?o=r&s=light&ip=sharp-duotone) | [Pro only](https://fontawesome.com/plans) | | `sharp-duotone-thin-svg-icons` | [Sharp Duotone Thin Icons](https://fontawesome.com/search?o=r&s=thin&ip=sharp-duotone) | [Pro only](https://fontawesome.com/plans) | | `fontawesome-svg-core` | [SVG Core](/web/dig-deeper/svg-core.md) used as subsetting tool or base libraries for larger integrations | Free | ### All Inclusive Packages

Using pro icons? We recommend using a subsetted Kit package!

The full fontawesome-pro package contains a lot of extras that you don't need. We recommend using a subsetted [Kit package](#svg-icon-packages) or [individual icon packages](#svg-icon-packages). Either of these options will use much less bandwidth and will help keep things performant. All inclusive packages contain ALL the Font Awesome icons and supporting assets in ALL the formats. These packages are the same as the [Font Awesome download](https://fontawesome.com/download) - whether Free or Pro - for the web. They contain all CSS, Web Fonts, SCSS, and SVG assets. But **these packages are really huge and may have performance and npm package bandwidth usage implications** if not used responsibly. | Package Name | What's included | Availability | | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | | `fontawesome-free` | Web Fonts, SVGs, CSS, Sass, and core toolkit for all Free icons | Free | | `fontawesome-pro` | Web Fonts, SVGs, CSS, Sass, and core toolkit for all Pro families (Classic, Duotone, Sharp, and Sharp Duotone) in all styles (Solid, Regular, Light, and Thin) but **does not include Pro+ icons** | [Pro only](https://fontawesome.com/plans) | ## 1. Configure Pro Package Access

Using only Free packages? Skip to Step 2!

If you're installing and using only Free packages, you can [skip to Install Your Package](#2-install-your-package) since setting up access tokens isn't needed in that case. 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](https://fontawesome.com/plans) and a valid [Pro Package Token](https://fontawesome.com/account#pro-package-tokens) and then follow the steps below to configure Pro access for your project.

Keep It Secret, Keep It Safe!

Your super-secret npm token is private. Don't share it with anyone who shouldn't have it. (You can find it in your account as the "Package Token".) Your package token gives you access to our registry, `npm.fontawesome.com`. In the next steps we'll configure specific [NPM scopes](https://docs.npmjs.com/cli/v9/using-npm/scope) to use this registry. ### Project-specific Using Configuration Files This per-project setup lets you configure each project individually, which can be good for teams and CI/CD. To authenticate when using **npm, pnpm, or yarn v1**, create a `.npmrc` file in the root of your project (or wherever your package.json file lives). For **yarn** (version `2.x` or later) you will need to create a `.yarnrc.yml` file. Then add one of the following snippets to the file. #### For Kit Packages If you've subsetted a Kit or [uploaded icons](/web/add-icons/upload-icons.md) to a specific [Kit](https://fontawesome.com/kits) and want to use those through a package manager, add this to your package manager configuration. **.npmrc:** **.yarnrc.yml:** ```bash @fortawesome:registry=https://npm.fontawesome.com/ @awesome.me:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX ``` ```bash npmScopes: fortawesome: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" awesome.me: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" ``` #### For SVG Icons and All Inclusive Packages **.npmrc:** **.yarnrc.yml:** ```bash @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX ``` ```bash npmScopes: fortawesome: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" ```

Wait, did you misspell "fontawesome"?

Oh, you mean "fort" instead of "font"? Noticed that, did you? It's not misspelled... A while back, we created "fortawesome" with an "R" to span across multiple products. We should have thought through the "r" "n" confusion better. #### Can I do both? Yep. You can specify both `@awesome.me` and `@fortawesome` in the same config files. This is useful if you are in the process of migrating to the newer Kit Packages. **.npmrc:** **.yarnrc.yml:** ```bash @awesome.me:registry=https://npm.fontawesome.com/ @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX ``` ```bash npmScopes: fortawesome: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" awesome.me: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" ``` ### Using Environment Variables A more secure way to configure your `.npmrc` or `.yarnrc.yml` files is with environment variables. This can help prevent tokens leaking and make token rotation easier (should you need to perform it). While your `.npmrc` or `.yarnrc.yml` is normally checked in to your source code repository, environment variables values should not be. Using environment variables for your token is a way to keep from checking it in to your source code repository, which prevents it from being shared with others who should not have it. This example uses `FONTAWESOME_PACKAGE_TOKEN` as the environment variable name. **.npmrc:** **.yarnrc.yml:** ```bash @fortawesome:registry=https://npm.fontawesome.com/ @awesome.me:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN} ``` ```bash npmScopes: fortawesome: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN} awesome.me: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN} ``` ### Basic Authentication for Proxys If you're using a proxy, you can use basic authentication in your .npmrc file. **.npmrc:** **.yarnrc.yml:** ```bash @fortawesome:registry=https://npm.fontawesome.com/ @awesome.me:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:username=token //npm.fontawesome.com/:_password=BASE64-ENCODED-TOKEN ``` ```bash npmScopes: fortawesome: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthIdent: "token:BASE64-ENCODED-TOKEN awesome.me: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" npmAuthIdent: "token:BASE64-ENCODED-TOKEN ``` You must use a Base64-encoded string for the `BASE64-ENCODED-TOKEN` value. Here's a quick utility you can use. Paste your package token and hit the "Encode" button to get the Base64-encoded version. ## 2. Install Your Package(s) Once you have configured access global or per-project access setup (for Pro packages) and have your project set up, you're ready to install Font Awesome via packages. ### Installing a Kit Package If you're using a [Kit](https://fontawesome.com/kits), you can install a Kit Package with the following command - just make sure to replace `KIT_CODE` with your specific Kit's ID: **npm:** **yarn:** ```bash npm install --save '@awesome.me/kit-KIT_CODE@latest' ``` ```bash yarn add '@awesome.me/kit-KIT_CODE@latest' ``` Or if you're using environment variables, you can do this instead: ```bash FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save '@awesome.me/kit-KIT_CODE@latest' ``` ### Installing Pro SVG Icon Packages Manually choose and install the particular icon styles you want to use as individual packages alongside the utility-based SVG Core package. **npm:** **yarn:** ```bash # Installing SVG Core for subsetting and base libaries. npm install --save @fortawesome/fontawesome-svg-core # Select the styles you need and install them with the following commands. npm install --save @fortawesome/pro-solid-svg-icons npm install --save @fortawesome/pro-regular-svg-icons npm install --save @fortawesome/pro-light-svg-icons npm install --save @fortawesome/pro-thin-svg-icons npm install --save @fortawesome/pro-duotone-svg-icons npm install --save @fortawesome/duotone-regular-svg-icons npm install --save @fortawesome/duotone-light-svg-icons npm install --save @fortawesome/duotone-thin-svg-icons npm install --save @fortawesome/sharp-solid-svg-icons npm install --save @fortawesome/sharp-regular-svg-icons npm install --save @fortawesome/sharp-light-svg-icons npm install --save @fortawesome/sharp-thin-svg-icons npm install --save @fortawesome/sharp-duotone-solid-svg-icons npm install --save @fortawesome/sharp-duotone-regular-svg-icons npm install --save @fortawesome/sharp-duotone-light-svg-icons npm install --save @fortawesome/sharp-duotone-thin-svg-icons ``` ```bash # Installing SVG Core for subsetting and base libaries. yarn add @fortawesome/fontawesome-svg-core # Select the styles you need and install them with the following commands. yarn add @fortawesome/pro-solid-svg-icons yarn add @fortawesome/pro-regular-svg-icons yarn add @fortawesome/pro-light-svg-icons yarn add @fortawesome/pro-thin-svg-icons yarn add @fortawesome/pro-duotone-svg-icons yarn add @fortawesome/duotone-regular-svg-icons yarn add @fortawesome/duotone-light-svg-icons yarn add @fortawesome/duotone-thin-svg-icons yarn add @fortawesome/sharp-solid-svg-icons yarn add @fortawesome/sharp-regular-svg-icons yarn add @fortawesome/sharp-light-svg-icons yarn add @fortawesome/sharp-thin-svg-icons yarn add @fortawesome/sharp-duotone-solid-svg-icons yarn add @fortawesome/sharp-duotone-regular-svg-icons yarn add @fortawesome/sharp-duotone-light-svg-icons yarn add @fortawesome/sharp-duotone-thin-svg-icons ``` Or if you're using environment variables, you can do this instead: ```bash FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/pro-solid-svg-icons ``` ### Installing Free SVG Icon Packages Similarly, you can manually choose Free icon styles to install and include in your project (alongside the SVG Core package). **npm:** **yarn:** ```bash # Installing SVG Core for subsetting and base libaries. npm install --save @fortawesome/fontawesome-svg-core # Select the styles you need and install them with the following commands. npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/free-regular-svg-icons npm install --save @fortawesome/free-brands-svg-icons ``` ```bash # Installing SVG Core for subsetting and base libaries. yarn add @fortawesome/fontawesome-svg-core # Select the styles you need and install them with the following commands. yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/free-regular-svg-icons yarn add @fortawesome/free-brands-svg-icons ``` ### Installing The Pro All Inclusive Package You can install all of the assets we include in Font Awesome Pro for the Web's download via this package. **Pro All Inclusive Package (npm):** **Pro All Inclusive Package (yarn):** ```bash npm install --save @fortawesome/fontawesome-pro ``` ```bash yarn add @fortawesome/fontawesome-pro ``` Or if you're using environment variables, you can do this instead: ```bash FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/fontawesome-pro ``` ### Installing The Free All Inclusive Package Similarly, you can install all of the Free assets we include in Font Awesome Free for the Web's download via this package. **All the Things (npm):** **All the Things (yarn):** ```bash npm install --save @fortawesome/fontawesome-free ``` ```bash yarn add @fortawesome/fontawesome-free ``` --- ## You're All Set! Your packages are now installed and are all set to be used in your project. If you've installed your Kit Package or an All Inclusive Package, you're good to start [adding](/web/add-icons/how-to.md) and [styling](/web/style.md) icons in your project. With our SVG Icon Packages, continue onto next steps such as using our [Vue](/web/use-with/vue.md), [React](/web/use-with/react.md), [Ember](/web/use-with/ember.md), and other [JavaScript](/web/use-with/angular.md) [Components](/web/use-with/react-native.md). Or check out our [JavaScript API](/apis/javascript/get-started.md). ### Remember to Cache Your CI Dependencies! If you're using Continuous Integration (CI) in your project's workflow, remember to tune your CI to keep your package bandwidth usage low. [We'll show you how](/web/dig-deeper/continuous-integration.md). ## Troubleshooting + More Info Use the following commands to get configuration information for your package manager: | Package Manager | Configuration Info Command | | --------------- | --------------------------------------------------------------- | | npm | `npm config list` | | yarn | `yarn config --why` ( pay attention to `npmScopes` entry) | | pnpm | `pnpm config list` (pay attention to the `config from` section) | ### Confirm Credentials for Private Repository use If your application needs to use the private repository, ensure that credentials are set. Here's some expected output for each package management tool… **npm:** **yarn:** **pnpm:** ```js {4} ; "user" config from /path/to/.npmrc # ... @fortawesome:registry = "https://npm.fontawesome.com/" //npm.fontawesome.com/:_authToken = REDACTED ``` ```js {5} YN0000: npmScopes, /path/to/.yarnrc.yml Map(1) { 'fortawesome' => Map(6) { 'npmAlwaysAuth' => true, 'npmAuthIdent' => null, 'npmAuthToken' => 'REDACTED', 'npmAuditRegistry' => null, 'npmPublishRegistry' => null, 'npmRegistryServer' => 'https://npm.fontawesome.com/' } } ``` ```js {1} //npm.fontawesome.com/:_authToken=REDACTED @fortawesome:registry=https://npm.fontawesome.com/ prefix=/path/to/nodejs/18.13.0/.npm registry=https://registry.npmjs.org/ user-agent=pnpm/7.29.1 npm/? node/v18.13.0 darwin arm64 # ... ``` ### Token in environment variable 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. You'll see `4xx` HTTP status codes if this is the case. ### Switching from Private to Public Repository 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 you are brave enough, you can hand-edit these files. ### npm Repositories Here's a summary of our repositories alongside what they provide and what requirements each has. | Name | Public? | Pro Sub? | Kit | Pro | Free | | :----------------------------- | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | | `https://npm.fontawesome.com` | No | Yes | Yes | Yes | Yes | | `https://registry.yarnpkg.com` | Yes | No | No | No | Yes | | `https://registry.npmjs.org` | Yes | No | No | No | Yes | ### Supported Package Managers We officially support the following Package Managers: | Name | URL | | -------------------------------- | ----------------------------------------------------------- | | npm | https://www.npmjs.com/ | | yarn (version `2.x` and greater) | https://yarnpkg.com/ | | pnpm | https://pnpm.io/ |