Managing and Using Custom Icons in React: A Scalable Approach

Icons are essential for any modern web application, improving usability and aesthetics. Instead of relying on third-party icon libraries, managing a custom icon system in React provides flexibility, consistency, and better performance.

In this article, we'll explore how to organize, use, and manage SVG icons efficiently in a React project using TypeScript.

---

Why Use Custom Icons Instead of Libraries?

Many developers default to libraries like FontAwesome or Material Icons, but using custom SVG icons has key advantages:

✅ Performance: No external dependencies or extra HTTP requests.
✅ Customization: Easily modify size, color, and properties dynamically.
✅ Scalability: Keep your icon set consistent across the app.

Let’s set up a structured approach to managing custom icons in React.

---

Folder Structure for Icon Management

A well-organized folder structure improves maintainability:

src/
  assets/
    icons/
      index.tsx       // Centralized export of all icons
      NotificationIcon.tsx // Example icon
      UserIcon.tsx    // Another example icon

This structure keeps all icons in one place, making them easy to import and reuse.

---

Creating an Icon Component

Each icon is an individual React component, making it reusable and customizable. Here's an example:

NotificationIcon.tsx

import React from "react";

type SVGProps = React.SVGProps<SVGSVGElement>;

export const NotificationIcon: React.FC<SVGProps> = ({ ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
    {...props}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M18.3325 13.0613H17.9128C19.069 13.0613 20 13.9747 20 15.1015V15.511C20 15.9648 19.6268 16.3266 19.1661 16.3266H0.833873C0.372903 16.3266 0 15.9613 0 15.511V15.1015C0 13.9752 0.93447 13.0613 2.08717 13.0613H1.66748C2.12554 13.0613 2.49994 12.6955 2.49994 12.2442V7.34691C2.49994 3.28752 5.85782 0 10.0001 0C14.1434 0 17.5003 3.28927 17.5003 7.34691V12.2442C17.5003 12.6983 17.8729 13.0613 18.3327 13.0613H18.3325ZM7.08301 17.1429H12.9163C12.9163 18.7208 11.6104 20 9.99967 20C8.38892 20 7.08301 18.7208 7.08301 17.1429Z"
      fill="currentColor"
    />
  </svg>
);

Making Icons Easily Accessible

Instead of importing icons one by one, create an index.tsx file to export all icons from one place:

index.tsx

export { NotificationIcon } from "./NotificationIcon";
export { UserIcon } from "./UserIcon";

Now, you can import icons easily:

import { NotificationIcon, UserIcon } from "@/assets/icons";

---

Using the Icons in Components

You can now use icons like this:

<NotificationIcon width="24" height="24" fill="blue" />
<UserIcon width="32" height="32" fill="red" />

---

Conclusion

Managing custom icons in React using TypeScript provides better performance, customization, and scalability than relying on third-party libraries. With a structured folder setup, reusable components, and centralized exports, your icon system will be easy to maintain and extend.

🚀 How do you manage icons in your React projects? Share your thoughts in the comments!