SVG to JSX: Why Developers are Ditching <img> Tags in React

Why the <img> Tag is Holding You Back

In the early days of web dev, the <img> tag was the gold standard for everything. But for modern React applications, it creates a "silo" effect. When you load an SVG via a source path, it lives in the Shadow DOM—completely unreachable by your application's CSS or logic.

"Using an img tag for an SVG is like buying a Ferrari but never being allowed to open the hood."

The Engineering Case for Inline JSX

Mastering Tailwind CSS with JSX SVGs

This is where the magic happens. By converting your SVG to JSX, you can use Tailwind's group-hover and transition utilities to create professional UI interactions without writing a single line of custom CSS.

<button className="group flex items-center gap-2">
  <CloudIcon className="text-gray-400 group-hover:text-violet-500 transition-colors" />
  <span>Click Me</span>
</button>

*Tip: Use the fill="currentColor" attribute in your SVG paths to make them automatically inherit the text color of their parent container.*

Bringing Icons to Life with Animation

When an SVG is trapped inside an <img> tag, it’s a black box. You can move the box, but you can’t touch what's inside. By converting to JSX, every path, circle, and polygon becomes a DOM element you can animate individually.

Imagine a "Sync" icon where the arrows actually rotate while loading, or a "Checkmark" that draws its own path when a task is completed. Using libraries like Framer Motion, this becomes trivial:

<motion.path
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
  transition={{ duration: 2 }}
  d="M12 2L2 7l10 5 10-5-10-5z" 
/>

The Manual Conversion Headache

If JSX is so much better, why doesn't everyone use it? Because manual conversion is a nightmare. Standard SVG files exported from Figma or Illustrator are filled with "junk" code and syntax that React hates.

Impact on LCP and Core Web Vitals

In 2026, Google’s search rankings are heavily influenced by Core Web Vitals. Every <img> tag on your page represents an additional HTTP request.

When you inline your SVGs as JSX components, you reduce the number of requests to zero. This significantly improves your Largest Contentful Paint (LCP) because the icons render the moment your JavaScript loads, preventing that annoying "pop-in" effect (Cumulative Layout Shift) often seen with external images.

Development Workflow: Before & After

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7l10 5 10-5-10-5z" stroke="#000" stroke-width="2"/>
</svg>

import React from 'react';

// Optimized & Reusable React Component
export const CloudIcon = ({ color = 'currentColor', ...props }) => (
  <svg 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg" 
    {...props}
  >
    <path 
      d="M12 2L2 7l10 5 10-5-10-5z" 
      stroke={color} 
      strokeWidth={2} 
    />
  </svg>
);

Type-Safe Icons: Leveraging TypeScript

One of the biggest advantages of moving from .svg files to JSX is Type Safety. Standard <img> tags are "dumb"—they don't know if you're passing a valid width or a misspelled attribute.

By converting to JSX, you can extend React's native SVG types. This gives your team instant Autocomplete and prevents bugs before they hit production.

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  color?: string;
}

export const SearchIcon = ({ size = 24, color = "currentColor", ...props }: IconProps) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} {...props}>
    <circle cx="11" cy="11" r="8" />
    <path d="m21 21-4.3-4.3" />
  </svg>
);

The "Barrel" Pattern: Organizing Your Library

As your project grows, you might end up with 50+ icon components. Importing them individually can clutter your files. The Barrel Pattern allows you to export all icons from a single entry point.

export * from './HomeIcon';
export * from './SettingsIcon';
export * from './UserIcon';

import { 
  HomeIcon, 
  SettingsIcon 
} from '@/components/icons';

This keeps your "Imports" section clean and makes it much easier for other developers to find available icons in your design system.

Security Check: JSX vs. dangerouslySetInnerHTML

Many developers try to load SVGs dynamically by fetching raw strings and injecting them using dangerouslySetInnerHTML. This is a massive security vulnerability that can lead to Cross-Site Scripting (XSS) attacks if the SVG source is compromised.

In short: JSX isn't just more flexible; it's significantly safer for your users.