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

> Master the Font Awesome 7 prefix system including fas, far, fab, and more. Learn how these codes determine icon family and style for precise SVG rendering in this complete guide.

- Repository: [Font Awesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome)
- Tags: deep-dive
- Published: 2026-03-01

---

**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`](https://github.com/FortAwesome/Font-Awesome/blob/main/js/fontawesome.js) and the compatibility layer in [`js/v4-shims.js`](https://github.com/FortAwesome/Font-Awesome/blob/main/js/v4-shims.js).

### Family to Default Prefix Mapping

In [`js/fontawesome.js`](https://github.com/FortAwesome/Font-Awesome/blob/main/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.

```javascript
// 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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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:

```html
<!-- 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:

```javascript
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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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:

```javascript
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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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.