You're viewing docs for v5.15.4, an older version of Font Awesome.

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

Before You Get Started

Make sure you already:

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. fas), and 2) the icon's name (prefixed with fa-) you want to display.

<i class="fas fa-question-circle"></i> <!-- solid style of the question circle icon -->
<i class="far fa-question-circle"></i> <!-- regular style of the question circle icon -->
<i class="fal fa-question-circle"></i> <!-- light style of the question circle icon -->

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

In Font Awesome 6, Font Awesome includes 6 different styles - Solid, Regular, Light, Duotone, and Brands. Here's a break down of each's use and availability.

Style Prefix Code Example Availability
Solid fas <i class="fas fa-flag"></i> Free
Regular far <i class="far fa-flag"></i> Pro only
Light fal <i class="fal fa-flag"></i> Pro only
Duotone fad <i class="fad fa-flag"></i> Pro only
Brands fab <i class="fab fa-font-awesome"></i> Free

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 (opens new window) (SVGs) are made up of text information that can include paths (opens new window). 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.

Package names

Icon content packages are segmented by license and style:

Package name Style Prefix Example Availability
@fortawesome/free-solid-svg-icons Solid fas Free
@fortawesome/free-regular-svg-icons Regular far Free
@fortawesome/free-brands-svg-icons Brands fab Free
@fortawesome/pro-solid-svg-icons Solid fas Pro only
@fortawesome/pro-regular-svg-icons Regular far Pro only
@fortawesome/pro-light-svg-icons Light fal Pro only
@fortawesome/pro-duotone-svg-icons Duotone fad 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 (opens new window). 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 { faAddressBook } from '@fortawesome/free-solid-svg-icons'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
import { faCircle } from '@fortawesome/free-regular-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 { 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 { 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)