How to Use React Icons in Next.js (The Clean & Efficient Way)

Icons are the silent workhorses of modern UI. They explain actions faster than text, reduce cognitive load, and make your app feel finished instead of “still in dev mode.”
If you’re building with Next.js, there’s a simple, performance-friendly way to use icons without bloating your bundle: React Icons.

Let’s walk through it step by step, minus the noise.

Why React Icons?

React Icons is popular for a reason:

✅ Supports multiple icon libraries (Bootstrap, Font Awesome, Material, etc.)

✅ Tree-shaking friendly (only loads what you use)

✅ Simple ES module imports

✅ Works perfectly with Next.js

In short: small footprint, big payoff.

Step 1: Install React Icons

Inside your Next.js project directory, run:

npm install react-icons

That’s it. No extra config. No Next.js drama.

Step 2: Import an Icon

React Icons organizes icons by library.
For example, Bootstrap icons live under react-icons/bs.

import { BsGrid3X3GapFill } from "react-icons/bs";

Now you can use it like any React component:

Yes, it’s that boringly simple. Good software usually is.

Step 3: Using Multiple Icons

Most real-world UIs need more than one icon.
Let’s say you’re building a Grid/List view toggle.

Import both icons:

import { BsGrid3X3GapFill, BsList } from "react-icons/bs";

Now conditionally render them based on state.

Step 4: Practical Example – Grid/List Toggle

Here’s a clean, real-use example:

import { BsGrid3X3GapFill, BsList } from "react-icons/bs";
import { useState } from "react";

export default function ViewToggle() {
const [isGridView, setIsGridView] = useState(true);

return (

className="px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700"
onClick={() => setIsGridView(!isGridView)}
>
{isGridView ? : }


);
}

What’s happening here?

State controls which icon is shown

Icons replace text for cleaner UX

Only two icons are loaded, not the whole library

Efficient. Readable. Scalable.

Performance Notes (Because It Matters)

React Icons uses named imports, which means:

❌ No full icon pack loaded

✅ Only the icons you import end up in your bundle

✅ Works well with Next.js code-splitting

So yes, you can safely use icons without murdering Lighthouse scores.

Best Practices

Stick to one icon library per project for visual consistency

Avoid inline styling icons everywhere; wrap them in reusable components if needed

Don’t overuse icons. If everything screams, nothing communicates

Final Thoughts

React Icons + Next.js is one of those combinations that just works.
No hacks. No workarounds. No regret at build time.

If your UI still looks like plain text pretending to be an app, icons are the easiest upgrade you can make today.

Build clean. Ship fast. Keep bundles small. 🧠✨