# Import Icons

Instructions for importing Font Awesome icons into your project using JavaScript.

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

Make sure you already:

- [Set up access](/apis/javascript.md) to the Javascript API in your project.

## Referencing Icons

Font Awesome contains [packs, families, and styles of icons](/web/dig-deeper/styles.md) to match the tone and feel of any project you want to use it in.

Once you determine the style you want to use, 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 [family and style classes](/web/add-icons/how-to.md#families--styles) (e.g. `fa-sharp fa-solid`), and 2) the icon's name (prefixed with `fa-`) you want to display.

  **Pro:**
  **Free:**

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

<!-- regular style of the computer classic icon -->

<i class="fa-regular fa-computer-classic"></i>

<!-- light style of the computer classic icon -->

<i class="fa-light fa-computer-classic"></i>

<!-- thin style of the computer classic icon -->

<i class="fa-thin fa-computer-classic"></i>

<!-- duotone style of the computer classic icon -->

<i class="fa-duotone fa-solid fa-computer-classic"></i>

<!-- sharp solid style of the computer classic icon -->

<i class="fa-sharp fa-solid fa-computer-classic"></i>

<!-- sharp regular style of the computer classic icon -->

<i class="fa-sharp fa-regular fa-computer-classic"></i>

<!-- sharp light style of the computer classic icon -->

<i class="fa-sharp fa-light fa-computer-classic"></i>

<!-- sharp thin style of the computer classic icon -->

<i class="fa-sharp fa-thin fa-computer-classic"></i>

<!-- sharp duotone style of the computer classic icon -->

<i class="fa-sharp-duotone fa-solid fa-computer-classic"></i>
```

```html
<!-- 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>
```

## 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 v5, we added support for SVG which lets us do some fun things with icon data.

[Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG) (SVGs) are made up of text information that can include [paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path). We use the path data to draw the icons.

Here's an example from our [`code` icon](https://fontawesome.com/icons/code):

<svg viewBox="0 0 576 512">
  <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>

```html
<svg viewBox="0 0 576 512">
  <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_:

  <h4>
   Pro+ Icons are only available in Kit Packages!
  </h4>

  <span>
    Along with <a href="https://fontawesome.com/plans?plans=plus">a Pro+ Plan</a>, you'll need to <a       href="/web/setup/use-kit.md#using-kit-packages">install a downloaded Kit package</a
    > to use any of our <a href="https://fontawesome.com/search?ic=pro-plus-collection">Pro+ Icons</a> &mdash; they are not available in any other packages.
  </span>

### Classic

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Pack"></i>](https://fontawesome.com/icons/packs/classic)

| Style                                                              | Package Name                                                                    | Availability                                 | Classes      |                 Preview                  |
| ------------------------------------------------------------------ | ------------------------------------------------------------------------------- | -------------------------------------------- | ------------ | :--------------------------------------: |
| [Solid](https://fontawesome.com/search?ip=classic&s=solid&ic=free) | `@fortawesome/free-solid-svg-icons`<br />`@fortawesome/pro-solid-svg-icons`     | Free or [Pro](https://fontawesome.com/plans) | `fa-solid`   |  <i class="fa-solid fa-user fa-lg"></i>  |
| [Regular](https://fontawesome.com/search?ip=classic&s=regular)     | `@fortawesome/free-regular-svg-icons`<br />`@fortawesome/pro-regular-svg-icons` | Free or [Pro](https://fontawesome.com/plans) | `fa-regular` | <i class="fa-regular fa-user fa-lg"></i> |
| [Light](https://fontawesome.com/search?ip=classic&s=light)         | `@fortawesome/pro-light-svg-icons`                                              | [Pro only](https://fontawesome.com/plans)    | `fa-light`   |  <i class="fa-light fa-user fa-lg"></i>  |
| [Thin](https://fontawesome.com/search?ip=classic&s=thin)           | `@fortawesome/pro-thin-svg-icons`                                               | [Pro only](https://fontawesome.com/plans)    | `fa-thin`    |  <i class="fa-thin fa-user fa-lg"></i>   |

### Duotone

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Pack"></i>](https://fontawesome.com/icons/packs/duotone)

| Style                                                          | Package Name                             | Availability                              | Classes                 |                       Preview                       |
| -------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------- | ----------------------- | :-------------------------------------------------: |
| [Solid](https://fontawesome.com/search?ip=duotone&s=solid)     | `@fortawesome/pro-duotone-svg-icons`     | [Pro only](https://fontawesome.com/plans) | `fa-duotone fa-solid`   |  <i class="fa-duotone fa-solid fa-user fa-lg"></i>  |
| [Regular](https://fontawesome.com/search?ip=duotone&s=regular) | `@fortawesome/duotone-regular-svg-icons` | [Pro only](https://fontawesome.com/plans) | `fa-duotone fa-regular` | <i class="fa-duotone fa-regular fa-user fa-lg"></i> |
| [Light](https://fontawesome.com/search?ip=duotone&s=light)     | `@fortawesome/duotone-light-svg-icons`   | [Pro only](https://fontawesome.com/plans) | `fa-duotone fa-light`   |  <i class="fa-duotone fa-light fa-user fa-lg"></i>  |
| [Thin](https://fontawesome.com/search?ip=duotone&s=thin)       | `@fortawesome/duotone-thin-svg-icons`    | [Pro only](https://fontawesome.com/plans) | `fa-duotone fa-thin`    |  <i class="fa-duotone fa-thin fa-user fa-lg"></i>   |

### Sharp

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Pack"></i>](https://fontawesome.com/icons/packs/sharp)

| Style                                                        | Package Name                           | Availability                              | Classes               |                      Preview                      |
| ------------------------------------------------------------ | -------------------------------------- | ----------------------------------------- | --------------------- | :-----------------------------------------------: |
| [Solid](https://fontawesome.com/search?ip=sharp&s=solid)     | `@fortawesome/sharp-solid-svg-icons`   | [Pro only](https://fontawesome.com/plans) | `fa-sharp fa-solid`   |  <i class="fa-sharp fa-solid fa-user fa-lg"></i>  |
| [Regular](https://fontawesome.com/search?ip=sharp&s=regular) | `@fortawesome/sharp-regular-svg-icons` | [Pro only](https://fontawesome.com/plans) | `fa-sharp fa-regular` | <i class="fa-sharp fa-regular fa-user fa-lg"></i> |
| [Light](https://fontawesome.com/search?ip=sharp&s=light)     | `@fortawesome/sharp-light-svg-icons`   | [Pro only](https://fontawesome.com/plans) | `fa-sharp fa-light`   |  <i class="fa-sharp fa-light fa-user fa-lg"></i>  |
| [Thin](https://fontawesome.com/search?ip=sharp&s=thin)       | `@fortawesome/sharp-thin-svg-icons`    | [Pro only](https://fontawesome.com/plans) | `fa-sharp fa-thin`    |  <i class="fa-sharp fa-thin fa-user fa-lg"></i>   |

### Sharp Duotone

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Pack"></i>](https://fontawesome.com/icons/packs/sharp-duotone)

| Style                                                                | Package Name                                   | Availability                              | Classes                       |                          Preview                          |
| -------------------------------------------------------------------- | ---------------------------------------------- | ----------------------------------------- | ----------------------------- | :-------------------------------------------------------: |
| [Solid](https://fontawesome.com/search?ip=sharp-duotone&s=solid)     | `@fortawesome/sharp-duotone-solid-svg-icons`   | [Pro only](https://fontawesome.com/plans) | `fa-sharp-duotone fa-solid`   |  <i class="fa-sharp-duotone fa-solid fa-user fa-lg"></i>  |
| [Regular](https://fontawesome.com/search?ip=sharp-duotone&s=regular) | `@fortawesome/sharp-duotone-regular-svg-icons` | [Pro only](https://fontawesome.com/plans) | `fa-sharp-duotone fa-regular` | <i class="fa-sharp-duotone fa-regular fa-user fa-lg"></i> |
| [Light](https://fontawesome.com/search?ip=sharp-duotone&s=light)     | `@fortawesome/sharp-duotone-light-svg-icons`   | [Pro only](https://fontawesome.com/plans) | `fa-sharp-duotone fa-light`   |  <i class="fa-sharp-duotone fa-light fa-user fa-lg"></i>  |
| [Thin](https://fontawesome.com/search?ip=sharp-duotone&s=thin)       | `@fortawesome/sharp-duotone-thin-svg-icons`    | [Pro only](https://fontawesome.com/plans) | `fa-sharp-duotone fa-thin`    |  <i class="fa-sharp-duotone fa-thin fa-user fa-lg"></i>   |

### Brands

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Pack"></i>](https://fontawesome.com/icons/packs/brands)

| Style                                              | Package Name                         | Availability | Classes     |                     Preview                     |
| -------------------------------------------------- | ------------------------------------ | ------------ | ----------- | :---------------------------------------------: |
| [Brands](https://fontawesome.com/search?ic=brands) | `@fortawesome/free-brands-svg-icons` | Free         | `fa-brands` | <i class="fa-brands fa-font-awesome fa-lg"></i> |

  <h4>
   Pro has more set up steps
  </h4>
  Pro packages requires <a href="/web/setup/packages.md">some extra configuration to allow NPM to install</a>.

## Icon names

JavaScript naming doesn't use hyphens; it uses [lower camel case](https://en.wikipedia.org/wiki/Camel_case). So here are some basic examples of
how `imports` and `requires` work.

| Icon name                                                  | v4 name           | Lower camel case | Notes on usage                                                                      |
| ---------------------------------------------------------- | ----------------- | ---------------- | ----------------------------------------------------------------------------------- |
| [address-book](https://fontawesome.com/icons/address-book) | `fa-address-book` | `faAddressBook`  | The "B" is captialized after the hyphen                                             |
| [facebook-f](https://fontawesome.com/icons/facebook-f)     | `fa-facebook`     | `faFacebookF`    | It's in the Brands style and this was renamed to facebook-f                         |
| [circle](https://fontawesome.com/icons/circle)             | `fa-circle-o`     | `faCircle`       | Outline versions of icons are now in the Regular and Light styles                   |
| [freebsd](https://fontawesome.com/icons/freebsd)           | `fa-freebsd`      | `faFreebsd`      | **OCD-warning**: we know it's FreeBSD but consistency/guessability is the goal here |

Importing these specific icons:

  **Kit Package:**
  **Pro SVG Icon Package:**
  **Free SVG Icon Package:**

```js
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'
```

```js
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'
```

```js
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:

  **Kit Package:**
  **Pro SVG Icon Package:**
  **Free SVG Icon Package:**

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

library.add(...all)
```

```js
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)
```

```js
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)
```