How To Incorporate Font Awesome 5 Icons In ReactJS

Hello,

Font Awesome is a toolkit that contains a variety of icons and social media logos.

We’ll learn how to use font amazing icons as components in React in this article.

Installing react-icons package

First, we’ll need to install the react-iconspackage. which helps us to use the font awesome icons as a React component.

To install the package, run the command below.

npm install react-icons

Using Font Awesome icons

In this example, the App.jsfile has the Airbnb symbol.

App.js:

import React from "react";
import { FaAirbnb } from "react-icons/fa";

function App() {
  return (
    <div className="App">
      <h1>Hello Airbnb</h1>
      <FaAirbnb size={44} color="green" />
    </div>
  );
}
export default App;

We imported the FaAirbnbcomponent from the react-icons/fapackage and then included it inside the Appcomponent in the above code.

The AirbnbSVG icon has now been rendered on the screen.

Have you noticed that our icon is green? That’s because we used the colorprop to give color to the <FaAirbnb>component.

Similarly, you may use react components to add all Font Awesome icons.