Font Awesome 7 Prefix System Explained: Complete Guide to fas, far, fab, and More

Font Awesome 7 uses a prefix system where short codes like fas, far, and fab identify the icon family (Free, Pro, Brands, Duotone, Sharp) and style (solid, regular, light, thin) to render the correct SVG variant.

The prefix system in Font Awesome 7 is the core mechanism that maps CSS classes and JavaScript API calls to specific icon sets within the FortAwesome/Font-Awesome repository. By decoupling the icon name from its visual weight and family membership, the system allows the same name (e.g., user) to exist as a solid, regular, or duotone variant without naming collisions.

Font Awesome 7 Prefix Reference Table

The following table maps every major prefix to its family, style weight, and corresponding CSS class:

Prefix	Meaning	Family	Style (Weight)	CSS Class
fas	Free Solid	Font Awesome 7 Free	solid (900)	fa-solid
far	Free Regular	Font Awesome 7 Free	regular (400)	fa-regular
fal	Free Light	Font Awesome 7 Free	light (300)	fa-light
fat	Free Thin	Font Awesome 7 Free	thin (100)	fa-thin
fad	Free Duotone	Font Awesome 7 Duotone	duotone	fa-duotone
fab	Brands	Font Awesome 7 Brands	brand (400)	fa-brands
fass	Sharp Solid	Font Awesome 7 Sharp	solid (900)	fa-sharp fa-solid
fasr	Sharp Regular	Font Awesome 7 Sharp	regular (400)	fa-sharp fa-regular
fasl	Sharp Light	Font Awesome 7 Sharp	light (300)	fa-sharp fa-light
fast	Sharp Thin	Font Awesome 7 Sharp	thin (100)	fa-sharp fa-thin

When the JavaScript core resolves an icon, it uses the prefix to look up the family and then the specific icon definition within that family’s namespace.

How Prefixes Are Defined in the Source Code

The mapping logic resides primarily in js/fontawesome.js and the compatibility layer in js/v4-shims.js.

Family to Default Prefix Mapping

In js/fontawesome.js, a Map structure defines which short prefix belongs to each icon family. The Free family defaults to fas, the Brands family to fab, and the Duotone family to fad. This mapping allows the library to fall back to a family’s default prefix when none is specified.

// Simplified representation of the internal Map in js/fontawesome.js
const familyDefaultPrefixes = new Map([
  ['classic', 'fas'],  // Free family
  ['brands', 'fab'],   // Brands family
  ['duotone', 'fad'],  // Duotone family
  ['sharp', 'fass']    // Sharp family
]);

Style to Prefix Mapping (STYLE_TO_PREFIX)

The object STYLE_TO_PREFIX in js/fontawesome.js maps numeric font weights and style names to their corresponding short prefixes. For the classic (Free) family, the mapping is:

• 900 → fas (solid)
• 400 → far (regular)
• 300 → fal (light)
• 100 → fat (thin)
• duotone → fad

This table ensures that when you request a specific font weight, the library translates it into the correct prefix for SVG generation.

Legacy Compatibility

The js/v4-shims.js file maintains backward compatibility with Font Awesome 4’s single fa prefix. It maps the legacy fa class to the new prefix system by treating fa as an alias for the classic family prefixes (fas, far, fal, fat, fad). This allows older HTML markup to function without modification while internally routing to the new prefix logic.

Using Font Awesome 7 Prefixes in Practice

HTML CSS Classes

In standard HTML, you invoke a prefix by combining the base fa class with a style class. The style class derives directly from the prefix:

<!-- Solid (fas) -->
<i class="fa-solid fa-user"></i>

<!-- Regular (far) -->
<i class="fa-regular fa-circle"></i>

<!-- Light (fal) -->
<i class="fa-light fa-heart"></i>

<!-- Thin (fat) -->
<i class="fa-thin fa-bell"></i>

<!-- Duotone (fad) -->
<i class="fa-duotone fa-gear"></i>

<!-- Brands (fab) -->
<i class="fa-brands fa-github"></i>

<!-- Sharp Solid (fass) -->
<i class="fa-sharp fa-solid fa-star"></i>

The fa- prefix in the class name is static; the segment following it (solid, regular, brands, etc.) corresponds to the short prefix used internally by the JavaScript engine.

JavaScript API

When using the modular JavaScript API, you import icon packs that embed their prefix metadata. You can then reference icons explicitly by prefix:

import { library, icon } 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';

// Register icon packs (prefixes are intrinsic to each pack)
library.add(fas, far, fab);

// Explicit prefix selection
const solidUser = icon({ prefix: 'fas', iconName: 'user' });
const regularUser = icon({ prefix: 'far', iconName: 'user' });
const brandGitHub = icon({ prefix: 'fab', iconName: 'github' });

// Append to DOM
document.body.appendChild(solidUser.node);
document.body.appendChild(regularUser.node);
document.body.appendChild(brandGitHub.node);

If you omit the prefix property, the library falls back to the default short prefix for the family registered in js/fontawesome.js (typically fas for the classic family).

Dynamic Prefix Resolution

For applications that need to switch styles programmatically, you can implement a resolver that maps families and styles to their prefixes using the same logic found in the core library:

function getIcon(family, style, name) {
  // Family-style to prefix mapping (mirrors STYLE_TO_PREFIX in fontawesome.js)
  const styleMap = {
    classic: { 
      solid: 'fas', 
      regular: 'far', 
      light: 'fal', 
      thin: 'fat', 
      duotone: 'fad' 
    },
    brands: { default: 'fab' },
    sharp: { 
      solid: 'fass', 
      regular: 'fasr', 
      light: 'fasl', 
      thin: 'fast' 
    }
  };

  const prefix = styleMap[family]?.[style] || styleMap[family]?.default || 'fas';
  return icon({ prefix, iconName: name });
}

// Usage: Sharp Light star icon
const sharpStar = getIcon('sharp', 'light', 'star');

This approach leverages the decoupled architecture where the prefix acts as the lookup key for the specific icon variant within its family namespace.

Summary

• Font Awesome 7 prefix system uses short codes (fas, far, fab, fad, etc.) to identify both the icon family (Free, Brands, Duotone, Sharp) and the specific style (solid, regular, light, thin).
• Core mapping logic resides in js/fontawesome.js, where a Map structure links families to default prefixes and the STYLE_TO_PREFIX object maps font weights to prefix codes.
• HTML usage translates prefixes into CSS classes (fa-solid, fa-regular, fa-brands) where the suffix derives directly from the short prefix.
• JavaScript API allows explicit prefix selection via the prefix property in the icon configuration object, falling back to the family default when omitted.
• Backward compatibility is maintained through js/v4-shims.js, which routes the legacy fa prefix to the appropriate modern prefix based on the family context.

Frequently Asked Questions

What is the difference between fas and far in Font Awesome 7?

The fas prefix stands for Font Awesome Solid (weight 900), while far stands for Font Awesome Regular (weight 400). Both belong to the classic (Free) family, but fas renders icons with a filled, bold appearance suitable for emphasis, whereas far uses thinner strokes ideal for outlined interfaces. In the source code at js/fontawesome.js, these map to the 900 and 400 entries in the STYLE_TO_PREFIX object respectively.

How do I use the Font Awesome 7 duotone prefix?

Use the fad prefix (or fa-duotone class in CSS) to access icons with two-tone color support. When using the JavaScript API, import from @fortawesome/pro-duotone-svg-icons (or the appropriate package) and reference the icon with prefix: 'fad'. The duotone style allows you to control the primary and secondary colors separately via CSS variables, as the SVG paths are split into two distinct layers within the icon definition.

Why does Font Awesome 7 use a prefix system instead of single classes?

The prefix system decouples the icon name from its visual weight and family membership, allowing the same name (e.g., user) to exist across multiple styles (solid, regular, light) and families (classic, sharp, duotone) without naming collisions. As implemented in js/fontawesome.js, the prefix acts as a lookup key that routes to the correct family namespace and style weight, enabling extensibility for new families (like Sharp or Utility) while maintaining backward compatibility through the v4 shims layer.

How do I migrate from Font Awesome 4 to the new prefix system?

Font Awesome 7 includes a compatibility layer in js/v4-shims.js that automatically maps the legacy fa prefix to the appropriate modern prefixes (fas, far, etc.). If you are using the CDN or bundled JavaScript, include the v4-shims file to keep existing <i class="fa fa-user"></i> markup functional. For new development, replace fa with the explicit style class (e.g., fa-solid, fa-regular) or the corresponding short prefix in JavaScript configurations to align with the current family-based architecture.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}