NexusCS

Font Awesome

CSS
icons
fonts
css
svg

Getting started

Introduction

Font Awesome 6 — the web's most popular icon toolkit with 30,000+ icons.

CDN Kit (recommended)

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

Get your kit code from fontawesome.com.

npm Installation

# Free icons
npm i --save @fortawesome/fontawesome-free

# React (core + free solid)
npm i @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons

Basic HTML usage

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

Icon = family class (fa-solid) + icon name (fa-house).

Icon styles

Available families

Style Class Short Free
Solid fa-solid fas ✓
Regular fa-regular far ✓
Brands fa-brands fab ✓
Light fa-light fal Pro
Thin fa-thin fat Pro
Duotone fa-duotone fa-solid fad Pro
Sharp Solid fa-sharp fa-solid — Pro

Solid icons (default)

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-gear"></i>

Most complete icon set.

Regular icons

<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-circle"></i>

Outlined variants (subset of solid).

Brand icons

<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-linkedin"></i>

Company and product logos.

Duotone (Pro only)

<i class="fa-duotone fa-solid fa-heart"></i>
<i class="fa-duotone fa-solid fa-camera"></i>

Two-tone icons with customizable colors.

Sizing

Relative sizes

<i class="fa-solid fa-coffee fa-2xs"></i>
<!-- 0.625em -->
<i class="fa-solid fa-coffee fa-xs"></i>
<!-- 0.75em -->
<i class="fa-solid fa-coffee fa-sm"></i>
<!-- 0.875em -->
<i class="fa-solid fa-coffee"></i>
<!-- 1em (default) -->
<i class="fa-solid fa-coffee fa-lg"></i>
<!-- 1.25em -->
<i class="fa-solid fa-coffee fa-xl"></i>
<!-- 1.5em -->
<i class="fa-solid fa-coffee fa-2xl"></i>
<!-- 2em -->

Scale with surrounding text.

Literal sizes

<i class="fa-solid fa-camera fa-1x"></i>
<i class="fa-solid fa-camera fa-2x"></i>
<i class="fa-solid fa-camera fa-3x"></i>
<i class="fa-solid fa-camera fa-5x"></i>
<i class="fa-solid fa-camera fa-10x"></i>

Fixed multiples (1x through 10x).

Fixed width

<ul class="fa-ul">
  <li><i class="fa-solid fa-check fa-fw"></i> Item one</li>
  <li><i class="fa-solid fa-xmark fa-fw"></i> Item two</li>
</ul>

fa-fw sets width to 1.25em for alignment.

Animations

Basic animations

<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-warning fa-fade"></i>
<i class="fa-solid fa-info fa-beat-fade"></i>
<i class="fa-solid fa-basketball fa-bounce"></i>

Attention-grabbing effects.

Spinning

<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
<i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>

Continuous 360° rotation. Use for loading states.

Advanced animations

<i class="fa-solid fa-disc fa-flip"></i>
<i class="fa-solid fa-bell fa-shake"></i>

3D flip and shake effects.

Custom animation speed

<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;"></i>

<i
  class="fa-solid fa-spinner fa-spin"
  style="--fa-animation-iteration-count: 5;"
></i>

CSS variables control timing and iterations.

Rotating & flipping

Fixed rotations

<i class="fa-solid fa-shield fa-rotate-90"></i>
<i class="fa-solid fa-shield fa-rotate-180"></i>
<i class="fa-solid fa-shield fa-rotate-270"></i>

Rotate by 90° increments.

Flipping

<i class="fa-solid fa-shield fa-flip-horizontal"></i>
<i class="fa-solid fa-shield fa-flip-vertical"></i>
<i class="fa-solid fa-shield fa-flip-both"></i>

Mirror icons along axes.

Custom rotation

<i
  class="fa-solid fa-shield fa-rotate-by"
  style="--fa-rotate-angle: 45deg;"
></i>

Any angle via CSS variable.

Stacking

Basic stack

<span class="fa-stack fa-2x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-brands fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Layer icons on top of each other.

Stack classes

Class Purpose
fa-stack Container (add size like fa-2x)
fa-stack-2x Background icon (larger)
fa-stack-1x Foreground icon (smaller)
fa-inverse Invert icon color

Examples

<!-- Banned user -->
<span class="fa-stack">
  <i class="fa-solid fa-user fa-stack-2x"></i>
  <i class="fa-solid fa-ban fa-stack-2x" style="color:red"></i>
</span>

<!-- Social media badge -->
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-circle fa-stack-2x" style="color:Tomato"></i>
  <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
</span>

Power transforms

Size transforms

<i class="fa-solid fa-icon" data-fa-transform="shrink-8"></i>
<i class="fa-solid fa-icon" data-fa-transform="grow-6"></i>

Scale icons (1-16 units). SVG+JS only.

Position transforms

<i class="fa-solid fa-icon" data-fa-transform="up-6"></i>
<i class="fa-solid fa-icon" data-fa-transform="down-4 right-3"></i>
<i class="fa-solid fa-icon" data-fa-transform="left-2"></i>

Move icons (up/down/left/right).

Rotation & flip

<i class="fa-solid fa-icon" data-fa-transform="rotate-90"></i>
<i class="fa-solid fa-icon" data-fa-transform="rotate-270"></i>
<i class="fa-solid fa-icon" data-fa-transform="flip-v"></i>
<i class="fa-solid fa-icon" data-fa-transform="flip-h"></i>

Transform in SVG space.

Combined transforms

<i class="fa-solid fa-magic" data-fa-transform="shrink-8 up-6 rotate-30"></i>

Chain multiple transforms (space-separated).

Layering & counters

Layering icons

<span class="fa-layers fa-fw">
  <i class="fa-solid fa-circle" style="color:Tomato"></i>
  <i class="fa-inverse fa-solid fa-times" data-fa-transform="shrink-6"></i>
</span>

Compose complex icons. SVG+JS only.

Counter badges

<span class="fa-layers fa-fw">
  <i class="fa-solid fa-envelope"></i>
  <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>

Notification counts (auto-positioned).

Text layers

<span class="fa-layers fa-fw">
  <i class="fa-solid fa-calendar"></i>
  <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3"
    >27</span
  >
</span>

Embed text inside icons.

Complex example

<span class="fa-layers fa-fw" style="background:MistyRose">
  <i class="fa-solid fa-circle" style="color:papayawhip"></i>
  <i class="fa-solid fa-check" data-fa-transform="shrink-6"></i>
  <span class="fa-layers-counter" style="background:red">99+</span>
</span>

React usage

Basic component

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

function App() {
  return <FontAwesomeIcon icon={faCoffee} />;
}

Import individual icons to minimize bundle.

Props

<FontAwesomeIcon icon={faCoffee} />
<FontAwesomeIcon icon={faCoffee} size="2x" />
<FontAwesomeIcon icon={faCoffee} fixedWidth />
<FontAwesomeIcon icon="spinner" spin />
<FontAwesomeIcon icon="heart" beat style={{color: "red"}} />
<FontAwesomeIcon icon="snowboarding" rotation={90} />
<FontAwesomeIcon icon="quote-left" flip="horizontal" />

Using the library

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, fab)

// Now use string names
<FontAwesomeIcon icon="coffee" />
<FontAwesomeIcon icon="github" />

Warning: imports entire icon sets (large bundle).

Power transforms in React

<FontAwesomeIcon icon="coffee" transform="shrink-8 up-6" />
<FontAwesomeIcon icon="magic" transform={{ rotate: 42 }} />

CSS pseudo-elements

Basic usage

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.trash::before {
  font: var(--fa-font-solid);
  content: "\f1f8";
}

Web Fonts only (not SVG+JS).

Font variables

.solid::before {
  font: var(--fa-font-solid);
}

.regular::before {
  font: var(--fa-font-regular);
}

.brands::before {
  font: var(--fa-font-brands);
}

Finding unicode values

Visit fontawesome.com/icons, select icon, copy unicode from details.

.heart::before {
  font: var(--fa-font-solid);
  content: "\f004"; /* fa-heart */
}

Accessibility

Decorative icons (default)

<button><i class="fa-solid fa-envelope"></i> Email Us!</button>

Text provides context. Icon auto-hidden from screen readers.

Semantic icons (interactive)

<button aria-label="Email us!">
  <i class="fa-solid fa-envelope"></i>
</button>

Add aria-label when icon is the only content.

Semantic icons (content)

We <i class="fa-solid fa-heart" aria-label="love" role="img"></i> pizza!

Add aria-label + role="img" for inline semantic icons.

Visually hidden text

<i class="fa-solid fa-download"></i> <span class="sr-only">Download file</span>

Use .sr-only class for screen reader-only text.

Common icons

Navigation

<i class="fa-solid fa-house"></i>
<!-- home -->
<i class="fa-solid fa-bars"></i>
<!-- menu -->
<i class="fa-solid fa-magnifying-glass"></i>
<!-- search -->
<i class="fa-solid fa-chevron-down"></i>
<!-- dropdown -->
<i class="fa-solid fa-arrow-right"></i>
<!-- next -->
<i class="fa-solid fa-xmark"></i>
<!-- close -->

Social media

<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-youtube"></i>

Media controls

<i class="fa-solid fa-play"></i>
<i class="fa-solid fa-pause"></i>
<i class="fa-solid fa-stop"></i>
<i class="fa-solid fa-forward"></i>
<i class="fa-solid fa-backward"></i>
<i class="fa-solid fa-volume-high"></i>

Files & folders

<i class="fa-solid fa-file"></i>
<i class="fa-solid fa-folder"></i>
<i class="fa-solid fa-download"></i>
<i class="fa-solid fa-upload"></i>
<i class="fa-solid fa-file-pdf"></i>
<i class="fa-solid fa-image"></i>

UI elements

<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-gear"></i>
<i class="fa-solid fa-bell"></i>
<i class="fa-solid fa-envelope"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-trash"></i>
<i class="fa-solid fa-pencil"></i>

Status indicators

<i class="fa-solid fa-check"></i>
<!-- success -->
<i class="fa-solid fa-xmark"></i>
<!-- error -->
<i class="fa-solid fa-circle-info"></i>
<!-- info -->
<i class="fa-solid fa-triangle-exclamation"></i>
<!-- warning -->
<i class="fa-solid fa-spinner"></i>
<!-- loading -->

Gotchas & tips

FA5 → FA6 breaking changes

<!-- ❌ FA5 (deprecated) -->
<i class="fa fa-home"></i>

<!-- ✅ FA6 (required) -->
<i class="fa-solid fa-house"></i>

Must specify explicit family (fa-solid, fa-regular, fa-brands). Some icons renamed (fa-home → fa-house).

SVG+JS vs Web Fonts

Feature SVG+JS Web Fonts
Power Transforms ✅ ❌
Layering ✅ ❌
CSS Pseudo-elements ❌ ✅
Performance Better Good
File size Smaller Larger

Choose SVG+JS for advanced features (CDN Kit default).

Reduced motion

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin {
    animation: none;
  }
}

Animations respect user's motion preferences.

React bundle size

// ❌ Imports entire icon set (~1MB+)
import { fas } from "@fortawesome/free-solid-svg-icons";

// ✅ Import only needed icons
import { faCoffee, faHeart } from "@fortawesome/free-solid-svg-icons";

Use individual imports to reduce bundle size.

Pro package setup

# Configure npm with FA token
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" YOUR_TOKEN

Required for @fortawesome/pro-* packages.

Also see