Tutorial

Getting Started with React Icons: Installation & First Icons

6 min read

A beginner-friendly guide to installing and using react-icons in your first React project

Icons play a crucial role in the design and user experience of modern web applications. From indicating actions like edit, delete, and save, to improving navigation, they help make interfaces more intuitive and aesthetically appealing. If you're building a React application and looking for a simple, flexible way to add high-quality icons, React Icons is one of the best libraries to get started with.

In this guide, we'll walk you through everything you need to know to install React Icons, understand its structure, and use your first icons in a React app — even if you're just starting out with React.

What is React Icons?

React Icons is a popular open-source library that provides a simple interface to use icons from multiple popular icon sets in a React-friendly format. Instead of installing and learning different icon libraries separately, React Icons bundles many of them into one package and allows you to pick only the icons you need.

With React Icons, you can import icons from libraries such as:

  • Font Awesome
  • Material Design Icons
  • Feather
  • Heroicons
  • Bootstrap Icons
  • Remix Icons
  • ...and many more.

This makes it an incredibly versatile solution for developers who want variety and customization without bloating their app.

Why Use React Icons?

Before diving into the installation, let's briefly touch on the benefits of using React Icons:

1. Modular Imports

React Icons uses tree-shaking-friendly ES6 imports. This means you can import only the icons you use, which keeps your app's bundle size small.

2. Multiple Icon Sets

No need to install separate libraries for Material Icons, Font Awesome, or others. React Icons gives you access to all of them in one place.

3. Consistent Usage

Once you learn how to use one icon, you can use them all. The syntax is consistent across icon sets.

4. Customizable

Icons can be styled with CSS or inline styles just like any other React component. You can change color, size, hover effects, and more.

Step-by-Step: Installing React Icons

Let's now install React Icons in a new or existing React project. We'll go through this process using a basic setup.

Step 1: Create a React App (if you don't have one)

If you don't already have a React app, you can quickly create one using Create React App.

npx create-react-app my-icons-app
cd my-icons-app

If you're using Vite or another framework, you can follow a similar process—React Icons works in any React environment.

Step 2: Install React Icons

Next, install the react-icons package via npm or yarn:

npm install react-icons
# or
yarn add react-icons

That's it — no need for multiple packages or configurations. Everything is bundled into one dependency.

How to Use Your First Icons

Now that you have the library installed, let's explore how to use it.

Step 1: Import an Icon

React Icons uses named imports to bring in specific icons. Each icon set has a prefix. For example:

  • Fa = Font Awesome
  • Md = Material Design
  • Fi = Feather Icons
  • Ai = Ant Design
  • Bs = Bootstrap Icons

Here's how you can import an icon from Font Awesome:

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

Step 2: Use the Icon as a Component

Once imported, you can use it just like any React component:

function App() {
return (
<div>
<h1>Let's grab a beer! <FaBeer /></h1>
</div>
);
}

You'll see the beer icon rendered right next to your text.

Customizing Your Icons

React Icons are SVGs rendered as React components, which means they're fully customizable with size, color, and style props.

1. Change Size

You can change the icon size by passing the size prop:

<FaBeer size={40} />

The default unit is pixels. So size={40} means 40px.

2. Change Color

Use the color prop or regular CSS to change the color:

<FaBeer size={30} color="goldenrod" />

Or style with CSS:

<FaBeer className="icon" />
<style>
.icon {
color: teal;
font-size: 50px;
}
</style>

3. Add Hover Effects

Because these icons are React components, you can treat them just like divs or spans. This allows you to use hover effects:

.icon:hover {
color: red;
transform: scale(1.2);
transition: 0.3s ease;
}

Where to Find Icon Names

With dozens of icon sets available, you might wonder: how do I find the icon I need?

Visit the official React Icons site:

📍 https://react-icons.github.io/react-icons/

This website allows you to:

  • Browse by icon library
  • Search by name or keyword
  • Click to copy the import statement
  • Preview icons in various sizes

It's a very handy tool when picking icons for your project.

Example: A Simple Icon Toolbar

Here's a basic example of how you can create a toolbar using different icons:

import { FaHome, FaUser, FaCog } from 'react-icons/fa';
function Toolbar() {
return (
<div style={{ display: "flex", gap: "20px", fontSize: "24px" }}>
<FaHome title="Home" />
<FaUser title="Profile" />
<FaCog title="Settings" />
</div>
);
}

You can enhance this toolbar with tooltips, click actions, and styling.

Best Practices for Using React Icons

As you start using React Icons in your project, keep these best practices in mind:

✅ Import Only What You Need

Avoid importing entire icon sets. Always use named imports like:

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

Avoid doing this:

import * as FaIcons from 'react-icons/fa'; // Not recommended

✅ Use Semantic Icons

Choose icons that clearly represent their actions. This improves usability and accessibility.

✅ Add title or aria-label for Accessibility

Icons alone may not be accessible to screen readers. Add aria-label or title when icons serve as buttons or important content:

<FaTrash aria-label="Delete item" />

✅ Style Responsively

Use em, %, or rem instead of fixed px sizes if you're building a responsive UI.

When Not to Use React Icons

React Icons are great, but they're not always the best fit. Consider alternatives in the following cases:

  • You need animated icons: React Icons don't support built-in animations.
  • You want image-based icons (e.g., SVGs from Figma): Consider using inline SVGs or external images.
  • You prefer to self-host or use a CDN: React Icons are component-based and meant for component-driven design systems.

Final Thoughts

React Icons is one of the most beginner-friendly libraries for adding icons to React apps. With its large library support, consistent API, and easy customization, it's a great tool to master early in your React journey.

Recap — Getting Started Checklist:

  • ✅ Installed react-icons with npm or yarn
  • ✅ Imported individual icons using ES6 import
  • ✅ Used them in JSX like React components
  • ✅ Customized icons with size, color, and styles
  • ✅ Explored the React Icons website for browsing and copying icons

By using React Icons the right way, you'll not only improve the visual appeal of your app but also maintain clean, performant code.

If you're building your first project, try adding a few icons today — perhaps a home button, a navigation menu, or even a loading spinner. Once you see how easy it is, you'll likely use React Icons in every project going forward.

Let your UI shine — one icon at a time.