Font Awesome and React-Icons in React
Tags: react, fonts, node
Published: 2021-03-11 10:02:46

## 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](https://getgist.com/best-sites-to-get-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] (https://reactjs.org/) 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:
```javascript 
npm install react-icons –save
```
This command will assist in downloading `react-icons` package and give us full accessibility to it. 
Visit [react-icons](https://www.npmjs.com/package/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.
```javascript
import { HiArrowCircleUp } from 'react-icons/hi';
```

**Step 3:** Add the `IconName` imported to our `jsx`
```javascript
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: 
```javascript
npm run start
```
you should get a page with this icon in the top left of your page:
 
To learn more about [IconName] (https://react-icons.github.io/react-icons/icons?name=hi) and the likes visit [react-icons](https://react-icons.github.io/react-icons/icons?name=hi)

**Step 4:** Let apply styles to our Icons by import `IconContext` component that allows us to do a lot of styles things.
```javascript
import { IconContext } from "react-icons";
```

**Step 5:** Now let wrap our icon in the `IconContext` component like this:
```javascript
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
```javascript
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:
```javascript
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`. 
```javascript
  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.
```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons'
```
**Step 3:** Add the component imported to our `jsx`
```javascript
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:
```javascript
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](https://fontawesome.com/icons?d=gallery&p=2)

**Step 4:** Let style our fontawesome component
```javascript
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](https://twitter.com/FamosaAdegbite)