How to include a Font Awesome 5 icons in React

Font Awesome is a toolkit that provides us different types of icons and social logos.

we are going to learn about how to include the font awesome icons as components in React.

Installing react-icons package

First, we need to install a package called react-icons. which helps us to use the font awesome icons as a React components.

Run the following command to install the package.

npm install react-icons

Using Font Awesome icons

In this example, we are using Airbnb icon in the App.js file.

import React from "react";import { FaAirbnb } from "react-icons/fa";export default function App() {  return (    <div className="App">      <h1>Hello Airbnb</h1>      <FaAirbnb size={44} color="green" />    </div>  );}

In the above code, we first imported the FaAirbnb component from the react-icons/fa package then included it inside the App component.

Now, we can see the Airbnb svg icon is rendered on the screen.

Have you seen our icon has a green color because we added color to the <FaAirbnb> component by using color prop.

Similarly, you can include all Font Awesome icons by importing as react components.

For more icon names, you can checkout react-icons website.