How to Install and Use Font Awesome Icons in React?

Hello friends, in this tutorial, we will learn about how to install the font awesome icons library in react application. Moreover, we will also see how we can use font awesome icons in react.

Font Awesome is the best font and icons toolkit library that provide us a huge amount of various icons. It provides social media icons, SVG icons, solid icons, animation icons, clipart, etc or you can say every type of icon.

It gives you modern attractive icons for your website. This Font Awesome icons library has 68 categories of icons and a total of 16083 pro icons with 2009 free icons.

Let’s head over to install the font awesome icons library and use them in react application. But if you want to do it from scratch then you can check this tutorial on how to install react application?

Install Font Awesome Icons Library in React

As I said above Font Awesome gives us free and pro icons, so based on these cases it has various packages of icons that we can use.

To use the Font Awesome icons library in react we have to install multiple packages to implement the different types of icons.

To install the Font Awesome icons library in react use the following command in your terminal. It will install the base packages.

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

To install the font awesome regular icons – free and pro:

npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/pro-regular-svg-icons

To install the font awesome solid icons – free and pro:

npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/pro-solid-svg-icons

To install the font awesome brand icons – free:

npm install --save @fortawesome/free-brands-svg-icons

To install the font awesome light icons – pro:

npm install --save @fortawesome/pro-light-svg-icons

To install the font awesome duotone icons – pro:

npm install --save @fortawesome/pro-duotone-svg-icons

All the above commands will use to install the Font Awesome different packages. You can install it as per your requirements.

Use Font Awesome Icons Library in React

Now we will see how we can use the Font Awesome icons in our react application. We will make a small react application for demo purposes.

There are two ways to use the Font Awesome icons in react components. We will use both methods in this tutorial, the first is a global method and the second is the individual usage method.

See Also: Create React Application Using Multiple Components

Global Method Creating Icon Library

In this global method, we will create a separate Font Awesome library file (FontAwesomeLibrary.js) in react project and then import it in the App.js file or wherever you want to you in the components.

If you want to create an icons library by importing individual icons from different packages then you can do like following.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBook } from '@fortawesome/pro-light-svg-icons';
import { faFile } from '@fortawesome/pro-solid-svg-icons';
import { faFileLines } from '@fortawesome/pro-duotone-svg-icons';
import {
    faWhatsApp,
    faTwitter,
    faGoogle,
    faFacebook,
} from '@fortawesome/free-brands-svg-icons';

library.add(
    faBook,
    faFile,
    faFileLines,
    faWhatsApp,
    faTwitter,
    faGoogle,
    faFacebook,
);

The above code will import the icons from different packages and then create a Font Awesome library using the library() method.

If you want now import the entire project at once, instead of importing individual icons then you can do this by following the code example.

import { library } from '@fortawesome/fontawesome-svg-core';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { fad } from '@fortawesome/pro-duotone-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fal, fas, fad, fab);

If you have successfully created the icons library and imported it into desired components then we are ready to use the Font Awesome icons in react.

Using Font Awesome icons in react

Now we can simply use the Font Awesome icons to style react application. You just need to import that icons library that we have made above and the FontAwesomeIcon component from react-fontawesome.

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './FontAwesomeLibrary';

class FAiconsExample extends React.Component {  
 
    render(){
        return(
            <ul>
                <li><FontAwesomeIcon icon={['fal', 'book']} /> Font Awesome Light Icon</li>
                <li><FontAwesomeIcon icon={['fas', 'file']} /> Font Awesome Solid Icon</li>
                <li><FontAwesomeIcon icon={['fad', 'file-lines']} /> Font Duotone Icon</li>
                <li><FontAwesomeIcon icon={['fab', 'google']} /> Font Awesome Brand Icon</li>
            </ul>
        )
    }
     
}  
   
export default FAiconsExample;

Individually Method to Use the Icons

In this method, we will see the example of using the individual method to import the icons in react components.

If you don’t want to import the entire package of icons, you can simply add the individual icons to each component. You just need to import icons where you want to use them.

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBook } from '@fortawesome/pro-light-svg-icons';
import { faFile } from '@fortawesome/pro-solid-svg-icons';
import { faFileLines } from '@fortawesome/pro-duotone-svg-icons';
import { faGoogle } from '@fortawesome/free-brands-svg-icons';

class FAiconsExample extends React.Component {  
 
    render(){
        return(
            <ul>
                <li><FontAwesomeIcon icon={faBook} /> Font Awesome Light Icon</li>
                <li><FontAwesomeIcon icon={faFile} /> Font Awesome Solid Icon</li>
                <li><FontAwesomeIcon icon={faFileLines} /> Font Duotone Icon</li>
                <li><FontAwesomeIcon icon={faGoogle} /> Font Awesome Brand Icon</li>
            </ul>
        )
    }
     
}  
   
export default FAiconsExample;

See Also: How to Conditionally Add Props to React Components?

Font Awesome Icons Customization in React

So in the above examples, we see how we can install the Font Awesome library in react and how to use them in different ways.

Now we will see some style customization for Font Awesome icons. We can style the icons with passing additional attributes or props in the FontAwesomeIcon component.

We can increase the size of icons using the abbreviations sm, md, lg, and xl. We can also use the number up to 6 for increasing the size of the icons like 2x, 3x, 4x, 5x, and 6x.

You can also make the colorful icons using the color props and you can also use the inline style property to give the style for icons.

Let’s see some customization of Font Awesome React Icons.

Font Awesome Icons Size

To increase the font awesome icon size use the sm, md, lg, and xl abbreviation or numbered like 2x up to 6x. See the following example.

<FontAwesomeIcon icon={faBook} size="md" />

<FontAwesomeIcon icon={faBook} size="3x" />

Font Awesome Icons Color

To change the color of icons use the color props or inline react style property to add the CSS style to icons. See the example below.

<FontAwesomeIcon icon={faBook} color="red" />

<FontAwesomeIcon icon={faBook} style={{ color: "#000000" }} />

Font Awesome Icons Transform

Using the transform property of font awesome icons, you can position icons randomly. You can scale, flip, and move icons using this property. See the following example code.

<FontAwesomeIcon icon={faGoogle} transform="up-3 shrink-5" />

Font Awesome Icons Fix Width

You can use the fixWidth props to set the same width and uniform as others. Let’s say you want the same width icons for the navigation menu, so add fixWidth props to icons simply.

<FontAwesomeIcon icon={faHome} fixedWidth /> Home
<FontAwesomeIcon icon={faStore} fixedWidth /> Products
<FontAwesomeIcon icon={faCartShopping} fixedWidth /> Cart
<FontAwesomeIcon icon={faCircleHeart} flip /> Favorites
<FontAwesomeIcon icon={faClipboard} shake /> Blogs
<FontAwesomeIcon icon={faPhone} fixedWidth /> Contact Us

Font Awesome Icons Animate

To animate the Font Awesome icons, you can use the animation props to animate your icons. Some animation props are Beat, Fade, Bounce, Flip, Shake, Spin, etc.

<FontAwesomeIcon icon={faHome} beat />
<FontAwesomeIcon icon={faStore} fade />
<FontAwesomeIcon icon={faCartShopping} bounce />
<FontAwesomeIcon icon={faCircleHeart} flip />
<FontAwesomeIcon icon={faClipboard} shake />
<FontAwesomeIcon icon={faPhone} spin />

There are more features to style the Font Awesome icons, you can get the idea from font awesome style guide.

Bouns Point: Same Icons, Different Styles

If you want to import the same icons from different packages, you can import them by giving names as an alias. See the following code.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faFile as faFileLight } from '@fortawesome/pro-light-svg-icons';
import { faFile as faFileSolid } from '@fortawesome/pro-solid-svg-icons';

library.add(faFileLight, faFileSolid);

<FontAwesomeIcon icon={faFileLight} /> 
<FontAwesomeIcon icon={faFileSolid} />

Conclusion

So in this tutorial, you learned how to install Font Awesome Icons in React. You also see how to use Font Awesome icons in two different ways using the global method and individual importing method.

We also see some customization examples of Font Awesome icons to change the icon’s size, color, position, etc. Hope you like it.