How to Integrate and Use Font Awesome Icons in React Js

Throughout this React js font awesome example, you will learn how to add Font awesome library in React js app. How to use font awesome icons in react application using the font awesome packages such as font-awesome-svg-core, free-solid-svg-icons, and react-font awesome.

You will learn how to install a font-awesome package, how to create react js component and use diffrent font awesome icons in react js component; also, we will explain how to display svg loading spinner using the font awesome icons library.

React Js Font Awesome Icons Integration Example

  • Step 1: Download React App
  • Step 2: Install Font Awesome Libraries
  • Step 3: Include and Use Font Awesome Icons
  • Step 4: Integrate Loading Icons
  • Step 5: View App in Browser

Download React App

To install the React app, you have to use the create-react-app followed by your react project name.

You can download the new react app swiftly using the provided command.

npx create-react-app react-demo

Step inside the react app.

cd react-demo

Install Font Awesome Libraries

In this step, you require to install the font awesome libraries; Since font awesome icons come in various looks and feel so, you will be installing all the given packages in react js.

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

To use the awesome font icons in react you need to import the FontAwesomeIcon module from ‘@fortawesome/react-fontawesome’ package in src/App.js file.

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

 
function App() {
  return (
    <div>
    </div>
  );
}
 
export default App;

After that create UserProfile.js file in components folder then, you require to register it into the App.js file as given below.

import React from 'react';

import './App.css';

import UserProfile from './components/UserProfile';

function App() {
  return (
    <div className="App">
      <UserProfile />
    </div>
  );
}

export default App;

Include and Use Font Awesome Icons

To show icons, you have to visit here and select the icon you want to display in your react app, then import the icon from the ‘@fortawesome/free-solid-svg-icons’ package and add to the react component.

Add code in src/components/UserProfile.js file.

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAmbulance, faAnchor } from '@fortawesome/free-solid-svg-icons'


class UserProfile extends React.Component {  
 
    render(){
        return(
            <div>
                <h4><FontAwesomeIcon icon={faAmbulance} color="green" /> Ambulance Icon</h4>
                <h4><FontAwesomeIcon icon={faAnchor} color="yellow" /> Anchor Icon</h4>
            </div>
        )
    }
     
}  
   
export default UserProfile;

Integrate Loading Icons

You need to follow the similar process to add the icon; however, you have to define the spin tag to rotate the icon constantly with animation.

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


class UserProfile extends React.Component {  
 
    render(){
        return(
            <div>
                <h4><FontAwesomeIcon icon={faCompactDisc} color="blue" spin/></h4>
                <h4><FontAwesomeIcon icon={faCircleNotch} color="red" spin/></h4>
                <h4><FontAwesomeIcon icon={faFan} color="green" spin/></h4>
            </div>
        )
    }
     
}  

export default UserProfile;

View App in Browser

In the last step, you need to run the command to start the react app; you can do it by running the below command.

npm start
http://localhost:3000

How to Integrate and Use Font Awesome Icons in React Js

Summary

So far, you have learned how to implement a font-awesome package in react app and learned how to use font awesome icons in react. We hope this step-by-step guide will help you to use icons in your react app UI.