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.
<!-- 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 >
<!-- 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>
Sharp Family
Sharp Duotone Family
Style Availability Code Solid Pro only <i class="fa-sharp-duotone fa-solid 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" />
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 :
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 { faAxe } from '@awesome.me/kit-KIT_CODE/classic/regular'
import { faBowArrow } from '@awesome.me/kit-KIT_CODE/classic/light'
import { faHelmetBattle } from '@awesome.me/kit-KIT_CODE/classic/thin'
import { faShieldCross } from '@awesome.me/kit-KIT_CODE/duotone/solid'
import { faFaceHeadBandage } from '@awesome.me/kit-KIT_CODE/sharp/solid'
import { faPawClaws } from '@awesome.me/kit-KIT_CODE/sharp/regular'
import { faEyeEvil } from '@awesome.me/kit-KIT_CODE/sharp/light'
import { faRing } from '@awesome.me/kit-KIT_CODE/sharp/thin'
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 { faAxe } from '@fortawesome/pro-regular-svg-icons'
import { faBowArrow } from '@fortawesome/pro-light-svg-icons'
import { faHelmetBattle } from '@fortawesome/pro-thin-svg-icons'
import { faShieldCross } from '@fortawesome/pro-duotone-svg-icons'
import { faFaceHeadBandage } from '@fortawesome/sharp-solid-svg-icons'
import { faPawClaws } from '@fortawesome/sharp-regular-svg-icons'
import { faEyeEvil } from '@fortawesome/sharp-light-svg-icons'
import { faRing } from '@fortawesome/sharp-thin-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'
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 { 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'
<!-- Add all icons to the library so you can use it in your page -->
library. add (fas, far, fal, fat, fad, fass, fasr, fasl, fast, fasds)
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 farTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/regular'
import { faTruck as falTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/light'
import { faTruck as fatTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/thin'
import { faTruck as fadTruck } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'
import { faTruck as fassTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'
import { faTruck as fasrTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/regular'
import { faTruck as faslTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/light'
import { faTruck as fastTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/thin'
import { faTruck as fasdsTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp-duotone/solid'
library. add (fasTruck, farTruck, falTruck, fatTruck, fadTruck, fassTruck, fasrTruck, faslTruck, fastTruck, fasdsTruck)
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTruck as fasTruck } from '@fortawesome/pro-solid-svg-icons'
import { faTruck as farTruck } from '@fortawesome/pro-regular-svg-icons'
import { faTruck as falTruck } from '@fortawesome/pro-light-svg-icons'
import { faTruck as fatTruck } from '@fortawesome/pro-thin-svg-icons'
import { faTruck as fadTruck } from '@fortawesome/pro-duotone-svg-icons'
import { faTruck as fassTruck } from '@fortawesome/sharp-solid-svg-icons'
import { faTruck as fasrTruck } from '@fortawesome/sharp-regular-svg-icons'
import { faTruck as faslTruck } from '@fortawesome/sharp-light-svg-icons'
import { faTruck as fastTruck } from '@fortawesome/sharp-thin-svg-icons'
import { faTruck as fasdsTruck } from '@fortawesome/sharp-duotone-solid-svg-icons'
library. add (fasTruck, farTruck, falTruck, fatTruck, fadTruck, fassTruck, fasrTruck, faslTruck, fastTruck, 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)