DEV Community

Saiful Islam
Saiful Islam

Posted on

2

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
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

Now, you can import icons easily:

import { NotificationIcon, UserIcon } from "@/assets/icons";
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay