# How To Add Icons

Step-by-step instructions for adding Font Awesome icons to your web projects.

> You can place Font Awesome icons just about anywhere, and we've tried to make it so that icons will take on the characteristics and blend in with surrounding text naturally.

We'll cover the basics of how to add icons to your project, shorthand class names for different icon [styles](/web/dig-deeper/styles.md), how to add icons to HTML, using icons aliases, and more!

Make sure you've:

- [Set up Font Awesome](/web.md#web-setup) in your project and know where you parked your tardis.

https://www.youtube.com/watch?v=yOFrPOldYsQ

## Basics

To add an icon, you need to know a few bits of information:

1. The shorthand **class name for the style** you want to use
2. The **icon name**, prefixed with `fa-` (meaning "Font Awesome" naturally!)
3. The shorthand **class name for the family** you want to use (the default is the Classic family if you don't include a family class)

So to add an icon to your HTML, you just add an element with that classes to your page. Here's an example:

```html
<i class="fa-sharp fa-solid fa-user"></i>

<!--
 In the example above, you add...
1. `fa-solid` class for Solid style
2. `user` icon with the `fa-` prefix
3. `fa-sharp` class for Sharp family
... and you'll see the Sharp Solid User icon
-->
```

We designed Font Awesome for use with **inline elements**, and we recommend that you **stick with a consistent element** in your project. We recommend using `<i>` element and you'll add CSS **classes** for the for the Font Awesome [family and style of icon](/web/dig-deeper/styles.md) you want to use and the **icon name class** with the `fa-` prefix for [the icon you want to use](https://fontawesome.com/icons).

If you want to avoid using the `i` tag, you can use a `<span>` element instead of `<i>`. Here's that same example using a `span` tag:

```html
<!-- You can use a <span> element, with classes applied in the same way -->
<span class="fa-sharp fa-solid fa-user"></span>
```

<h4>
Leave 'fa-' to Font Awesome
</h4>

We don't recommend creating your own classes that start with `fa-` as it can result in missing icons or other unwanted behavior. You can add any other custom classes to your elements though!

## Families + Styles

https://www.youtube.com/watch?v=C1xelmbZPaE

Font Awesome contains many [icon packs](https://fontawesome.com/icons?t=packs) each with its own visual look and collection of [families and styles](/web/dig-deeper/styles.md). Below you'll find all our families and styles listed with the classes and other info you need to add icons to your projects.

<h4>
Font Awesome Classic is Our Default Family
</h4>

If you don't specify a family class name, our styling toolkit will render icons in Font Awesome Classic, the original look and feel that's always in style. But if you need to reference the Classic family, you can just add the `fa-classic` in your icon's HTML class names. If you want to [change any or all icons to use Sharp](#add-icons-to-html), just add `fa-sharp` in the same manner!

<h4>
Parity Across Icon Packs

</h4>

Each Pro+ only style is considered "small batch" and does not have parity with categories or icons in our larger Packs. Instead they contain a curated selection of the 200 most common icons needed for app and website design.

### Kit-Based Custom Icons

If you're using [a Font Awesome Kit](/web/setup/use-kit.md) and have added [custom icons](/web/add-icons/upload-icons.md).

| Style                | Availability                                   | Classes          | font-family                | font-weight |
| -------------------- | ---------------------------------------------- | ---------------- | -------------------------- | ----------- |
| Custom Icons         | [Pro Kits only](https://fontawesome.com/plans) | `fa-kit`         | `Font Awesome Kit`         | `400`       |
| Custom Duotone Icons | [Pro Kits only](https://fontawesome.com/plans) | `fa-kit-duotone` | `Font Awesome Kit Duotone` | `400`       |

## Setting Different Families + Styles

Here are some examples that show different styles and families of icons:

  <p>
    <i class="icon-padding fa-2x fa-solid fa-user" />
    <i class="icon-padding fa-2x fa-regular fa-user" />
    <i class="icon-padding fa-2x fa-light fa-user" />
    <i class="icon-padding fa-2x fa-thin fa-user" />
  </p>
  <p>
    <i class="icon-padding fa-2x fa-classic fa-solid fa-user" />
    <i class="icon-padding fa-2x fa-classic fa-regular fa-user" />
    <i class="icon-padding fa-2x fa-classic fa-light fa-user" />
    <i class="icon-padding fa-2x fa-classic fa-thin fa-user" />
  </p>
  <p>
    <i class="icon-padding fa-2x fa-duotone fa-solid fa-user" />
    <i class="icon-padding fa-2x fa-duotone fa-regular fa-user" />
    <i class="icon-padding fa-2x fa-duotone fa-light fa-user" />
    <i class="icon-padding fa-2x fa-duotone fa-thin fa-user" />
  </p>
  <p>
    <i class="icon-padding fa-2x fa-sharp fa-solid fa-user" />
    <i class="icon-padding fa-2x fa-sharp fa-regular fa-user" />
    <i class="icon-padding fa-2x fa-sharp fa-light fa-user" />
    <i class="icon-padding fa-2x fa-sharp fa-thin fa-user" />
  </p>
  <p>
    <i class="icon-padding fa-2x fa-sharp-duotone fa-solid fa-user" />
    <i class="icon-padding fa-2x fa-sharp-duotone fa-regular fa-user" />
    <i class="icon-padding fa-2x fa-sharp-duotone fa-light fa-user" />
    <i class="icon-padding fa-2x fa-sharp-duotone fa-thin fa-user" />
  </p>
  <p>
    <i class="icon-padding fa-2x fa-chisel fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-etch fa-solid fa-user"></i>
    <i class="icon-padding fa-2x fa-jelly fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-jelly-fill fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-jelly-duo fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-notdog fa-solid fa-user"></i>
    <i class="icon-padding fa-2x fa-notdog-duo fa-solid fa-user"></i>
    <i class="icon-padding fa-2x fa-slab fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-slab-press fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-slab fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-slab-press fa-regular fa-user"></i>
    <i class="icon-padding fa-2x fa-thumbprint fa-light fa-user"></i>
    <i class="icon-padding fa-2x fa-whiteboard fa-semibold fa-user"></i>
  </p>
  <p>
    <i class="icon-padding fa-2x fa-brands fa-font-awesome" />
  </p>

```html
<!-- icon rendered across the Classic family (Classic is set by default) -->
<i class="fa-solid fa-user"></i>
<i class="fa-regular fa-user"></i>
<i class="fa-light fa-user"></i>
<i class="fa-thin fa-user"></i>

<!-- icon rendered across the Classic family (Classic is set explicitly) -->
<i class="fa-classic fa-solid fa-user"></i>
<i class="fa-classic fa-regular fa-user"></i>
<i class="fa-classic fa-light fa-user"></i>
<i class="fa-classic fa-thin fa-user"></i>

<!-- icon rendered across the Duotone family -->
<i class="fa-duotone fa-solid fa-user"></i>
<i class="fa-duotone fa-regular fa-user"></i>
<i class="fa-duotone fa-light fa-user"></i>
<i class="fa-duotone fa-thin fa-user"></i>

<!-- icon rendered across the Sharp family -->
<i class="fa-sharp fa-solid fa-user"></i>
<i class="fa-sharp fa-regular fa-user"></i>
<i class="fa-sharp fa-light fa-user"></i>
<i class="fa-sharp fa-thin fa-user"></i>

<!-- icon rendered across the Sharp Duotone family -->
<i class="fa-sharp-duotone fa-solid fa-user"></i>
<i class="fa-sharp-duotone fa-regular fa-user"></i>
<i class="fa-sharp-duotone fa-light fa-user"></i>
<i class="fa-sharp-duotone fa-thin fa-user"></i>

<!-- icon rendered across Small Batch families -->
<i class="fa-chisel fa-regular fa-user"></i>

<i class="fa-etch fa-solid fa-user"></i>
<i class="fa-jelly fa-regular fa-user"></i>

<i class="fa-jelly-fill fa-regular fa-user"></i>
<i class="fa-jelly-duo fa-regular fa-user"></i>

<i class="fa-notdog fa-solid fa-user"></i>
<i class="fa-notdog-duo fa-solid fa-user"></i>

<i class="fa-slab fa-regular fa-user"></i>
<i class="fa-slab-press fa-regular fa-user"></i>

<i class="fa-thumbprint fa-light fa-user"></i>

<i class="fa-whiteboard fa-semibold fa-user"></i>

<!-- Font Awesome Brands icon -->
<i class="fa-brands fa-font-awesome"></i>
```

<h4>
  Stay on target with those CSS rules!
</h4>

When using our SVG framework, remember that DOM elements with Font Awesome classes are replaced with injected `<svg>` elements by default. Be sure that your CSS rules target the right element.

## Aliases

Since v6, we've updated many of our icon names to make them more universal and consistent. But if you're a v5 or earlier user, we wanted to make sure not to break your existing code. So we made aliases for renamed icons to allow them to work with either the old or new names.

And you can use the old or new name for styles as well. So you can still use `fas`, `far`, `fal`, `fad`, and `fab`. And we've also included older prefix versions for our new Thin style (`fat`) and new Sharp family of styles (Sharp Solid is `fass` while Sharp Regular is `fasr`).

```html
<!-- All of these code snippets will render the same Solid icon thanks to aliases. -->
<i class="fa-solid fa-cutlery"></i>
<i class="fa-solid fa-utensils"></i>
<i class="fas fa-utensils"></i>

<!-- All of these code snippets will render the same Sharp Solid icon thanks to aliases. -->
No
<i class="fa-sharp fa-solid fa-close"></i>
No
```

## Alternate Ways to Add Icons

We also have many other ways to add Font Awesome icons, in case your situation calls for something specific:

### When using Web Fonts

- [Add icons using just CSS with pseudo-elements](/web/add-icons/pseudo-elements.md).

### When using SVGs

- [Use SVGs without JS using our SVG Sprites](/web/add-icons/svg-sprites.md)
- [Bring-Your-Own style with our bare SVGs](/web/add-icons/svg-bare.md)
- [Use SVG symbols to improve performance with repeating icons](/web/add-icons/svg-symbols.md)
- [Use an Icon's Unicode value](/web/add-icons/svg-unicodes.md)
- [Use an Icon's name](/web/add-icons/svg-icon-names.md)

### In Other Integrations

- [In Vue](/web/use-with/vue/add-icons.md)
- [In React](/web/use-with/react/add-icons.md)
- [In WordPress](/web/use-with/wordpress/add-icons.md)
- [In Squarespace](/web/use-with/squarespace.md)
- [With SCSS](/web/use-with/scss.md)
- ... and more! Check out the Integrations section for all the options.