Display SVG Icons in UI Using React Component

Home Q&A Display SVG Icons in UI Using React Component

SVG icons are popular in web development because they are lightweight, scalable, and easy to style. In React, there are several simple ways to display .svg files:

1. Import SVG as a React Component

Import the SVG file directly and use it like a normal component:

import { ReactComponent as MyIcon } from './icons/my-icon.svg';

const MyComponent = () => <MyIcon width={24} height={24} />;

Note: Supported in Create React App (CRA) and Vite (with vite-plugin-svgr).

Advantages:

Full styling control via props or CSS
Supports dynamic color changes and hover effects

2. Use SVG as an img Tag

Treat the SVG like a regular image:

const MyComponent = () => (
  <img src="/icons/my-icon.svg" alt="My Icon" width={24} height={24} />
);

Advantages:

-> Very simple for static icons

Limitations:

-> Harder to change colors dynamically

3. Inline SVG Code Inside the Component

Paste the SVG markup into your component:

const MyIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 22h20L12 2z" fill="currentColor"></path>
  </svg>
);

Advantages:

Full styling flexibility with CSS
No external file dependency

4. Dynamically Import SVG Files

Load icons based on props:

const MyComponent = ({ iconName }: { iconName: string }) => {
  const Icon = require(`./icons/${iconName}.svg`).default;
  return <img src="{" icon="" }="" alt="{iconName}">;
};

Or with Vite:

const icons = import.meta.glob('./icons/*.svg', { eager: true, import: 'default' });
const MyComponent = ({ iconName }: { iconName: string }) => {
  const Icon = icons[`./icons/${iconName}.svg`];
  return <img src="{" icon="" }="" alt="{iconName}">;
};

Advantages:

Efficient when handling many icons
Supports lazy loading for smaller bundles

Best Practice Recommendation

Dynamic and styled icons? → Import SVG as a React component.
Simple static icons? → Use an img tag.
Maximum control? → Inline the SVG.

Choose the method that fits your needs and keep your UI lightweight and flexible!

Need Help With React js Development?

Work with our skilled React developers to accelerate your project and boost its performance.

Support On Demand!

Related Q & A

Services

Mobile Application Development

Ecommerce Development

Microsoft App Development

Open Source Development

Content Management System

Custom Software Development

Our Expertise

Travel Portal Devlopment

Event Management Software

Transport and Logistics software

Cloud Computing

Custom CRM Software Development

Enterprise Mobility Solutions

Education / E-Learning

Startup Consulting

Booking Widgets

Hire Developers

Hire Web Designer

Hire Web Developers

Hire ASP.NET Developers

Hire ASP.Net Core Developers

Hire WordPress Developers

Hire E-Commerce Developers

Hire Magento Developers

Hire ReactJS Developers

Hire Angular JS Developers

Hire NodeJS Developers

Hire React Native Developers

Technologies

Contact For Sales

sejal@niotechone.com

sales@niotechone.com

Sales +91 9925 66 2323

Sales +91 9925 66 8383

Contact For Careers

career@niotechone.com

HR +91 99244 08252

India

3rd Floor, Aval Complex, University Road, above Balaji Super Market, Panchayat Nagar Chowk, Indira Circle, Rajkot, Gujarat 360005.

Canada

Abbotsford, BC

Dubai

15th B Street 103, al Otaiba Dubai DU 00000, United Arab Emirates

Contact For Sales

sejal@niotechone.com

sales@niotechone.com

Sales +91 9925 66 2323

Sales +91 9925 66 8383

India

3rd Floor, Aval Complex, University Road, above Balaji Super Market, Panchayat Nagar Chowk, Indira Circle, Rajkot, Gujarat 360005.

Canada

Abbotsford, BC

Dubai

15th B Street 103, al Otaiba Dubai DU 00000, United Arab Emirates

Contact For Careers

career@niotechone.com

HR +91 99244 08252

Copyright © 2026 Niotechone Software Solution Pvt. Ltd. All Rights Reserved.