Import Icons

Ready to reference icons? Here’s a primer on Font Awesome icon naming and how to import from icon content packages.

Referencing Icons

We recommend referencing icons in your HTML with a dedicated element you’ll use only for icons. We find the <i> tag perfect for the job. That element will contain: 1) Font Awesome specific style prefix (e.g. fa-solid), and 2) the icon’s name (prefixed with fa-) you want to display.

Pro
Free

<!-- classic solid style of the computer icon -->
<i class="fa-solid fa-computer"></i>

<!-- duotone solid style of the computer icon -->
<i class="fa-duotone fa-solid fa-computer"></i>

<!-- sharp solid style of the computer icon -->
<i class="fa-sharp fa-solid fa-computer"></i>

<!-- sharp duotone solid style of the computer icon -->
<i class="fa-sharp-duotone fa-solid fa-computer"></i>

<!-- solid style of the question circle icon -->
<i class="fa-solid fa-question-circle"></i>

<!-- regular style of the question circle icon -->
<i class="fa-regular fa-question-circle"></i>

<!-- facebook brand icon-->
<i class="fa-brands fa-facebook"></i>

<!-- facebook "f" brand icon-->
<i class="fa-brands fa-facebook-f"></i>

Families + Styles

There are three families of Font Awesome icons - each with a unique look, class name, and @font-face font-family. In both Font Awesome Classic and Sharp, there are five styles of Font Awesome icons. Here are some examples:

Classic Family

Style	Availability	Code
Solid	Free Plan	`<i class="fa-solid fa-user"></i>`
Regular	Pro only	`<i class="fa-regular fa-user"></i>`
Light	Pro only	`<i class="fa-light fa-user"></i>`
Thin	Pro only	`<i class="fa-thin fa-user"></i>`
Brands	Free Plan	`<i class="fa-brands fa-font-awesome"></i>`

Duotone Family

Style	Availability	Code
Solid	Pro only	`<i class="fa-duotone fa-solid fa-user"></i>`
Regular	Pro only	`<i class="fa-duotone fa-regular fa-user"></i>`
Light	Pro only	`<i class="fa-duotone fa-light fa-user"></i>`
Thin	Pro only	`<i class="fa-duotone fa-thin fa-user"></i>`

Sharp Family

Style	Availability	Code
Solid	Pro only	`<i class="fa-sharp fa-solid fa-user"></i>`
Regular	Pro only	`<i class="fa-sharp fa-regular fa-user"></i>`
Light	Pro only	`<i class="fa-sharp fa-light fa-user"></i>`
Thin	Pro only	`<i class="fa-sharp fa-thin fa-user"></i>`

Sharp Duotone Family

Style	Availability	Code
Solid	Pro only	`<i class="fa-sharp-duotone fa-solid fa-user"></i>`
Regular	Pro only	`<i class="fa-sharp-duotone fa-regular fa-user"></i>`
Light	Pro only	`<i class="fa-sharp-duotone fa-light fa-user"></i>`
Thin	Pro only	`<i class="fa-sharp-duotone fa-thin fa-user"></i>`

Icon content “encoded” in JavaScript packages

The first version of Font Awesome used web fonts to encode icon data into a container the browser could use. In Version 5, we added support for SVG which lets us do some fun things with icon data.

Scalable Vector Graphics (SVGs) are made up of text information that can include paths. We use the path data to draw the icons.

Here’s an example from our code icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="72px">
  <path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z" />
</svg>

Since it’s just text, we can easily store this information in JavaScript files. This can be easier to deal with in some projects versus web font files and CSS.

SVG Icon Package names

Icon content packages are segmented by license and style:

Package name	Style	Prefix	Availability
`@fortawesome/free-solid-svg-icons`	Solid	fa-solid	Free
`@fortawesome/free-regular-svg-icons`	Regular	fa-regular	Free
`@fortawesome/free-brands-svg-icons`	Brands	fa-brands	Free
`@fortawesome/pro-solid-svg-icons`	Solid	fa-solid	Pro only
`@fortawesome/pro-regular-svg-icons`	Regular	fa-regular	Pro only
`@fortawesome/pro-light-svg-icons`	Light	fa-light	Pro only
`@fortawesome/pro-thin-svg-icons`	Thin	fa-thin	Pro only
`@fortawesome/pro-duotone-svg-icons`	Duotone	fa-duotone	Pro only
`@fortawesome/duotone-regular-svg-icons`	Duotone Regular	fa-duotone fa-regular	Pro only
`@fortawesome/duotone-light-svg-icons`	Duotone Light	fa-duotone fa-light	Pro only
`@fortawesome/duotone-thin-svg-icons`	Duotone Thin	fa-duotone fa-thin	Pro only
`@fortawesome/sharp-solid-svg-icons`	Sharp Solid	fa-sharp fa-solid	Pro only
`@fortawesome/sharp-regular-svg-icons`	Sharp Regular	fa-sharp fa-regular	Pro only
`@fortawesome/sharp-light-svg-icons`	Sharp Light	fa-sharp fa-light	Pro only
`@fortawesome/sharp-thin-svg-icons`	Sharp Thin	fa-sharp fa-thin	Pro only
`@fortawesome/sharp-duotone-solid-svg-icons`	Sharp Duotone Solid	fa-sharp-duotone fa-solid	Pro only
`@fortawesome/sharp-duotone-regular-svg-icons`	Sharp Duotone Regular	fa-sharp-duotone fa-regular	Pro only
`@fortawesome/sharp-duotone-light-svg-icons`	Sharp Duotone Light	fa-sharp-duotone fa-light	Pro only
`@fortawesome/sharp-duotone-thin-svg-icons`	Sharp Duotone Thin	fa-sharp-duotone fa-thin	Pro only

Pro packages requires some extra configuration to allow NPM to install.

Icon names

JavaScript naming doesn’t use hyphens; it uses lower camel case. So here are some basic examples of how imports and requires work.

Icon name	Version 4 name	Lower camel case	Notes on usage
address-book	`fa-address-book`	`faAddressBook`	The “B” is captialized after the hyphen
facebook-f	`fa-facebook`	`faFacebookF`	It’s in the Brands style and this was renamed to facebook-f
circle	`fa-circle-o`	`faCircle`	Outline versions of icons are now in the Regular and Light styles
freebsd	`fa-freebsd`	`faFreebsd`	OCD-warning: we know it’s FreeBSD but consistency/guessability is the goal here

Importing these specific icons:

import { faSword } from '@awesome.me/kit-KIT_CODE/classic/solid'
import { faShieldCross } from '@awesome.me/kit-KIT_CODE/duotone/solid'
import { faDog } from '@awesome.me/kit-KIT_CODE/duotone/regular'
import { faFaceHeadBandage } from '@awesome.me/kit-KIT_CODE/sharp/solid'
import { faSparkles } from '@awesome.me/kit-KIT_CODE/sharp-duotone/solid'

// Import uploaded icons from your Kit
import { faMyIcon } from '@awesome.me/kit-KIT_CODE/icons/kit/custom'

import { faSword } from '@fortawesome/pro-solid-svg-icons'
import { faShieldCross } from '@fortawesome/pro-duotone-svg-icons'
import { faDog } from '@fortawesome/duotone-regular-svg-icons'
import { faFaceHeadBandage } from '@fortawesome/sharp-solid-svg-icons'
import { faSparkles } from '@fortawesome/sharp-duotone-solid-svg-icons'

import { faAddressBook } from '@fortawesome/free-solid-svg-icons'
import { faCircle } from '@fortawesome/free-regular-svg-icons'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
import { faFreebsd } from '@fortawesome/free-brands-svg-icons'

Import all icons by using the prefix:

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

library.add(...all)

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fat } from '@fortawesome/pro-thin-svg-icons'
import { fad } from '@fortawesome/pro-duotone-svg-icons'
import { fadr } from '@fortawesome/duotone-regular-svg-icons'
import { fadl } from '@fortawesome/duotone-light-svg-icons'
import { fadt } from '@fortawesome/duotone-thin-svg-icons'
import { fass } from '@fortawesome/sharp-solid-svg-icons'
import { fasr } from '@fortawesome/sharp-regular-svg-icons'
import { fasl } from '@fortawesome/sharp-light-svg-icons'
import { fast } from '@fortawesome/sharp-thin-svg-icons'
import { fasds } from '@fortawesome/sharp-duotone-solid-svg-icons'
import { fasdr } from '@fortawesome/sharp-duotone-regular-svg-icons'
import { fasdl } from '@fortawesome/sharp-duotone-light-svg-icons'
import { fasdt } from '@fortawesome/sharp-duotone-thin-svg-icons'

<!-- Add all icons to the library so you can use them in your page -->
library.add(fas, far, fal, fat, fad, fadr, fadl, fadt, fass, fasr, fasl, fast, fasds, fasdr, fasdl, fasdt)

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

<!-- Add all icons to the library so you can use it in your page -->

library.add(fas, far, fab)

To import the same icon from different styles:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faTruck as fasTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
import { faTruck as fadTruck } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'
import { faTruck as fadrTruck } from '@awesome.me/kit-KIT_CODE/icons/duotone/regular'
import { faTruck as fassTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'
import { faTruck as fasdsTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp-duotone/solid'

library.add(fasTruck, fadTruck, fadrTruck, fassTruck, fasdsTruck)

import { library } from '@fortawesome/fontawesome-svg-core'
import { faTruck as fasTruck } from '@fortawesome/pro-solid-svg-icons'
import { faTruck as fadTruck } from '@fortawesome/pro-duotone-svg-icons'
import { faTruck as fadrTruck } from '@fortawesome/duotone-regular-svg-icons'
import { faTruck as fassTruck } from '@fortawesome/sharp-solid-svg-icons'
import { faTruck as fasdsTruck } from '@fortawesome/sharp-duotone-solid-svg-icons'

library.add(fasTruck, fadTruck, fadrTruck, fassTruck, fasdsTruck)

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircle as fasFaCircle } from '@fortawesome/free-solid-svg-icons' // ES Module "as" syntax
import { faCircle as farFaCircle } from '@fortawesome/free-regular-svg-icons'

library.add(fasFaCircle, farFaCircle)