🔄 Grouped Imports vs Direct Imports in React: Which One Should You Use for Icons?

When working on React projects, especially ones that include a lot of icons or images, a common question comes up:

Should I import each image directly, or should I set up a centralized index.js for grouped imports?

In this post, I’ll break down both approaches, explain their pros and cons, and help you decide which one is best for your project.

---

🧾 The Two Import Styles

Let’s say you have five social icons: facebook.png, twitter.png, linkedin.png, reddit.png, and whatsapp.png.

1. Direct One-Line Imports (Explicit Importing)

import facebook from '../assets/icons/facebook.png';
import twitter from '../assets/icons/twitter.png';
import linkedin from '../assets/icons/linkedin.png';

2. Grouped Imports via index.js (Barrel Export)

First, you create an index.js file inside the icons/ folder:

src/assets/icons/index.js
export { default as facebook } from './facebook.png';
export { default as twitter } from './twitter.png';
export { default as linkedin } from './linkedin.png';

Then in your component:

import { facebook, twitter, linkedin } from '../assets/icons';

---

✅ Pros and Cons

🔹 Direct One-Line Imports

Pros:

• Simple and beginner-friendly.

• No setup required.

• Good for small projects.

Cons:

• Becomes repetitive with many assets

• Harder to refactor (you change paths in every file)

---

🔹 Grouped Imports via index.js

Pros:

• Cleaner and more maintainable imports.

• Easy to rename or replace files.

• Better for scaling and consistency.

Cons:

• Requires an extra step (creating the index.js).

• Slightly less obvious for beginners where the files are coming from.

---

🧠 When to Use Each

---

🏁 Final Recommendation

If you're just starting or building a small portfolio site, direct imports are perfectly fine.

But if you’re creating a reusable design system or plan to use the same icons in multiple components, invest a little time into setting up an index.js export file. It will save you time and make your codebase cleaner in the long run.