React – How to Import Font Awesome 5 with Examples

Integration and usage of Font Awesome 5 icons in React application tutorial; In this React guide, we will walk through step by step procedures on installing the Font Awesome 5 icons and how to use them easily in a React Js application. To quickly start using them in a react app, we use react-font awesome npm packages.

Font Awesome is a marvellous icons library consisting of a ready to use set of first-class and almost every type of icon even in SVG formats. Icons are available under various kinds of categories like file, chart, action, logo etc.

In static applications, we only need to include the library fonts making them readily available to use. But in dynamic applications like React, using them in a correct way is very important. Moving forward, we will discuss how to add, import the Font Awesome packages and use its components across applications in very simple easy to follow steps. We will discuss the following examples.

• Change colors of Font Awesome Icons.
• Change the size of Font Awesome Icons.
• Rotate, Flip, Transform Icons.
• Adding Style to Font Awesome Icons.

 

How to Add, Import and Use Font Awesome in React App?

Follow these quick steps, to start using Font Awesome SVG components in react app:

Step 1) Create React App

Firstly, create a new React app to keep it simple going from scratch.

npx create-react-app react-font-awesome-app

Moving inside the created application directory:

cd react-font-awesome-app

Step 2) Instalattion of Font Awesome Packages

Installation and import of Font Awesome packages plays an important role in keeping the bundle size efficient. There are multiple types of Font Awesome icons which are saparated by the team into multiple package including Base, Regular, Solid, Brand icons.

You can install all or only the required ones from following packages.

# base packages (Required)
npm i -S @fortawesome/fontawesome-svg-core 
npm i -S @fortawesome/react-fontawesome 

# regular icons
npm i -S @fortawesome/free-regular-svg-icons 

# solid icons
npm i -S @fortawesome/free-solid-svg-icons 

# brand icons
npm i -S @fortawesome/free-brands-svg-icons

Or install all pacakges at once:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Step 3) Using Font Awesome Icons with <FontAwesomeIcon/> Component

Adding icons is very easy, just import the FontAwesomeIcon and adding with icon prop as shown below:

import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell, faBiking, faHome } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={faHome} />
      <FontAwesomeIcon icon={faBiking} />
      <FontAwesomeIcon icon={faBell} />
    </div>
  );
}
export default App;

We added three Solid icons, that will render into the SVG icons when component mounts:

Step 4) How to add Color, Size, Fixed Width to Icons?

Adding Color to Icons:

Color can be added by appending the color or style prop as shown below:

import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell, faBiking, faHome } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={faHome} color="green"/>
      <FontAwesomeIcon icon={faBiking} style={{ color: 'blue' }}/>
      <FontAwesomeIcon icon={faBell} color="#EB4C42"/>
    </div>
  );
}
export default App;

Sizing the Icons:

Similerly for sizing, there are multiple options. You can define the size or style prop as shown below:

• Defining “lg”,”xs”,”sm”,”1x”,”2x”,”3x”,”4x”,”5x”,”6x”,”7x”,”8x”,”9x”,”10x”.

import "./App.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome } from "@fortawesome/free-solid-svg-icons";

function App() {
  return (
    <div className="App">
    xs
      <FontAwesomeIcon icon={faHome} color="green" size="xs" />
      lg
      <FontAwesomeIcon icon={faHome} color="green" size="lg" />
      5x
      <FontAwesomeIcon icon={faHome} color="green" size="5x" />
      10x
      <FontAwesomeIcon icon={faHome} color="green" size="10x" />
      4em
      <FontAwesomeIcon icon={faHome} style={{ color: "blue", fontSize:"4em" }} />
    </div>
  );
}

export default App;

Rotate Font Awesome Icons:

You can add transform prop to shrink, grow, down, left, up, right, flip-h,flip-v, rotate the icons:

import React from "react";
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={faHome} size="8x" transform="right-16 rotate-45" />
    </div>
  );
}

export default App;

 

Spining the Icons:

Adding the spin prop to make it animated with spin effect:

<FontAwesomeIcon icon={faRedo} color="green" size="10x" spin />

Flip Font Awesome Icons using Transform

The flip-v and flip-h can be added to flip icons as shown below:

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAws } from "@fortawesome/free-brands-svg-icons";

function App() {
  return (
    <div className="App">

    <FontAwesomeIcon icon={faAws} size="8x" />
    <FontAwesomeIcon icon={faAws} size="8x" transform="flip-v" />
    <FontAwesomeIcon icon={faAws} size="8x" transform="flip-h" />
    <FontAwesomeIcon icon={faAws} size="8x" transform="rotate-25" />

    </div>
  );
}

export default App;

 

Conclusion

We have discussed how to install and import the Font Awesome 5 packages in React application. Moreover, the <FontAwesomeIcon/> component is used to create SVG on rendering. On top of that, we added the color, size, mask and transform to change color, size, rotate, flip or align the icons.

The important thing is to import only thos packages which are required in the application. The Font Awesome team has created variour packages to based categories including Regular, Solid, Light, Free and Pro.