How to simply use Font Awesome 6 in React

If you have heard about Font Awesome, you know how helpful it is for web developers. In case you have not, Font Awesome is a place where you can find great icons for your projects.
With the new version 6 released, we have access to many more icons than in previous versions.

Font Awesome has five types of icons available.
fas for Font Awesome solid, fal for Font Awesome Light, and others for Thin, Regular, and Duotone. These add a great deal of flexibility to UI/UX design.
However, the Light, Thin, and Duotone are available for pro members only.

It is available for multiple frameworks like HTML, React, Angular, and Vue 💪🏻.

Installation

Let us get started with installing the libraries required for react-fontawesome to work.

// If you are using npm:
$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

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

The packages here are for the free version. If you’re looking to utilize new pro icons and styles, look at their site for additional installation and setup directions.

Implementation

With that done, we can start implementing these icons throughout our app.
There are different ways you can use the icons. Here, we will see the way that is usually used and is effortless to the greatest extent.
We import the fontawesome-svg-core module into our root level of the application, i.e., App.js, and use the library.add method to add them to the app.

//App.js
import { library } from "@fortawesome/fontawesome-svg-core";
import { faMoon, faRocket } from "@fortawesome/free-solid-svg-icons";

library.add(faMoon, faRocket);
…

All icons can be found in Font Awesome’s icon library.

That completes the implementation of the icons in the application.
Let us create a component called Component.js. Since the icons are already added to our library in App.js, we just need to import this:

// Component.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Component = () => {
  return (
    <div className="App">
      To the Moon:
      <FontAwesomeIcon icon="moon" />
      <FontAwesomeIcon icon="rocket" />
    </div>
  );
};

By adding faMoon and faRocket to the library, we can refer to them throughout the app using their icon string names moon and rocket (in lowercase letters). If there are two parts like faTruckMonster then it would be truck-monster. Just pay attention to the names displayed on the icon cards on the website.

So initially, the icons will be in their default form, squished and small.

<FontAwesomeIcon icon="moon" color="silver" size="3x" />
<FontAwesomeIcon icon="rocket" color="rebeccapurple" size="2x" />

FontAwesomeIcon component can take a few different props to change the icon style. Here we used the color and size props. The size prop expects a string value like xs, lg, 2x, 3x, etc.

There are quite a few more props that can also be passed. Notably, the rotation and pulse boolean props will have the icon rotate on itself.

We can add custom CSS to them in the .css file. Since the icons are SVG we can change the font size and color properties to something to our liking.

Note: Don't use the CDN link of FontAwesome in your index.html file. It will decrease the performance of your site.

You are now able to use icons in any app that you want. So, build projects and have fun with them.

Thanks for Reading!

Comments

[Imia Hazel]

Fontawesome is one of my favorite choices among icons. Thanks for the detailed tutorial about using it in React. I will give it a try for my next project.

[Sobhan Dash]

Great! Glad it could help