How To Add Icons
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, how to add icons to HTML, using icons aliases, and more!
Basics
To add an icon, you need to know a few bits of information:
- The shorthand class name for the style you want to use
- The icon name, prefixed with
fa-
(meaning “Font Awesome” naturally!) - The shorthand class name for the family you want to use (Optional)
Families + Styles
There are four families of Font Awesome icons - each with a unique look, class name, and @font-face
font-family. In Font Awesome Classic, Duotone, Sharp, and Sharp Duotone, there are four styles of Font Awesome icons. Here are some examples:
Classic Family
Style | Availability | Style class | font-weight | Looks like |
---|---|---|---|---|
Solid | Free Plan | fa-solid | 900 | |
Regular | Pro only | fa-regular | 400 | |
Light | Pro only | fa-light | 300 | |
Thin | Pro only | fa-thin | 100 |
Duotone Family
Style | Availability | Style class | font-weight | Looks like |
---|---|---|---|---|
Solid | Pro only | fa-duotone fa-solid | 900 | |
Regular | Pro only | fa-duotone fa-regular | 400 | |
Light | Pro only | fa-duotone fa-light | 300 | |
Thin | Pro only | fa-duotone fa-thin | 100 |
Sharp Family
Style | Availability | Style class | font-weight | Looks like |
---|---|---|---|---|
Solid | Pro only | fa-sharp fa-solid | 900 | |
Regular | Pro only | fa-sharp fa-regular | 400 | |
Light | Pro only | fa-sharp fa-light | 300 | |
Thin | Pro only | fa-sharp fa-thin | 100 |
Sharp Duotone Family
Style | Availability | Style class | font-weight | Looks like |
---|---|---|---|---|
Solid | Pro only | fa-sharp-duotone fa-solid | 900 | |
Regular | Pro only | fa-sharp-duotone fa-regular | 400 | |
Light | Pro only | fa-sharp-duotone fa-light | 300 | |
Thin | Pro only | fa-sharp-duotone fa-thin | 100 |
Brands Family
Style | Availability | Style class | font-weight | Looks like |
---|---|---|---|---|
Brands | Free Plan | fa-brands | 400 |
Add Icons to HTML
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 with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the fa-
prefix for the icon you want to use. Accessibility-minded folks may want to opt for the <span>
element instead of <i>
.
Here’s an example:
<!-- This example uses <i> element with:1. the `fa-solid` style class for solid style2. the `user` icon with the `fa-` prefix --><i class="fa-solid fa-user"></i>
<!-- Or you can use a <span> element, with classes applied in the same way --><span class="fa-solid fa-user"></span>
Setting Different Families + Styles
And here’s an example that references different styles and families of icons:
<!-- Classic family icons in available styles (Font Awesome Classic is the 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>
<!-- You can also explicitly state the classic family like this --><i class="fa-classic fa-regular fa-user"></i>
<!-- Font Awesome Duotone family icon --><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>
<!-- Font Awesome Sharp family icons in available styles --><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>
<!-- Font Awesome Sharp Duotone family icon --><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>
<!-- a Brands icon --><i class="fa-brands fa-font-awesome"></i>
Aliases
We’ve updated many of our icon names in Version 6 to make them more universal and consistent. But 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
).
<!-- 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. --><i class="fa-sharp fa-solid fa-times"></i><i class="fa-sharp fa-solid fa-close"></i><i class="fass fa-xmark"></i>
Alternate Ways to Add Icons
We also have many other ways to add Font Awesome icons, in case your situation calls for something specific: