We Are Hiring! Font Awesome is hiring a product designer to help us take Shoelace to the next level.
Read about the Job

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

    <!-- 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>
    
    <!-- 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-computer-classic"></i>
    
    <!-- sharp solid style of the computer classic icon -->
    <i class="fa-sharp fa-solid fa-computer-classic"></i>
    

    Font Awesome 6 includes 3 different families (Classic, Sharp, and Brands) as well as 5 different styles (Solid, Regular, Light, Duotone, and Thin). Here's a breakdown of how to access and use each.

    Style Code Example Availability
    Solid <i class="fa-solid fa-flag"></i> Free
    Brands <i class="fa-brands fa-font-awesome"></i> Free
    Regular <i class="fa-regular fa-flag"></i> Pro only
    Light <i class="fa-light fa-flag"></i> Pro only
    Thin <i class="fa-thin fa-flag"></i> Pro only
    Duotone <i class="fa-duotone fa-flag"></i> Pro only
    Sharp Solid <i class="fa-sharp fa-solid fa-font-awesome"></i> Pro only

    Font Awesome Sharp requires Pro and specific versions!

    Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp's styles.

    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 fa-solid Free
    @fortawesome/free-regular-svg-icons Regular fa-regular Free
    @fortawesome/free-brands-svg-icons Brands fa-brands Free
    @fortawesome/pro-solid-svg-icons Solid fa-solid Pro only
    @fortawesome/pro-regular-svg-icons Regular fa-regular Pro only
    @fortawesome/pro-light-svg-icons Light fa-light Pro only
    @fortawesome/pro-thin-svg-icons Thin fa-thin Pro only
    @fortawesome/pro-duotone-svg-icons Duotone fa-duotone Pro only
    @fortawesome/sharp-solid-svg-icons Sharp Solid fa-sharp fa-solid 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 { faCircle } from '@fortawesome/free-regular-svg-icons'
      import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
      import { faFreebsd } from '@fortawesome/free-brands-svg-icons'
      
      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 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)
        
        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'
        
        <!-- Add all icons to the library so you can use it in your page -->
        library.add(fas, far, fal, fat, fad, fass)
        

        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)
          
          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'
          
          library.add(fasTruck, farTruck, falTruck, fatTruck, fadTruck, fassTruck)