Installing Font Awesome

Three ways to get the icons into a project — CDN, npm packages and hosted kits — and what each one costs you.

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">

• Add the stylesheet in the head; it is render-blocking, so keep it small or self-host it on the same origin.
• all.min.css covers solid, regular and brands; fontawesome.min.css plus solid.min.css is smaller if you only use one style.
• The CSS references font files by relative path, so the webfonts folder must sit next to the css folder when you copy files.
• Pin an exact version and keep the integrity hash — a CDN upgrade can change glyph mappings without warning.

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

// option A: import the shipped CSS (simplest with a bundler)
import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
import '@fortawesome/fontawesome-free/css/solid.min.css';

// option B: SVG core - register only what you use, then convert
import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faHouse, faMagnifyingGlass, faTrashCan } from '@fortawesome/free-solid-svg-icons';

library.add(faHouse, faMagnifyingGlass, faTrashCan);
dom.watch();          // replaces every <i class="fa-solid fa-house"> in the DOM

// or render one icon from code
import { icon } from '@fortawesome/fontawesome-svg-core';
const node = icon({ prefix: 'fas', iconName: 'house' }).node[0];
document.querySelector('.slot').append(node);

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>

• A kit is a configuration bound to your account: version, icon subset, and features such as auto-replacement and accessibility defaults.
• Kit JS swaps <i> elements for inline SVG at runtime, so CSS can style the icons with fill and currentColor.
• Because the replacement happens after the script runs, the raw icon tags can flash first — mark the container or use the kit's CSS to avoid it.
• Downloading the kit file removes the third-party dependency and works offline; you then own the update cycle.

FAQ

Related

Using, sizing and animating icons Accessibility and performance trade-offs

Last refreshed 2026-09-18.