React Icons Tutorial - All You Need To Know
Tags: react, icons, tutorial, beginners
Published: 2020-08-16 23:11:39

Images or pictures are said to speak a thousand words. For example, when you see a logo, it tells you the name of who or what it is representing, characteristics that make them unique and so on. These images include Icons.

Icon in computing is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. - [Wikipedia](https://en.wikipedia.org/wiki/Icon_(computing))

Over the years icons have become an integral part of software development. In fact, it is compared to a traffic sign. The benefits of icons cannot be overly emphasized as the definitions above clearly shows.

In this article, we will be talking about [REACT ICONS](https://react-icons.github.io/react-icons/) - What? Why? How?

### Icon Libraries
We have many icon library that have been produced and distributed over time. These include the following:

- [Ant Design Icons](https://ant.design/components/icon/)
- [Bootstrap Icons](https://getbootstrap.com/docs/4.0/extend/icons/)
- [Devicons](https://devicons.github.io/devicon/)
- [Feather](https://feathericons.com/)
- [Flat Color Icons](https://icons8.com/icon/pack/logos/color)
- [Font Awesome](https://fontawesome.com/v4.7.0/icons/)
- [Game Icons](https://game-icons.net/)
- [Github Octicons icons](https://primer.style/octicons/)
- [Grommet Icons](https://icons.grommet.io/?)
- [Ionicons](https://ionicons.com/)
- [Material Design icons](https://material.io/resources/icons/)
- [Remix Icon](https://remixicon.com/)
- [Typicons](https://www.s-ings.com/typicons/)
- [Weather Icons](https://erikflowers.github.io/weather-icons/)

So what are react icons?

## React Icons - What?
React Icons is an [open source library](https://github.com/react-icons/react-icons) that has brought all the icon library we have listed above into one package.

## React icons - Why?
There are a number of reasons to use react icons for your react projects. I will list a few right below:

1. Sometimes, one icon library might not have all the icons we need for our project. So we might have to install more than one library. React Icons saves us the stress of having to install multiple icon packages.

2. React Icons utilizes ES6 imports that allows you to include only the icons that your project is using.

3. React Icons has been designed and tailored to react. This means that there will be little or no issues using it in your react project.

4. It is pretty straight forward and easy to use

*With that fourth reason in mind, how do we use React Icons in our project?*

## React Icons - How?
It will take you just a few steps to use react icons:

1. Installation
2. Import
3. Choose Icon(s) to use
4. Enter the tag
5. Style

The starter project is the output of the tutorial on [CSS animation with AOS](https://dev.to/ebereplenty/css-animation-without-css-aos-in-plain-js-and-react-4jfj)

* Get the starter project [here](https://github.com/EBEREGIT/React-AOS-Tutorial)

* Follow the instructions on the [Readme](https://github.com/EBEREGIT/React-AOS-Tutorial/blob/develop/README.md) to setup the project in your computer.

*If you are at this point, then we are now on the same page. Let's move forward*

### Install React Icons
Run the following command to install the [package](https://www.npmjs.com/package/react-icons)

```javascript
npm install react-icons --save
```

### Choose Icon(s) to use
We will use 4 icons from different libraries
1. ``AiFillTwitterCircle`` from ``Ant Design Icons``
2. ``DiGithubBadge`` from ``Devicons``
3. ``FaCodepen`` from ``Font Awesome``
4. ``IoLogoLinkedin`` from ``Ionicons``

### Import React Icons
Importing these icons are also simple. It follows this syntax or rule: 

``import { IconName } from "react-icons/<library-initials>";``

If you are importing more than one icon from one library, you can do so in one line using the ES6 destructuring feature like so:

``import { IconName1, IconName2,  ...,  IconNameN  } from "react-icons/<library-initials>";``

Now, open the ``App.js`` file and import the icons we chose at the top of the file with the following code:

```javascript
import { AiFillTwitterCircle } from "react-icons/ai";
import { DiGithubBadge } from "react-icons/di";
import { FaCodepen } from "react-icons/fa";
import { IoLogoLinkedin } from "react-icons/io";
```

### Enter the tag of the icons
After importing the icon we choose, we can now use it anywhere in the file like any HTML tag you know.

We will be working only in the ``nav`` section within the ``div`` tag with ``className`` of ``navbar-header``.

Enter 2 of those icons before the ``h1`` tag and 2 after it like so:

```html
  <div className="navbar-header">
          <AiFillTwitterCircle />
          <FaCodepen />

          <h1>Navigation</h1>

          <IoLogoLinkedin />
          <DiGithubBadge />
  </div>
```
The icons should be showing like mine if you preview it in your browser

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cmgw95juahu4tib90vzy.JPG)

Wow... Just like that. You have icons from different libraries showing up in your project.

*That's not even all the cool stuff. You can actually style them. How?*

### Styling the icons
Let's talk about 2 ways to style React Icons
1. Using React Context API
2. Styled Component

You can choose to style more than one of the icons at a time or style it individually. You just need to wrap all the icons you want to style in the style tag you choose.

#### React Context API
You can choose to style more than one of the icons at a time or style it individually. You just need to wrap all the icons you want to style in the tag.

* Import this API in the top of the file like so

```javascript
import { IconContext } from "react-icons";
```

* Styling more than one
Let's wrap the first 2 icons and assign a ``className`` to it like so:

```javascript
<div className="navbar-header">
  <IconContext.Provider value={{ className: "top-react-icons" }}>
    <AiFillTwitterCircle />
    <FaCodepen />
  </IconContext.Provider>
  <h1>Navigation</h1>
  <IoLogoLinkedin />
  <DiGithubBadge />
</div>
```

Let's style the ``top-react-icons`` in the ``App.css`` like so:

```javascript
.top-react-icons{
  font-size: 5rem;
}
```
This increases the font size. Check your browser and your result should be like mine

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z1q4lsqb4bepxij2znr3.JPG)

* Styling individually
Let's change the color of each of the icons on the other side

```javascript
<div className="navbar-header">
{/* styling multiple icons */}
   <IconContext.Provider value={{ className: "top-react-icons" }}>
     <AiFillTwitterCircle />
     <FaCodepen />
   </IconContext.Provider>
   <h1>Navigation</h1>

   {/* styling individual icons */}
   <IconContext.Provider value={{ color: "blue" }}>
     <IoLogoLinkedin />
   </IconContext.Provider>
   <IconContext.Provider value={{ color: "green" }}>
     <DiGithubBadge />
   </IconContext.Provider>
</div>
```
#### Styled Components
I will assume that you know what [Styled Components](https://styled-components.com/) are. If you don't, please read about it [here](https://styled-components.com/)

* Install styled components

```javascript
npm install --save styled-components --save
```

* Import styled components

```javascript
import styled from 'styled-components'
```

* Import and add some icons to the header section. Here is mine:

```javascript
  <div className="jumbotron">
    <BsFillAlarmFill />
    <h1>Header</h1>
    <BsFillArchiveFill />
  </div>
```

*Move down to the last line in the ``App.js`` file. That is where we will write the styles*

* Enter the following style for ``BsFillAlarmFill`` icon

```javascript
// archive styled component
const Archive  = styled(BsFillArchiveFill)`
  color: purple;
  transform: scale(2);
  margin: 5%;
`;
```

* Enter the following style for ``BsFillArchiveFill`` icon

```javascript
// alarm styled component
const Alarm = styled(BsFillAlarmFill)`
  color: red;
  transform: scale(2);
  margin: 5%;
`;
```

* Now let's apply the styled components to those icons like so:

```javascript
        <div className="jumbotron">
          <Alarm />
          <h1>Header</h1>
          <Archive />
        </div>
```
*Notice that all we had to do was to rename the components to the styled components we created*

### Final Output
If you stuck to what I did from the beginning, then, this should be your output

![Final Output](https://dev-to-uploads.s3.amazonaws.com/i/yiuw7hhooruqatvy666p.JPG)

All codes are [here](https://github.com/EBEREGIT/React-AOS-Tutorial/tree/react-icons)

{% github EBEREGIT/React-AOS-Tutorial no-readme %}

And it is a wrap!!!

Congratulations for hitting another milestone in react

### Conclusion
Icons can no longer be separated from software's UI because of the simplicity and the appeal it gives the users. Many icons are at our disposal and so we want make make use of it.

Beyond that, it is heartwarming that we can get all the icons we need in one package for our react projects. That is more reason to even use it as it is very easy to use. We have seen that in this tutorial.

I will be bringing you more gems that I find out as I write my weekly articles. Until then, enjoy developing applications with appropriate icons.