How to add SVG icons in React: A Complete Guide for 2026

If you are building a modern website, you need icons. They help users understand your interface faster and make your design look professional. React is the most popular way to build websites right now, but adding SVG icons to React can sometimes feel confusing because there are so many different ways to do it.

In this detailed guide, we will walk you through the absolute easiest and best ways to add SVG icons to your React projects. We will keep the words simple and the code easy to copy.

Why use SVG instead of PNG or JPG?

Before we start coding, let's talk about why SVG is the best choice. SVG stands for Scalable Vector Graphics. Unlike normal images (like PNGs or JPGs) which are made of tiny colored squares called pixels, SVGs are made of math and code.

This means:

• They never get blurry: You can make an SVG as big as a house, and it will still look perfectly sharp.
• File sizes are tiny: Because it's just text code, SVGs load almost instantly, making your website fast.
• You can change their colors: You can easily change an SVG's color when a user hovers over it using simple CSS.

Now that we know why we use them, let's look at how to use them in React.

1. The Best Way: Using SVG as a React Component

The most popular and powerful way to use an SVG in React is to turn it into its own component. This gives you complete control over the icon's size, color, and behavior.

Here is an example of an SVG turned into a React component:

import React from 'react';

const CheckCircleIcon = ({ size = 24, color = "currentColor", className = "" }) => {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      width={size} 
      height={size} 
      viewBox="0 0 24 24" 
      fill="none" 
      stroke={color} 
      strokeWidth="2" 
      strokeLinecap="round" 
      strokeLinejoin="round"
      className={className}
    >
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
      <polyline points="22 4 12 14.01 9 11.01"></polyline>
    </svg>
  );
};

export default CheckCircleIcon;

Why this is great: You can reuse this icon anywhere in your app like this: <CheckCircleIcon size={32} color="green" />

It is clean, reusable, and very easy to style with tools like Tailwind CSS.

2. The Quick Way: Using SVG as an Image Tag

What if you have a massive, complex SVG (like a big illustration) and you don't need to change its color? Turning it into a component might make your code messy.

Instead, you can just save your graphic.svg file in your public folder and use a standard image tag!

export default function DashboardHero() {
  return (
    <div>
      <h1>Welcome Back!</h1>
      <img src="/illustrations/welcome-graphic.svg" alt="Welcome to the dashboard" width="400" />
    </div>
  );
}

This keeps your React code clean and simple. However, remember that you cannot change the colors of the SVG using CSS if you do it this way.

3. The Smart Way: Using Icon Libraries (Like IconShelf)

Writing SVG paths by hand or manually saving hundreds of files takes too much time. The smartest developers use icon libraries.

With a platform like IconShelf, you don't even need to write the component yourself. You can search through over 300,000 icons, find the one you need, and simply copy the React code directly into your project.

No npm install, no heavy dependencies slowing down your app. Just grab the code you need and paste it.

Common Use Cases for Icons

Not sure where you should be putting icons? Here are the most common places they improve user experience:

• Buttons: Use icons to make your buttons more clear. A "Save" button with a floppy disk icon is much faster to recognize than text alone.
• Navigation: Help users find their way with visual cues in your sidebar or header menu.
• Dashboard: Use icons to represent different data types, like a dollar sign for Revenue or a user icon for New Signups.
• Empty States: When a user hasn't created any data yet, an illustration helps the screen feel less empty.

Recommended Icon Collections for React

If you are looking for the best premium-quality icons that work perfectly in React, we highly recommend checking out these collections:

• Lucide Icons - Clean, neutral, and consistent. Perfect for almost any project.
• Material Design - The standard for Android and Google-style apps.
• Phosphor Icons - Highly detailed and flexible with different weights.

Adding SVGs in React doesn't have to be hard. By using them as components or copying them from a smart library, your app will look better and load faster. Start experimenting with SVGs today!