@fortawesome/react-fontawesome

What is @fortawesome/react-fontawesome?

The @fortawesome/react-fontawesome package is a React component for using Font Awesome icons in React applications. It provides a convenient way to include Font Awesome icons in your project and supports various features such as sizing, coloring, animations, and more.

What are @fortawesome/react-fontawesome's main functionalities?

Displaying icons

This feature allows you to display Font Awesome icons by importing the FontAwesomeIcon component and the specific icon you want to use from the free or pro libraries.

{"import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} />
    </div>
  );
}"}

Styling icons

You can style icons by passing props such as 'size' for the icon size and 'color' for the icon color.

{"import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} size='lg' color='blue' />
    </div>
  );
}"}

Animating icons

This feature allows you to animate icons, such as adding a spinning effect to icons by using the 'spin' prop.

{"import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faSpinner} spin />
    </div>
  );
}"}

Layering and transforming icons

You can layer multiple icons on top of each other and apply transformations such as shrinking, rotating, or moving the icon.

{"import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircle, faCheck } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <span className='fa-layers fa-fw'>
      <FontAwesomeIcon icon={faCircle} color='green' />
      <FontAwesomeIcon icon={faCheck} inverse transform='shrink-6' />
    </span>
  );
}"}

Other packages similar to @fortawesome/react-fontawesome

react-icons

React-icons is a package that includes a large set of icons from various icon libraries (such as Font Awesome, Material Design, and Ionicons). It is similar to @fortawesome/react-fontawesome but provides access to multiple libraries in one package, which can be more convenient if you need icons from different sources.

README

react-fontawesome

Font Awesome React component using SVG with JS

• react-fontawesome
  • Documentation
  • Compatibility
  • How to Help
  • Contributors
  • Releasing this project (only project owners can do this)

Documentation

Version 3.0.0 is a major update for react-fontawesome with the library being rewritten from plain JS to TypeScript, amongst a number of performance improvements and optimisations to the FontAwesomeIcon React component.

While it is a major update, there should be no breaking changes aside from those noted in the Compatibility section below.

Compatibility

With the release of FontAwesome v7, we have marked v5 as End-of-Life. Both v6 and v7 will continue to be supported.

In react-fontawesome v3.0.0 we have also dropped support for End-of-Life versions of React and Node.js as well as IE11 browser support.

If you need to use react-fontawesome with legacy versions, please consult the table below.

React version	react-fontawesome version	FontAwesome Core versions	Node versions
>= 18.0.0	3.x.x	6.x, 7.x	20.x, 22.x, 24.x
>= 16.3.0	0.2.x	5.x, 6.x, 7.x	18.x, 20.x
< 16.3.0	0.1.x	5.x, 6.x	14.x, 16.x

Official documentation is hosted at fontawesome.com:

Check it out here

How to Help

Review the following docs before diving in:

• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

And then:

• Check the existing issues and see if you can help!

Contributors

The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. We'd like to take a moment to recognize them.

Name	GitHub
Nate Radebaugh	@NateRadebaugh
Kirk Ross	@kirkbross
Prateek Goel	@prateekgoel
Naor Torgeman	@naortor
Matthew Hand	@mmhand123
calvinf	@calvinf
Bill Parrott	@chimericdream
Mike Lynch	@baelec
Lukáš Rod	@rodlukas
Proudust	@proudust
Tiago Sousa	@TiagoPortfolio
Alexey Victorov	@AliMamed
Calum Smith	@cpmsmith
squiaios	@squiaios
WyvernDrexx	@WyvernDrexx
Jon Defresne	@jdufresne
Charles Harwood	@charles4221
Font Awesome Team	@FortAwesome

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

Releasing this project (only project owners can do this)

See DEVELOPMENT.md

Changelog

3.0.2 (2025-09-01)

Bug Fixes

• constants: resolve JSON import errors for vite/remix users (850a804)
• test: flaky converter performance test in CI (8f43f0e)
• WCAG: correctly read aria-label and ensure aria-hidden is false when label present (19ddeb3)

Testing

• converter: fix unit test for aria-label handling (8c49cdc)
• remove flaky test (f9605ab)
• remove unnecessary test conditionals for v5 (fd5bf9b)

Chores

• don't include release notes in release commit (78ce3f8)
• dx: integrate semantic-release and commitlint (de5b958)
• remove dependency on semver (066019b)
• update release config for better changelogs (7d2c242)

CI/CD

• actions: refactor CI workflow to split some jobs out of matrix (d0d1fb6)
• actions: use commitlint github action (4ab8726)
• use public npm registry for npm ci (69ea57b)