How to use Font Awesome icons in React

Last updated on May 5, 2020 A Goodman Loading... Post a comment

This article will show you how to use Font Awesome icons in a React app.

Firstly, let’s install the necessary packages.

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

Next, import the icons you need into your React component.

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { 
    faClock, // the clock icon
    faUserCircle // the user circle icon
} from '@fortawesome/free-solid-svg-icons'

const MyComponent = () => {
    return <div>
      <span>Clock Icon: <FontAwesomeIcon icon={faClock} /></span>
      <span>User Circle Icon: <FontAwesomeIcon icon={faUserCircle} /></span>

export default MyComponent;

Note that if an icon has class equal ‘fa-name’, you need to import it as ‘faName’. In the code snippet above, the clock icon has class ‘fa-clock’, the user circle icon has class ‘fa-user-circle’.

Notify of
Inline Feedbacks
View all comments

Related Articles