Skip to content
Check out the all-new Web Awesome AND get an exclusive lifetime discount on Font Awesome!
Live on Kickstarter!

Kit Package API

Font Awesome Kits can now be installed using npm-compatible package managers. Learn about what’s included and how to use the package in JavaScript and other applications.

What’s in the package

AssetLocationWhat it’s good for
CSScss/*StyleSheets ready to work in any modern browser using the files in webfonts directory
Lessless/*Less files using the webfonts directory
SCSSscss/*SCSS (Sass) files using the webfonts directory
Webfont Fileswebfonts/*WOFF2 and TTF webfont files for use with CSS, Less, and SCSS
Auto loading JavaScriptjs/*Easier to use JavaScript files for including in <script> tags directly in the browser using SVG + JS technology
ESM & CommonJS JavaScriptmodules/*SVG Core-compatible JavaScript files suitable for use with build tools, JS frameworks, or <script type="module"> using SVG + JS technology
SVG Spritessprites/*SVG Sprites for all icons
SVG Filessvg/*Individual SVG files for all icons
Data filesmetadata/*JSON and Yaml files containing icon data

Using the JavaScript API

A modern package for a modern world

The Kit Package uses the newer exports feature of package.json configurations. Most newer build tools and systems understand this but older tools may struggle to find modules you try to import.

byPrefixAndName[prefix][iconName]

This object contains all icons in a Kit. If you’ve subsetted a Kit this can be an easy to understand to use.

Replace KIT_CODE with your Pro Kit unique token

If you’ve added the “house icon” to your Kit, you could do the following.

import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'
byPrefixAndName.fas['house']

Objects from byPrefixAndName are organized by prefix, then icon name.

byPrefixAndName.fas['house']
byPrefixAndName.far['square']
byPrefixAndName.fass['sword']
byPrefixAndName.fab['font-awesome']

Objects With individual icon objects shaped like this.

// Example icon returned
{
prefix: 'fas',
iconName: 'house',
icon: [
576,
512,
[63498,63500,127968,"home","home-alt","home-lg-alt"],
'f015',
'M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'
]
};

Prefix

The prefix fas is one of the following.

Kit Custom Family

StyleAvailabilityPrefixLooks like
KitsPro PlanfakAny icon that you upload
Kits DuotoneComing soon!fakd

Classic Family

StyleAvailabilityPrefixLooks like
SolidFree Planfas
RegularPro onlyfar
LightPro onlyfal
ThinPro onlyfat
BrandsFree Planfab

Duotone Family

StyleAvailabilityPrefixLooks like
SolidPro onlyfad

Sharp Family

StyleAvailabilityPrefixLooks like
SolidPro onlyfass
RegularPro onlyfasr
LightPro onlyfasl
ThinPro onlyfast
DuotoneComing Soon!

all[]

All is an array of every icon for a Kit. This is best if the Kit you are using is using custom subsetting.

import { all } from '@awesome.me/kit-KIT_CODE/icons'

The most useful way to use all is to pair it with the SVG Core Library. The library allows you to register icons you wish to use and look them up in a variety of ways through other APIs and libraries.

import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'
library.add(...all)

The individual icons in the all Array are just like the objects returned from byPrefixAndName.

Icon packs

One step down from using all is to import icons by their family and style.

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas, fad, fasr, fak } from '@awesome.me/kit-KIT_CODE/icons'
library.add(fas, fad, fal)

Icon packs are objects keyed from icon names. But the icon names are prefixed with fa and camel-cased. So square-check becomes faSquareCheck. Since variable names in JavaScript cannot begin with numbers that’s why you see everything starting with fa.

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@awesome.me/kit-KIT_CODE/icons'
library.add(fas.faSquareCheck)

Imports

Kit Custom Family

StyleImport
Kitsimport { fak } from '@awesome.me/kit-KIT_CODE/icons'
Kits DuotoneNot yet available but coming soon!

Classic Family

StyleImport
Solidimport { fas } from '@awesome.me/kit-KIT_CODE/icons'
Regularimport { far } from '@awesome.me/kit-KIT_CODE/icons'
Lightimport { fal } from '@awesome.me/kit-KIT_CODE/icons'
Thinimport { fat } from '@awesome.me/kit-KIT_CODE/icons'
Brandsimport { fab } from '@awesome.me/kit-KIT_CODE/icons'

Duotone Family

StyleImport
Solidimport { fad } from '@awesome.me/kit-KIT_CODE/icons'

Sharp Family

StyleImport
Solidimport { fass } from '@awesome.me/kit-KIT_CODE/icons'
Regularimport { fasr } from '@awesome.me/kit-KIT_CODE/icons'
Lightimport { fasl } from '@awesome.me/kit-KIT_CODE/icons'
Thinimport { fast } from '@awesome.me/kit-KIT_CODE/icons'
DuotoneComing Soon!

Shaking those trees

Using all and icon packs make it hard for build tools to utilize tree shaking. So if that’s something you know you want to use, try using the “Individual icons” import examples below. However, you can accomplish the same goal as tree-shaking by using a Kit that has been custom subsetted. Custom subsetting allows you to select only the family, styles, and icons that you’ll actually be using. That’s the same goal tree-shaking solves but in a less technically-focused way.

Individual icons

You can import individual icons. This has the advantage of being tree-shakable for keeping your bundles small.

import { faSquare } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
// React example
<FontAwesomeIcon icon={faSquare} />

Imports

Kit Custom Family

StyleImport
Kitsimport { faMyIcon } from '@awesome.me/kit-KIT_CODE/icons/kit/custom'
Kits DuotoneNot yet available but coming soon!

Classic Family

StyleImport
Solidimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
Regularimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/regular'
Lightimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/light'
Thinimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/thin'
Brandsimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/brands'

Duotone Family

StyleImport
Solidimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'

Sharp Family

StyleImport
Solidimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'
Regularimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/regular'
Lightimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/light'
Thinimport { faHouse } from '@awesome.me/kit-KIT_CODE/icons/sharp/thin'
DuotoneComing Soon!

Troubleshooting

TypeScript

If you run into import errors when using TypeScript you may need to adjust your TypeScript config.

A common error caused by having the wrong moduleResolution is this.

Cannot find module '@awesome.me/kit-KIT_CODE/icons/classic/solid' or its corresponding type declarations.

To fix this, go into your tsconfig.json file and make sure the moduleResolution is set to value supported by the kit package.

Options
nodenextRecommended
bundlerAlso supported if nodenext does not work for you for some reason.
node16Supported but not recommended because it is currently the same as nodenext and nodenext is forward looking and will be updated to support new Node.js module resolution features as they are added.
nodeUnsupported
classicUnsupported
node10Unsupported
"moduleResolution": "bundler",

Note about incompatible TypeScript defaults

Your TypeScript implementation may default to an incompatible module or moduleResolution option. For example, as of TypeScript 5.4.2 a new project will default to using module: commonjs and will not specify moduleResolution. Unfortunately, when module is “commonjs”, then the default moduleResolution is “node10”, equivalent to “node”, which is not supported.

For more information about the moduleResolution setting, see the official TypeScript docs.

404 Error

If you get this error:

HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.com/@awesome.me%2Fkit-KIT_CODE - Not found

Try running the update command before running the install command.

npm update '@awesome.me/kit-KIT_CODE'
npm install --save '@awesome.me/kit-KIT_CODE@latest'