React Icons Tutorial - All You Need To Know

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

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 - 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
• Bootstrap Icons
• Devicons
• Feather
• Flat Color Icons
• Font Awesome
• Game Icons
• Github Octicons icons
• Grommet Icons
• Ionicons
• Material Design icons
• Remix Icon
• Typicons
• Weather Icons

So what are react icons?

React Icons - What?

React Icons is an open source library 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

• Get the starter project here

• Follow the instructions on the Readme 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

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:

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:

  <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

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

import { IconContext } from "react-icons";

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

<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:

.top-react-icons{
  font-size: 5rem;
}

This increases the font size. Check your browser and your result should be like mine

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

<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 are. If you don't, please read about it here

• Install styled components

npm install --save styled-components --save

• Import styled components

import styled from 'styled-components'

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

  <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

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

• Enter the following style for BsFillArchiveFill icon

// 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:

        <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

All codes are here

EBEREGIT / React-AOS-Tutorial

This tutorial is a demonstration of how AOS can be used to animate a React website.

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.

Comments

[Igor Mazetti de Azevedo]

Thanks! That was really helpful!

[Dean Tarisai]

Really helpful mann. Was struggling with knowing how Flowbite used the icons in their components.

[Nicholas Cruz]

Exactly what I was looking for today for styling the icons using styled-components. Thank you!

[KRUNAL R PRAJAPATI]

This is also beautiful website for free svg icon - custicon.com
24000+ free icons for use in web, iOS, Android, and desktop apps. Support for SVG. License: MIT, Free for commercial or personal use.
This provide svg icon and svg code and also provide the icon image and it should be free

[uuware]

Great post. Would you like to include a svg project? And I'd like to link your post.
A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.
github.com/uuware/icons-font-custo...

[NJOKU SAMSON EBERE]

Thank you. I will definitely look into this