Understanding Font Awesome 7 Icon Family Styles: Classic, Duotone, Sharp, and More

Font Awesome 7 organizes icons into visual families—Classic, Duotone, Sharp, and experimental variants—that you select using single CSS classes like fa-solid, fa-duotone, or fa-sharp.

The FortAwesome/Font-Awesome repository version 7 introduces a family-style system that moves beyond simple weight variations, giving developers precise control over icon aesthetics through a structured metadata schema and JavaScript lookup architecture.

Font Awesome 7 Icon Family Overview

Font Awesome 7 categorizes every icon into distinct visual families. Each family represents a specific design language, while styles within those families control weight and rendering mode.

Classic Family

The Classic family provides the original Font Awesome aesthetic and remains the default across the library. According to metadata/icon-families.json, Classic supports the widest range of styles:

• solid, regular, light, thin – Standard weight variations
• duotone – Two-layer icons with independent primary and secondary paths
• brands – Logo icons in the original style

When you use fa-solid or fa-regular without specifying a family, the Classic family renders by default.

Duotone Family

The Duotone family renders icons using two separate SVG paths. In metadata/icon-definition.schema.json, duotone icons must declare an array of exactly two path strings. The rendering engine maps these to <path class="fa-primary"> and <path class="fa-secondary"> elements, allowing independent CSS styling of each layer.

Sharp Family

Sharp icons feature squarer, more angular outlines designed for modern "flat" UI languages. The Sharp family supports sharp and sharp-duotone styles, selected via the fa-sharp and fa-sharp-duotone classes.

Sharp Duotone Family

Sharp-Duotone combines the angular geometry of the Sharp family with the two-tone layering system. This requires the fa-sharp-duotone class prefix and specific Sharp-Duotone SVG assets.

Experimental Families

The source code references additional experimental families including chisel, etch, graphite, jelly, jelly-duo, and jelly-fill. These niche visual styles use dedicated family classes like fa-jelly and are defined alongside the core families in the metadata registry.

How Font Awesome 7 Family Styles Work Internally

The family system relies on a strict mapping between CSS classes, JavaScript lookup tables, and SVG metadata schemas.

Metadata Registry

The canonical source of family definitions lives in metadata/icon-families.json. Each family entry maps a name (e.g., "classic" or "sharp") to its supported styles and includes the familyStylesByLicense object. This object specifies which styles are available under the free license versus the Pro license, controlling runtime access permissions.

SCSS Configuration

In scss/_variables.scss, the $family variable establishes the default font family as "Font Awesome 7 Free". This variable drives the CSS custom properties that style definitions consume, ensuring that undeclared icons fall back to the Classic family automatically.

JavaScript Lookup Tables

The core library in js-packages/@fortawesome/fontawesome-svg-core/index.js constructs three critical mapping tables at runtime:

• _PREFIX_TO_STYLE – Converts CSS prefixes like fa-duotone to internal style identifiers (duotone)
• _STYLE_TO_PREFIX – Reverses the mapping for class generation
• _FAMILY_TO_PREFIX – Associates family names with their CSS prefixes (e.g., classic maps to fa)

The icon() helper function uses these tables to resolve ambiguous class combinations into specific SVG renders.

Runtime Validation

The import.macro.js module contains guards that prevent illegal family-style combinations. As implemented in the source, the macro throws an error when requesting Duotone styles for non-Classic families:

if (FAFamilyDuotoneId === style && family && FAFamilyClassicId !== family) {
  // Error: Duotone styles are restricted to the Classic family
}

This enforcement ensures that fa-duotone classes never incorrectly render Sharp-family assets.

SVG Rendering Pipeline

For duotone variants, the schema in metadata/icon-definition.schema.json mandates exactly two path definitions. During DOM insertion, the JavaCore library splits these into separate SVG path elements with distinct classes, enabling the layered color effects that distinguish duotone icons from single-path solid variants.

Implementing Font Awesome 7 Family Styles

Basic HTML Implementation

Load the CSS and apply family-style classes directly to <i> elements:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" rel="stylesheet">

<!-- Classic Solid -->
<i class="fa-solid fa-mug-hot"></i>

<!-- Classic Regular -->
<i class="fa-regular fa-face-smile"></i>

<!-- Classic Duotone -->
<i class="fa-duotone fa-bell"></i>

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

<!-- Sharp Duotone -->
<i class="fa-sharp-duotone fa-heart"></i>

Styling Duotone Icons with CSS

Target the primary and secondary layers independently using the classes injected by the rendering engine:

/* Secondary layer styling */
.fa-duotone .fa-secondary {
  opacity: 0.4;
  color: #ff6f61;
}

/* Primary layer styling */
.fa-duotone .fa-primary {
  color: #2c3e50;
}

<i class="fa-duotone fa-bell"></i>

JavaScript API Integration

Install the specific family packages via npm and register them with the library:

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-duotone-svg-icons @fortawesome/free-sharp-svg-icons

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faCamera } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-duotone-svg-icons';
import { faStar } from '@fortawesome/free-sharp-svg-icons';

// Icons carry their family metadata in the import path
library.add(faCamera, faBell, faStar);

dom.watch();

The dom.watch() method scans for class combinations like fa-sharp and automatically injects the correct SVG family assets.

Accessing Family Metadata Programmatically

Inspect the family registry directly from the metadata JSON:

import families from '../metadata/icon-families.json';

// Check which styles are free in the Sharp family
console.log(families['sharp'].familyStylesByLicense.free);
// Output: [{ family: "classic", style: "sharp" }]

Summary

• Font Awesome 7 uses a family-style system where Classic, Duotone, Sharp, and Sharp-Duotone represent distinct visual design languages.
• Family definitions and license restrictions reside in metadata/icon-families.json, while the default family is set in scss/_variables.scss.
• The JavaScript core (index.js) maintains lookup tables (_PREFIX_TO_STYLE, _FAMILY_TO_PREFIX) that resolve CSS classes to specific SVG assets.
• Duotone icons require exactly two path definitions split into fa-primary and fa-secondary classes for independent styling.
• The import.macro.js runtime guards prevent invalid combinations like requesting Duotone styles for non-Classic families.

Frequently Asked Questions

What is the difference between Font Awesome 7 Classic and Sharp families?

Classic icons maintain the original rounded, friendly aesthetic that has defined Font Awesome since version 4, supporting weights from solid to thin plus duotone. Sharp icons feature squared terminals and angular geometry for modern flat interfaces, available in solid and duotone variants only. Both families use the same underlying icon names but render different SVG path data.

Can I use Duotone icons with the Sharp family?

No. According to the runtime validation in js-packages/@fortawesome/fontawesome-svg-core/import.macro.js, Duotone styles are restricted to the Classic family. The Sharp family offers Sharp-Duotone (fa-sharp-duotone) as a separate two-layer variant with angular geometry rather than rounded curves.

How do I change the color of only one layer in a Duotone icon?

Target the .fa-primary or .fa-secondary classes injected by the SVG renderer. The secondary layer renders first in the DOM and typically serves as the background or shadow element, while the primary layer renders on top. Adjust opacity and color properties on these classes to achieve two-tone effects without modifying the underlying icon definitions.

Where does Font Awesome 7 store the list of available families and styles?

The canonical registry is metadata/icon-families.json at the repository root. This file maps each family name to its supported styles and includes the familyStylesByLicense object that distinguishes free from Pro-tier assets. The JavaScript and SCSS build processes consume this file to generate the lookup tables and CSS rules that power the family system.

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