React Icons

What Is Icons In React?

Icon is a small graphical symbol. it is used for user interface to represent actions, labels and features. for example: “delete” icon for trash any item, pencil icon for “edit” and magnifying glass icon for “search”.

React does not provides any built-in icons, but we can import icon libraries like:

• React Icons (popular)
• Font Awesome
• Material Icons

These are the libraries for import icons in project. you can use these icon as components, so you can easily reuse and customize them using props like size, color, etc.

Why Use Icons in React?

Icons make your app more beautiful and user-friendly. users can easily understand all features using icons. Below some reasons, why icon used in react:

• Users instantly understand what action button will do like delete icon “🗑️” for delete.
• Icons help to guide users for understand menus and buttons.
• Icons take less space than text and make clean design.
• No need to download and upload any separate image files. use component based icons directly in code.

Example Comparison

Old method (using images):

<img src="/delete.png" alt="delete" />

New method In React (using icon component):

import { FaTrash } from 'react-icons/fa';

<FaTrash size={20} color="red" />

How To Install react-icons Library

The React-Icons library provide easy way to add scalable vector icons into react project directly from libraries.

Step 1: Installing react-icons

First, you need to install the library in your React project using this command:

npm install react-icons

or, if using Yarn, so run following command:

yarn add react-icons

React-Icons library allowing you to import individual icons, this method keep your project lightweight by only include those icons which you use.

Step 2: Import Specific Icons

You can import specific icons from icon library prefix (like: Fa for Font Awesome, Md for Material Design) followed by the icon name.

Use this command for import Font Awesome icon:

import { FaCoffee } from 'react-icons/fa';

To import a Material Design icon:

import { MdAlarm } from 'react-icons/md';

Step 3: Adding Icons to JSX

Once you imported icons, you can use the icons as component with in your JSX:

function IconExample() {
  return (
    <div>
      <h3>React Icons Example</h3>
      <FaCoffee />  {/* Font Awesome Coffee icon */}
      <MdAlarm />   {/* Material Design Alarm icon */}
    </div>
  );
}

export default IconExample;

This specified icons directly showing in your application. Each icon component can be styled or modified.

How To Customize Icons In React

React icons are SVG elements, means it can be styled using CSS or inline styles like setting the size, color and alignment of the icons.

Changing Icon Size

Change icon size using the size attribute, which accepts a numeric value.

<FaCoffee size={40} />  {/* Sets icon size to 40px */}

Changing Icon Color

Change the icon color using color attribute:

<FaCoffee color="brown" />

You can also use inline styling:

<FaCoffee style={{ color: "brown", fontSize: "30px" }} />

Example Component with Customizations

Here’s the React component that showing how to apply different customizations in icons:

import React from 'react';
import { FaCoffee, FaApple, FaAndroid } from 'react-icons/fa';

function CustomIconExample() {
  return (
    <div style={{ textAlign: "center" }}>
      <h3>Platform Icons</h3>
      <FaCoffee size={50} color="brown" />   {/* Coffee icon in brown */}
      <FaApple size={50} color="black" />    {/* Apple icon in black */}
      <FaAndroid size={50} color="green" />  {/* Android icon in green */}
    </div>
  );
}

export default CustomIconExample;

In this example:

• We set unique color and size for each icon.
• The textAlign styling centers the icons.

Navigation Bar Icon Example:

Icons are mostly used in navigation bars for clean and better design. Below the simple navigation bar example that include icons:

import React from 'react';
import { FaHome, FaInfoCircle, FaEnvelope } from 'react-icons/fa';

function Navbar() {
  return (
    <nav style={{ display: "flex", justifyContent: "space-around" }}>
      <a href="/"><FaHome /> Home</a>
      <a href="/about"><FaInfoCircle /> About</a>
      <a href="/contact"><FaEnvelope /> Contact</a>
    </nav>
  );
}

export default Navbar;

Below command used for import specific icons instead of bundle icons:

import { FaHome, FaInfoCircle, FaEnvelope } from 'react-icons/fa';