How to Add and Use Font Awesome 5 in React App

Last updated on: by Editorial Team

React js Font Awesome tutorial; In this tutorial, you will learn how to implement Font Awesome icons library in React application using the react font-awesome package. Moreover, we will share how to use font awesome in react and that too from absolutely scratch.

Font Awesome is a helping hand for modern websites. It offers a beautiful and enormous icons library that contains social media logos, other daily use icons with svg support. Font awesome caters icon need to a large extent; it adds profound support in creating user interfaces. Thanks to its creators.

In React js, you can create font awesome icons component and supercharge your ui development with svg support. However, if you are a novice or rookie react developer and don’t know how to integrate font awesome in react and how to use this icons library in react, then jump on the subsequent instruction to get started.

Implement and Use Font Awesome Icons in React Js

  • Step 1: Install React Project
  • Step 2: Add Bootstrap Package
  • Step 3: Add Font Awesome Package
  • Step 4: Use Solid Font Awesome Icons
  • Step 5: Font Awesome Loading Icons
  • Step 6: Start React App

Install React Project

Theoretically, we use create-react-app for creating a fresh new React application.

Let’s begin the first step by running the given command through your terminal screen:

npx create-react-app react-blog

Move to the new app’s root:

cd react-blog

Add Bootstrap Package

Head over to the console, type command and hit enter to install Bootstrap CSS packages in react.

npm install bootstrap

Add Font Awesome Package

Font awesome offers various packages of icons that include free and pro packages.

To install font-awesome in react requires multi npm packages; you can use the given command to install the icon libraries.

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

Let us import bootstrap and font awesome packages in src/App.js file.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

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

 
function App() {
  return (
    <div>
      <h2>React Js Font Awesome Example</h2>
    </div>
  );
}
 
export default App;

Use Solid Font Awesome Icons

Now, you will learn how to use use solid Font Awesome icons in react, but before that you have to create a react component file, hence create src/components folder and create the FontAwesomeIcons.js file.

Upload src/components/FontAwesomeIcons.js file.

import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAddressCard, faAirFreshener } from '@fortawesome/free-solid-svg-icons'

class FontAwesomeIcons extends React.Component {  
 
    render(){
        return(
            <div>
                <h3><FontAwesomeIcon icon={faAddressCard} color="blue" /> Font Awesome Address Icon</h3>
                
                <h3><FontAwesomeIcon icon={faAirFreshener} color="red" /> Font Awesome Solid Icon</h3>
            </div>
        )
    }
     
}  
   
export default FontAwesomeIcons;

Font Awesome Loading Icons

Loading spinners are very useful in informing the user, especially when the HTTP request or any other task is being performed in the background; spinners tell users about the ongoing process.

Font awesome offers custom loading spinners that are easy to implement in react using the spin attribute as we did in the following code snippet.

import React from 'react'

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

class FontAwesomeIcons extends React.Component {  
 
    render(){
        return(
            <div>
                <h3><FontAwesomeIcon icon={faSpinner} color="blue" spin/></h3>
                
                <h3><FontAwesomeIcon icon={faCircleNotch} color="red" spin/></h3>
            </div>
        )
    }
     
}  
   
export default FontAwesomeIcons;  

Start React App

The awesomeness of Font awesome has been added to React, and now you have to start the react app.

npm start

How to Add and Use Font Awesome 5 in React App

Conclusion

In this tutorial, we learned how to add font awesome in react js and use font awesome 5 in react js. Furthermore, how to add font awesome loading spinners in react js app, we have described all the essential steps which help implement font awesome 5 in react js application.