The @fortawesome/fontawesome-free package contains all files available through the Free and Pro CDNs, organized into the following directories:

• /js: All JavaScript files for the SVG with JS implementation.
• /css: All CSS files for the Web Fonts with CSS implementation.
• /sprites: SVG icons packaged in a sprite format.
• /scss: SCSS pre-processor files for the Web Fonts with CSS implementation.
• /webfonts: Accompanying files required for Web Fonts with CSS.
• /svg: Individual icon files in SVG format.

Font Awesome follows Semantic Versioning (<major>.<minor>.<patch>), but version 7 deviates from standard SemVer in the following ways:

• Design Changes: Any release may update the design, look-and-feel, or branding of an existing icon.
• Backward Compatibility: Patch versions will never intentionally break backward compatibility. However, minor releases may include backward-incompatible changes (check UPGRADING.md for instructions).
• Icon Retention: A minor or patch release will never remove icons.
• Bug Fixes: Bug fixes are typically patch releases, but if they require backward-incompatible changes, they are released as minor versions.

While @fortawesome/fontawesome-common-types contains the shared definitions used across Font Awesome 7 JavaScript packages, you should not import types directly from this package. Instead, all types are re-exported through the main @fortawesome/fontawesome-svg-core package. To ensure compatibility and follow best practices, always import your types from @fortawesome/fontawesome-svg-core.

import {
  IconName
} from `@fortawesome/fontawesome-svg-core`

const myIcon: IconName = "..."

To use the Font Awesome brand icons in an SVG with JavaScript project, install the @fortawesome/free-brands-svg-icons package using npm or yarn.

$ npm i --save @fortawesome/free-brands-svg-icons
# or
$ yarn add @fortawesome/free-brands-svg-icons

Comprehensive documentation for Font Awesome version 7, including getting started guides and advanced topics, is available at the official documentation site.

https://fontawesome.com/docs

To use the SVG with JavaScript version of Font Awesome, install the @fortawesome/fontawesome-svg-core package using npm or yarn.

$ npm i --save @fortawesome/fontawesome-svg-core

If you are moving from an older version to version 7, follow the specific upgrading guides provided for your platform:

• Web: Use the Web upgrading guide.
• Desktop: Use the Desktop upgrading guide.

To use the Font Awesome Free Regular SVG icons in your project via the SVG with JavaScript version, install the package using npm or yarn.

$ npm i --save @fortawesome/free-regular-svg-icons

or

$ yarn add @fortawesome/free-regular-svg-icons

To use the official Font Awesome 7 NPM package in your project, install @fortawesome/fontawesome-free using your preferred package manager.

$ npm i --save @fortawesome/fontawesome-free

or

$ yarn add @fortawesome/fontawesome-free

You can install the @fortawesome/free-solid-svg-icons package using npm or yarn. This package provides the Solid icon set for use with the SVG with JavaScript version of Font Awesome.

$ npm i --save @fortawesome/free-solid-svg-icons

# or

$ yarn add @fortawesome/free-solid-svg-icons

Font Awesome uses a mutation-based approach to transform HTML icon elements into SVGs.

1. Detection: The observe(options) function uses a MutationObserver to watch for new nodes or attribute changes (like class updates) in the DOM.
2. Parsing: When a candidate node is found, parseMeta(node) extracts the prefix, iconName, transform, and extra attributes (styles, classes, etc.).
3. Mutation: Depending on the configuration (config.autoReplaceSvg), the library uses either the replace mutator (which removes the original node and inserts an SVG) or the nest mutator (which replaces the node's inner HTML with the SVG).
4. Rendering: The render(iconDefinition) function generates the abstract SVG structure, which is then converted into real DOM elements via convertSVG.

The svgSymbols plugin allows you to specify a specific SVG symbol to be used for an icon via the data-fa-symbol attribute. This is useful when working with icon sets that utilize the <symbol> element within an SVG sprite.

<!-- Example of specifying a symbol ID -->
<span data-fa-symbol="icon-id-here"></span>