Icon Fonts & Web Performance

How to Use Font Awesome Icons in 2026: The Complete Guide to Font Awesome 7 (Setup, Classes, React & Performance)

Published: September 11, 2026 By Reading Time: 19 min read

Font Awesome in 2026, without the 2015 habits: most ranking tutorials still teach Font Awesome 4.7 (fa fa-car), the v5 kit script, or a v6-beta CDN — three contradictory installs, all outdated. This guide covers the current release, Font Awesome 7 (GA July 2025, now at 7.3.1), with the numbers and breaking changes those tutorials miss:

  • The free tier, precisely: 1,992 unique icons — 1,422 solid + 572 brands + 169 regular style slots — under SIL OFL 1.1 / CC BY 4.0 / MIT. No account needed for the CDN route.
  • Measured payloads: all.min.css is 90.3 KB raw / 18.4 KB gzipped — but solid.min.css is 619 bytes, and the woff2 fonts are what actually weigh you down (119.5 KB solid, 115.4 KB brands).
  • Modern class syntax: fa-solid / fa-regular / fa-brands — what replaced fa, fas and fab, and why the old prefixes still resolve.
  • Every install method compared: CDN, Kits, npm SVG packages, and self-hosting — with the "loading two versions together causes conflicts" gotcha.
  • React & Next.js: the official @fortawesome/react-fontawesome SVG-component route that tree-shakes to exactly the icons you render (1.54M weekly downloads can't be wrong).
  • v7 breaking changes: woff2-only fonts, decorative-by-default accessibility, dropped Less/jQuery, icon renames, and the deprecated fa-fw.
Browser window showing HTML code with icon font glyphs transforming into crisp SVG star icons delivered over CDN network nodes
Figure 1: The Font Awesome delivery decision — webfont glyphs over the network versus crisp, tree-shaken SVGs in your bundle.

1. What Font Awesome Is in 2026 (And Which Version Everyone Is Actually On)

Font Awesome is the most-installed icon toolkit on the web — the @fortawesome/fontawesome-free npm package alone averages ~1.76 million weekly downloads, with the SVG core at 2.26M and the React wrapper at 1.54M, and the GitHub repository at 76,900+ stars. By 2024 it was used by 25.4% of sites using third-party font scripts — second only to Google Fonts.

The version history matters because search results are a time machine of bad advice:

Era Class syntax What tutorials still teach
v4 (2013–2017) fa fa-car W3Schools' secondary page, TutorialsPoint (4.3.0), countless university and gov sites
v5 (2017–2022) fas / far / fab W3Schools' main Font Awesome 5 page, most YouTube tutorials
v6 (2022–2025) fa-solid / fa-regular / fa-brands GeeksforGeeks (teaches the 6.0.0-beta3 CDN)
v7 (July 2025 GA, current 7.3.1) fa-solid / fa-regular / fa-brands + woff2-only fonts Almost nobody — this guide

Version 7.0.0 went GA on July 22, 2025, with 7.1.0 through 7.3.1 shipping since (7.3.1 published July 2026). If your snippet says font-awesome/4.3.0/css/font-awesome.min.css or 6.0.0-beta3, you are inheriting pre-renames icon names, missing brand updates, and — in the v4 case — a completely different CSS architecture.

⚠️ The version-conflict rule

Official docs warn explicitly: if an older Font Awesome version is loading alongside v7, remove the old version. Two versions loaded together cause class and pseudo-element conflicts that surface as wrong icons rendering. This happens most often when a template ships v4 CSS and a plugin injects a v7 kit.

2. Quick Start: The Free CDN Route (No Account)

The fastest legitimate setup — one line in <head>, zero signups, covers the whole free tier:

<!-- Font Awesome 7 free, via cdnjs -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css">

<!-- Then use icons anywhere -->
<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-regular fa-user"></i>

The style prefix is the base class (fa-solid, fa-regular, fa-brands), the icon name is a separate fa-* class. That two-class syntax has been official since v6 and is unchanged in v7 — it replaced the v5 style prefixes (fas, far, fab), which themselves replaced v4's single fa. The old prefixes still resolve for backward compatibility, but every new codebase should use the modern form.

Why not all.min.css in production?

all.min.css is 90,336 bytes raw (18,441 gzipped) and its @font-face rules let the browser lazily fetch each font family you actually reference — but it declares every style. The leaner pattern is per-style CSS:

<!-- Only solid + brands? Load only those stylesheets -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/solid.min.css">
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/brands.min.css">

<!-- solid.min.css: 619 bytes of CSS. The fonts below are fetched on use: -->
<!-- fa-solid-900.woff2: 119.5 KB · fa-brands-400.woff2: 115.4 KB -->

The webfonts are the real weight: fa-solid-900.woff2 is 119,488 bytes, fa-brands-400.woff2 is 115,420 bytes, and fa-regular-400.woff2 is 19,512 bytes. Per-style CSS means the browser downloads only the font files for styles you render — same lazy-fetch behavior as all.min.css, but without 18 KB of upfront stylesheet covering 1,992 icon rules you may never touch.

3. Kits vs CDN vs npm vs Self-Hosting: Choosing the Right Install

Font Awesome's own docs push Kits — a personal CDN with subsetting, custom icon uploads, version switching and conflict detection, loaded with one script:

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

Kits work well, but they require an account, and W3Schools' v5 page has spent years sending beginners to paste a kit code they don't have. Here is the full decision matrix:

Method Account? Best for Watch out
cdnjs CDN (per-style CSS) No Static sites, blogs, quick prototypes, production HTML Pin the exact version; load only the styles you use
Kit (kit.fontawesome.com) Yes (free tier) Teams wanting subsetting UI + custom icons without build config Third-party script dependency; kit code in HEAD; account walls
npm SVG packages No React/Vue/Angular builds — perfect tree-shaking Icon-by-icon imports; covered in section 5
npm fontawesome-free No Bundled webfonts without a CDN dependency Official docs call the "All" inclusive package "a LOT" — prefer per-style imports
Self-host zip No CSP-locked or air-gapped environments all.css "doesn't include 'all' icons anymore" per docs; only Classic + Brands styles
💡 The official-docs detail everyone misses

Since v6, the self-host all.css does not contain every style — it covers Classic (solid/regular/light/thin/duotone-regular) and Brands, and the docs explicitly recommend against shipping it to production. Per-style CSS files are the supported lean path.

4. Webfont+CSS vs SVG+JS: The Rendering Trade-off

Font Awesome ships two rendering engines, and the official docs are candid about both:

  • Webfont+CSS — the classic model. One font file per style, icons as <i class> elements. Works with CSS pseudo-elements, renders in email-safe and resource-restricted contexts, and is the easiest setup. all.min.css at 18.4 KB gzipped + lazily-fetched fonts.
  • SVG+JS — the JavaScript engine swaps <i> tags for inline <svg> elements at runtime, unlocking power transforms, masking, and layering. The docs' own caution: it "can bog a browser down when many icons are used on a single page" — the DOM replacement cost scales with icon count.

The third option most teams never consider is the one modern frameworks made dominant: bundled SVG components (no runtime engine at all). That is what the npm SVG icon packages give you — and it is the same architecture as inline SVG vs sprites vs components in our architecture guide, with identical performance characteristics:

Approach Extra JS FOUC risk Tree-shakes IE/legacy
Webfont + CSS 0 KB Yes — brief blank/tofu until font loads No — font file is monolithic Best
SVG + JS engine ~Runtime bundle Yes — icons appear only after JS runs Partial Worst
SVG components (npm) 0 KB runtime None — server-rendered markup Perfect — per-icon imports Good

If you want the icon-font FOUC problem explained from first principles — including why font-display behaves the way it does — our SVG icons vs icon fonts in 2026 benchmark covers it with Chrome DevTools traces.

5. Font Awesome in React & Next.js (The Tree-Shaking Route)

The official React integration renders SVG components, one import per icon — so your bundle contains exactly the icons you render and nothing else:

npm install @fortawesome/fontawesome-svg-core \
            @fortawesome/react-fontawesome \
            @fortawesome/free-solid-svg-icons \
            @fortawesome/free-brands-svg-icons
// app/components/StarRating.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

export function StarRating() {
  return (
    <div>
      <FontAwesomeIcon icon={faStar} aria-hidden="true" />
      <a href="https://github.com" aria-label="GitHub profile">
        <FontAwesomeIcon icon={faGithub} />
      </a>
    </div>
  );
}

Prefer explicit imports over libraries.add()

Two patterns exist: the per-file explicit import above, and a central library.add(...) registration module. In Next.js App Router, prefer explicit imports — they keep every icon server-renderable in React Server Components with no client-JS dependency, and the build's static analysis tree-shakes them perfectly. The library pattern works but couples icons to runtime registration. Note also that react-fontawesome dropped dynamic importing in v7 — another reason to keep imports static.

Vue, Angular, and the rest

Vue 3 projects use @fortawesome/vue-fontawesome (v7 made it Vue 3-only — Vue 2 apps must stay on the v6-era package). Angular, Svelte, Astro and plain-HTML equivalents are covered in our framework guides: Vue/Nuxt, Angular, Astro, and Svelte/SvelteKit.

6. Pseudo-Elements: Adding Icons via ::before / ::after

Icon fonts have one capability SVG components can't replicate in pure CSS: injecting glyphs into generated content. Font Awesome supports it, with a documented caveat — the docs themselves call pseudo-element usage "more complicated and prone to errors". The recipe:

/* Declare the icon's unicode + font family on the pseudo-element */
.rating::before {
  --fa: "\f005";                       /* fa-star's unicode, from the icon page */
  --fa-font: "Font Awesome 6 Free";    /* style → font family; weight 900 for solid */
  font-weight: 900;
  font-family: var(--fa-font);
  content: var(--fa);
  color: #C1DD2D;
}

.tooltip::after {
  --fa: "\f05a";                       /* fa-circle-info */
  --fa-font: "Font Awesome 6 Free";
  font-weight: 400;                    /* regular style */
  content: var(--fa);
  margin-left: 6px;
}
⚠️ The manual-unicode trap

You must look up each icon's unicode value from the Font Awesome icon page and match the font-weight to the style (900 for solid, 400 for regular/brands) — the browser has no way to map fa-star to \f005 for you in a pseudo-element. A wrong weight silently renders a different style's glyph. If your design relies heavily on pseudo-element icons, that maintenance cost is a sign to move those icons into markup as SVG components.

When pseudo-elements are worth it: email-safe HTML, third-party markup you can't edit (some CMS plugins), and print stylesheets where runtime JS won't run. Otherwise, inline SVG — possibly delivered via SVG as CSS background-image or a compiled sprite — covers the same need with no unicode bookkeeping.

7. Font Awesome 7 Breaking Changes (Migrate Without Breaking)

Version 7 is a true major version. If you maintain a project on v5/v6, these are the documented changes that bite migrations:

  1. Fonts are woff2-only. The .ttf and .woff files are gone from the package. Ancient browsers that lack woff2 support (roughly pre-2016) cannot use the webfont route at all — a non-issue for essentially every current browser, but a hard requirement for embedded/legacy webviews.
  2. Accessibility is decorative-by-default. Icons are now always hidden from screen readers. The v6 "Auto-Accessibility" feature is gone. Meaningful icons need an explicit aria-label (and title no longer substitutes). This is a genuine improvement — the old heuristics guessed wrong too often.
  3. Framework support narrowed. Less and jQuery support dropped; Django, Rails+Turbolinks, Require.js, and the Ruby gem dropped; vue-fontawesome is Vue 3-only; react-fontawesome dropped dynamic importing. Sass moved to Dart Sass — node-sass/libsass and @import are unsupported.
  4. Icon renames. user-large → user, film-simple → film, and more — check the official "what's changed" page during migration; a rename renders as a missing glyph, not an error.
  5. sr-only removed, fa-fw deprecated. Fixed width is now the default behavior, so the class is unnecessary in new code.
  6. Pro+ tiers introduced. Pricing moved to $60/$120/$600 per year (Pro Lite/Pro/Pro Max), with Pro+ variants at $75/$150/$750 adding icon packs of ~200 icons each on top of the expanded Pro styles (light, thin, duotone, sharp).

The free tier is untouched by the pricing shuffle: 1,992 icons, three styles, permissive triple licensing (SIL OFL 1.1 for fonts, CC BY 4.0 for icons, MIT for code) — the same terms that made v5's free tier safe for commercial work. Our icon licensing guide explains what each of those permits in practice.

8. Free vs Pro: What 1,992 Free Icons Actually Covers

Counted from the official v7 metadata file: the free tier includes 1,422 solid icons, 572 brand icons and 169 regular-style slots — 1,992 unique icons with no attribution requirement and no account. Pro's additions are the extra style families (light, thin, duotone, sharp — roughly 200 icons per Pro+ pack) and kit conveniences.

Need Free tier answer
Solid UI icons (arrows, files, media, commerce) 1,422 icons — the standard set
Brand / social logos 572 brand icons — or a dedicated brand set like Simple Icons (3,714 marks, CC0)
Thin / light / duotone art direction Not in free — see Solar's six styles, Phosphor's six weights or HugeIcons for free alternatives
Enterprise / dense dashboards Carbon Icons (IBM, Apache 2.0) or Fluent UI (Microsoft, MIT)

That table is the strategic point: when a project hits a Pro wall, the open-source ecosystem usually has a free equivalent with a permissive license — which is exactly why IconStash indexes 28 libraries (134,701 icons) with instant cross-library search. Compare the aesthetic directly on Font Awesome-adjacent pages like IconStash vs Font Awesome, or browse ready alternatives in the library alternatives hub.

9. When to Skip Font Awesome Entirely

Font Awesome earns its usage share, but three 2026 scenarios argue against the dependency:

  1. You render a small, known set of icons. Five navigation icons do not need a 119 KB font family (even lazily fetched) or a package dependency. Copy those five as SVGs — from an icon's page on IconStash like home or search — and ship 2 KB of markup with zero FOUC.
  2. Brand icons are the priority. The brand landscape changes (X/Twitter, Threads, Bluesky) and Font Awesome's brand set updates on its release cadence. Simple Icons tracks 3,700+ brand marks continuously under CC0 — and pairs with official brand hex colors, e.g. simpleicons-facebook and simpleicons-youtube.
  3. Budget/weight is critical. If Core Web Vitals budgets are tight, per-icon SVG exports beat any font system: no font download, no CSS layer, no FOUC window. The bad SVG performance practices listicle shows what to avoid once you go SVG.

The 10-minute version of that third path: open the IconStash search, find each icon, copy it as SVG or JSX in one click. No install, no account, no license review for the 94.5% of the catalog under MIT/Apache/ISC/CC0.

10. Frequently Asked Questions

How do I use Font Awesome icons for free?

Add the free CDN link to your page head — for example the cdnjs URL for @fortawesome/fontawesome-free 7.x all.min.css — then reference icons with style-prefixed classes like <span class="fa-solid fa-house"></span>. The free tier ships 1,992 unique icons (1,422 solid, 572 brands, 169 regular style slots) under SIL OFL 1.1, CC BY 4.0 and MIT licensing, with no account required. For production, load per-style CSS (solid.min.css is only 619 bytes raw) instead of all.min.css so you fetch only the fonts you actually use.

What is the difference between fa, fas and fa-solid in Font Awesome?

fa is the Font Awesome 4 prefix (e.g. fa fa-car). fas/far/fab were the Font Awesome 5–6 prefixes for solid, regular and brands. In Font Awesome 6+ and 7 the official syntax is the style family as the base class plus fa- prefixed icon name: fa-solid, fa-regular, fa-brands (e.g. <i class="fa-solid fa-house"></i>). The old prefixes still resolve for compatibility, but new code should use the fa-solid / fa-brands form.

Is Font Awesome 7 free or paid?

Both. The free tier includes 1,992 icons across solid, regular and brand styles, licensed under SIL OFL 1.1, CC BY 4.0 and MIT. Pro adds more styles (light, thin, duotone, sharp) and icon packs of around 200 icons each, at $60/$120/$600 per year for Pro Lite/Pro/Pro Max, or $75/$150/$750 for the Pro+ tiers introduced with Font Awesome 7 in July 2025.

How much does Font Awesome slow down my website?

A naive all-in-one setup ships all.min.css at about 90 KB raw / 18.4 KB gzipped, then downloads each font family you reference: fa-solid-900.woff2 is 119.5 KB, fa-brands-400.woff2 is 115.4 KB and fa-regular-400.woff2 is 19.5 KB. Loading only the styles you use — solid.min.css is just 619 bytes — and self-hosting the woff2 files cuts the payload dramatically. Font Awesome 7 ships woff2 only, dropping the old ttf and woff formats entirely.

How do I use Font Awesome icons in React?

Install the official SVG icon packages: npm install @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons, then import individual icons and pass them to the FontAwesomeIcon component. Because each icon is imported explicitly, the SVG approach tree-shakes perfectly — your bundle contains only the icons you render, with no font download and no FOUC. The @fortawesome/fontawesome-free npm package, at about 1.76 million weekly downloads, is the webfont route for traditional HTML projects.

What changed in Font Awesome 7?

Font Awesome 7 (GA July 2025) dropped Less and jQuery support, removed the .ttf and .woff font formats (woff2 only), migrated Sass to Dart Sass, dropped dynamic importing from react-fontawesome, made vue-fontawesome Vue 3-only, and changed accessibility so icons are decorative by default and always hidden from screen readers — you now add aria-label explicitly for meaningful icons. Several icons were renamed (user-large to user, film-simple to film), the sr-only class was removed, and fa-fw was deprecated because fixed width is now the default.