Font Awesome and React-Icons in React

What are Icons?

Icons are visual cues which help communicate concepts on web pages and every other application. Icons also stand as visual language for effective communication and help user interpret a concept correctly.

Where can I find Icons?

Icons are everywhere, and can be use professionally in order to pass across the message intend to and help users understand your content. For more details on where you can get best free Icons

So glad you find this article!
Today we’ll be discussing much on how to incorporate different type of Icons in React using npm package that will enable us to use icons from two major icon libraries;react-Icons and fontawesome Icons.

It has been assumed that you have basic understanding of React, npm packages and have perform necessary configuration, you can visit React site for more information and details.

Get Started

1.) React Icons

Step 1: At your terminal in the root folder of the project, type in this command:

npm install react-icons –save

This command will assist in downloading react-icons package and give us full accessibility to it.
Visit react-icons npm site for more details.

Step 2: Open App.js or any File.js you want to incorporate the Icon into and import Icon component.

import { HiArrowCircleUp } from 'react-icons/hi';

Step 3: Add the IconName imported to our jsx

import React from 'react';
import { HiArrowCircleUp } from 'react-icons/hi';

const MyIcon = () => {
    return (
        <div>
            <HiArrowCircleUp />
        </div>
    )
}
export default MyIcon

Go into your terminal and run:

npm run start

you should get a page with this icon in the top left of your page:

To learn more about IconName and the likes visit react-icons

Step 4: Let apply styles to our Icons by import IconContext component that allows us to do a lot of styles things.

import { IconContext } from "react-icons";

Step 5: Now let wrap our icon in the IconContext component like this:

import React from 'react';
import { IconContext } from "react-icons";
import { HiArrowCircleUp } from 'react-icons/hi';

const MyIcon = () => {
  return (
   <IconContext.Provider >
       <div>
         <HiArrowCircleUp />
       </div>
    </IconContext.Provider>
  )
}
export default MyIcon;

Go into your terminal and run:

npm run start

Step 6: Let style our IconContext component

import React from 'react';
import { IconContext } from "react-icons";
import { HiArrowCircleUp } from 'react-icons/hi';

const MyIcon = () => {
    return (
        <IconContext.Provider value={{ style: { fontSize: '20px', paddingRight: '5px', paddingTop:'6px', color: "rgb(0, 123, 255)" } }}>
            <div>
                <HiArrowCircleUp />
            </div>
        </IconContext.Provider>
    )
}
export default MyIcon;

Go into your terminal and run: npm run start to see the changes

Note: You can always be creative with it. Also you can import IconName from different relevant library.
Here is an example:

import { FontAwesome } from 'react-icons/fa';
import { Ionicons } from 'react-icons/io';
import { MaterialDesign } from 'react-icons/md';
import { Feather } from 'react-icons/fi';
import { GameIcons } from 'react-icons/gi';
import { WeatherIcons } from 'react-icons/wi';
import { DevIcons } from 'react-icons/di';

2.) Fontawesome Icons

Almost the same process in react-icons will be followed but we’ll import different libraries.

Step 1: Install the following packages into your project using a package manager npm.

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

Step 2: Import FontAwesomeIcon and IconName component into App.js or any File.js you want to incorporate the Icon component.

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

Step 3: Add the component imported to our jsx

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

const MyIcon = () => {
    return (
    <div>
         <FontAwesomeIcon icon={faArrowAltCircleUp} />
      </div>

    )
}
export default MyIcon;

Go into your terminal and run:

npm run start

You should get a page with this icon in the top left of your page:

To learn more about fontawesome IconName and the likes visit fontawesome-icons

Step 4: Let style our fontawesome component

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

const MyIcon = () => {
    return (
        <div>
            <FontAwesomeIcon icon={faArrowAltCircleUp} style={{ paddingRight: '5px', fontSize: '30px', color: "rgb(0, 123, 255)" }} />
        </div>
    )
}
export default MyIcon;

Conclusion
Using Font Awesome and React together is a great pairing, If you enjoyed the article, please feel free to leave a like and comment, to help the next dev. Thank you.

Happy Coding

Follow us on Twitter @FamosaAdegbite

Comments

[Rita Bradley]

I know this post is a few years old, but I was wondering how you go about using react-icons if you have Font Awesome Pro? Is it pretty much the same? I couldn't really find the answer in the docs.

[Famosa Adegbite]

For the scope of the document, it is a brief explanation of how to implement different icons in React using react-icons and Font Awesome. If you have Font Awesome Pro, there might not be a need to use react-icons, as Font Awesome Pro provides a wide range of icons. Similarly, if react-icons already covers your icon needs, there's no need for Font Awesome. Choose the one that has the icons you want and fits your project best.

Whichever option you choose, both react-icons and Font Awesome offer easy ways to implement icons in your React application, and you can find documentation and examples on their respective websites to help you integrate them seamlessly into your project.

Thank you