How to use Font Awesome 5 with React

In this tutorial, we will show you step-by-step how to install and use font awesome icons in react js applications.

How to Install and Use Font Awesome 5 in React

Steps to install and use font awesome 5 in react app:

Step 1: Install Font Awesome 5

Use the following npm command to install font awesome in react:

npm install @fortawesome/fontawesome-free

Step 2: Import Font Awesome

Open index.js file, and import the following line of code into it:

import '@fortawesome/fontawesome-free/css/all.min.css';

Step 3: Use Font Awesome Icons

Open component file, and add Font Awesome icons into it:

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

function MyComponent() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} />
      <span> Coffee </span>
    </div>
  )
}

Step 4: Customize Font Awesome Icons

Font Awesome 5 provides many customization options for its icons, you can change the icon’s size, color, and style,etc:

<FontAwesomeIcon icon={faCoffee} size="2x" color="#bada55" />

Conclusion

That’s all, you can easily install and use Font Awesome 5 icons in your React components.

Recommended React JS Post