A Comprehensive Guide to React Icons with Illustrative Examples

May 04, 2023 · Article · 4 min, 948 words

As the title implies in this article we will learn how to incorporate React Icons library into our React project for displaying icons.

Utilizing vibrant and colorful icons is an excellent approach to improve the user experience of your React project. In addition to enhancing the appearance of your app, icons can provide a contemporary and polished aesthetic to your website.

Moreover, icons are a space-saving solution for designers and they offer a universal familiarity for both users and developers.

Consider the following example; which do you believe looks more visually appealing? 

This text:

Tip: The best error message is the one that never shows up.

Info: Code is like humor. When you have to explain it, it’s bad.

Or this icons:

💡: The best error message is the one that never shows up.

📣: Code is like humor. When you have to explain it, it’s bad.

The widely used library for rendering icons in React is React Icons. This user-friendly library simplifies the process of rendering icons in our application.

Let's get started for todays lession.

Table of Contents

  1. Installation
  2. Import
  3. Basic Usage
  4. Rendering icons in lists
  5. Conditional Rendering


First run the following command on your project:

npm install react-icons


Now, we need to import it to our component.

import {RiHeadphoneFill} from "react-icons/ri";

Basic Usage

Here is a basic sample example:

return (
            Let's entertain you with some <RiHeadphoneFill />

And the resulted output is:

Note that each icon package has its own subfolder. For example, if we want to get icons from the Flat Color Icons, then we should use the following import:

import { IconName } from "react-icons/fc";

Rendering icons in lists

Similar to previous implementations, you can import your icons as follows:

import {RiCalculatorFill, RiEraserFill, RiPencilFill} from "react-icons/ri";

Here, we have imported our icons from the Remix Icon.

To render it, write the following code in your component’s return block:

return (
            <h4>For your exam you should keep them with yourself</h4>
                {/*add with text */}
                <li><RiCalculatorFill /> Calculator</li>
                <li><RiPencilFill /> 2B pencil</li>
                <li><RiEraserFill /> Eraser</li>


Conditional rendering

We can also conditionally show and hide or swap our icons. Here is an example:

const [isLogged, setIsLogged] = useState(false);

return (
            <h1>Conditional Rendering</h1>
            {/*show with icons*/}
            <button onClick={() => setIsLogged(!isLogged)}>
                {isLogged ?
                    <RiLogoutBoxRLine/> Logout
                </> :
                    <RiLoginBoxLine/> Login

Here, we declare the isLogged Boolean, which will make conditional rendering possible. And whenever we toggle the value true and false

it renders the possible output whether it should be Logout now or a Login button.

Here is the sample output:

That's for today. Thanks for reading.


No comments yet…