Home > References > Web Development > Reactjs references

How to use font awesome in React and Typescript

Last updated : July 13, 2022

This article describes how to use font-awesome with a React Js project with Typescript. It's a bit different from React and Javascript approaches.

To use font awesome

  1. Install font-awesome npm packages
  2. Init the font-awesome library in index.js or index.tsx
  3. Use the icons with the FontAwesome component

To install font-awesome packages
using NPM:

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
npm install --save @fortawesome/free-brands-svg-icons

using Yarn:
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome
yarn add @fortawesome/free-brands-svg-icons

Initializing the font-awesome library

The initialization is only necessary if you plan to use the font-awesome library globally in your application. That way you can avoid importing icon types in every component you use font-awesome. If you prefer importing them at the Component level you can skip to the next section. I initialize font-awesome in the index.tsx file since it is at a higher level than all the other components in the application.

import { faB, faCheckSquare, faCoffee, faDatabase, faHouseLaptop, faS, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
library.add(faB, faS, faHouseLaptop, faCheckSquare, faCoffee, faDatabase, faWindowMaximize)

Here, you will have to import all the icons you intend to use throughout the application.

How to use the icons in the React Components?

If you have initialized the font-awesome library, you can use the FontAwesomeIcon component like below.

<FontAwesomeIcon icon ={["fas", "house-laptop"]} />

Note that I have imported fas and house-laptop as faS and faHouseLaptop in index.tsx file. If you decide to import the icons at the page level, the FontAwesomeIcon component will like below.

<FontAwesomeIcon icon={faHouseLaptop} />

You need to have the faHouseLaptop import on the page.

import { faHouseLaptop } from "@fortawesome/free-solid-svg-icons";

How to add a specific font-awesome icon in React Typescript?

To add an icon to a page, go to Font Awesome site and search for the icon you want. Let's say you want <FontAwesomeIcon icon="fa-solid fa-align-right" /> on your page. But since you use Typescript, you will get a type error.

This is how to make it work with Typescript.

<FontAwesomeIcon icon="fa-solid fa-align-right" />

The icon is fa-solid fa-align-right.
In font-awesome Typescript, fa-solid is represented by fas and fa-align-right by align-right. The icon property type is IconProp instead of a string. Therefore, the correct usage is:
<FontAwesomeIcon icon={["fas", "align-right"]} />

For the above align-right icon, you need to import and initialize align-right as below.

import { faS, faAlignRight } from '@fortawesome/free-solid-svg-icons';
library.add(faS, faAlignRight)

The IconProp type consists of IconPrefix and IconName. The valid Icon prefixes are

"fas" -> solid
"far" -> regular
"fal" -> light
"fat" -> thin
"fad" -> duotone
"fab" -> brand

Another example:
<FontAwesomeIcon icon="fa-brands fa-github-square" />
translates to:
<FontAwesomeIcon icon={["fab", "github-square"]} />
and needs imports:

import { fab, faGithubSquare } from '@fortawesome/free-brands-svg-icons'
library.add(fab, faGithubSquare)

How to add font-awesome icons in React Typescript without initializing?

To add the font-awesome icons at the page level, simply use the icon name in-place of the IconProp type. <FontAwesomeIcon icon={faGitSquare} />

Lance
By: Lance
Lance is a software engineer with over 15 years of experience in full-stack software development.
Read more...

Comments are disabled

No Comments