Font Awesome cheat sheet

A scannable Font Awesome reference: 12 short snippets across 6 topics, each linking back to the lesson it came from.

At a glance

Quick snippets

Installing Font Awesome

The CDN stylesheet

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
      integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer">

<!-- the same thing, self-hosted after downloading the zip -->
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css">

npm packages

# icons plus webfonts and ready-made CSS
npm install @fortawesome/fontawesome-free

# or the SVG core with individual icon packages
npm install @fortawesome/fontawesome-svg-core \
            @fortawesome/free-solid-svg-icons \
            @fortawesome/free-brands-svg-icons

Kits

<script src="https://kit.fontawesome.com/abc123def4.js" crossorigin="anonymous"></script>

<!-- self-hosted variant: download the kit and serve it yourself -->
<script src="/vendor/fontawesome-kit.js" defer></script>

Full lesson: Installing Font Awesome →

Using, sizing and animating icons

The class syntax

<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-brands fa-github"></i>

<!-- any inline element works; the classes carry the meaning -->
<span class="fa-solid fa-magnifying-glass"></span>

<!-- icon plus text, with a fixed gap -->
<button class="btn">
  <i class="fa-solid fa-floppy-disk" aria-hidden="true"></i>
  Save
</button>

Full lesson: Using, sizing and animating icons →

Accessibility and performance trade-offs

Performance trade-offs

<!-- defer the renderer so it cannot block the first paint -->
<script src="/vendor/fontawesome-kit.js" defer></script>

<!-- reserve the icon box so nothing shifts when the webfont swaps in -->
<style>
  .fa-solid, .fa-regular { width: 1.25em; height: 1em; line-height: 1; }
</style>

<!-- or drop the webfont entirely: import three icons and nothing else -->
<!-- import { faBolt, faLock, faCheck } from '@fortawesome/free-solid-svg-icons'; -->

Full lesson: Accessibility and performance trade-offs →

Pseudo-element icons and CSS styling hooks

Declaring icons in one place

<button type="button" data-icon="save">Save changes</button>
<button type="button" data-icon="delete">Delete</button>
<button type="button" data-icon="search" data-icon-only aria-label="Search"></button>

<!-- The advantage: no <i> element, no class names in the content, and the
     pseudo-element is decorative by definition — screen readers do not
     announce generated content as a separate item, so no aria-hidden is needed. -->
<a href="/export.csv" data-icon="download">Export</a>

Full lesson: Pseudo-element icons and CSS styling hooks →

Kits, CDN and self-hosting

What a kit actually is

<!-- A kit is a hosted bundle you configure in a web UI, loaded by one script. -->
<script src="https://kit.fontawesome.com/a1b2c3d4e5.js" crossorigin="anonymous"></script>

<!-- The script then:
     1. detects the icons referenced in your markup,
     2. fetches the matching font or SVG data from the CDN,
     3. injects a <style> element with the rules it needs.
     Nothing is present until it runs, which is why the icons appear late. -->

Self-hosting

# Web fonts: copy the webfonts folder and the stylesheet, then rewrite the paths.
npm install @fortawesome/fontawesome-free

mkdir -p public/vendor/fontawesome/webfonts
cp node_modules/@fortawesome/fontawesome-free/webfonts/* public/vendor/fontawesome/webfonts/
cp node_modules/@fortawesome/fontawesome-free/css/solid.min.css public/vendor/fontawesome/
cp node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css public/vendor/fontawesome/

# The shipped CSS references ../webfonts/, which is exactly the layout above.

Self-hosting

<!-- The SVG sprite route: one file, referenced with <use>. -->
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="fa-cart" viewBox="0 0 576 512">
    <path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24z"/>
  </symbol>
</svg>

<svg class="icon" width="16" height="16" aria-hidden="true" focusable="false">
  <use href="#fa-cart"></use>
</svg>

Full lesson: Kits, CDN and self-hosting →

Font Awesome in React, Vue and Angular

React

npm install @fortawesome/react-fontawesome
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-brands-svg-icons
# Pro projects add the matching pro packages instead

Vue 3

// main.js — the same library pattern
import { createApp } from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faBell, faCartShopping } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import App from './App.vue';

library.add(faBell, faCartShopping);

createApp(App)
  .component('FontAwesomeIcon', FontAwesomeIcon)   // global registration
  .mount('#app');

Angular

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons

Full lesson: Font Awesome in React, Vue and Angular →

FAQ

Related cheat sheets

HTML CSS JavaScript TypeScript HTML DOM AJAX

Last refreshed 2026-09-27.