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