and \<desc>** This is the first step to follow to make your SVGs accessible. Provide meaningful descriptions using the `<title>` and `<desc>` elements. These elements make sure that screen readers understand what the SVG actually represents. Example: ```txt <svg width="50" height="50" role="img" aria-labelledby="icon-title icon-desc"> <title id="icon-title">Checkmark Icon

SVGs are internet's favorite way of using images nowadays. Be it icons, illustrations, UI elements, or just plain images; SVGs or Scalable Vector Graphics are the go to because of their infinite scalability (it’s in the name!) and efficiency. Since React is also a popular JS library, SVGs have also taken over in usage in React. So we decided to write about it. In this blog we’ll show you some of the easiest and sureshot methods of using SVGs in React including styling and animating. You’ll also learn how React actually renders SVGs and how SVGs are accessible to all users. So, let's explore how to use SVGs effectively in React! ## **What is SVG?** SVG, or Scalable Vector Graphics is a vector-based image format that uses Extensible Markup Language (XML) to define graphics. Instead of raster image formats like PNG, JPEG, or GIF that store images as grids of coloured pixels, SVGs describe images using mathematical equations, shapes, and paths. SVG usually starts with this syntax - ```txt ``` ## **Why SVGs Matter in Modern React** SVG plays an important role in modern React applications because they align naturally with React component-based and dynamic models. Instead of managing multiple image sizes, you just control one vector with props and CSS. All the SVG formats are editable, scalable, and highly customizable through code. React can render as live nodes, allowing them to fit deeply with the component lifecycle, state, and modern styling tools. Here are some core reasons- ### **The shifting from raster images to SVG** Raster images are fixed-pixel-based images. When you scale raster images in your actual size, like 2x,3x,4x, or 5x, they look so blurry. And you can not use them in your projects. On the other hand, SVGs are mathematically based paths. With CSS, they can play the same role in sharpness, weight, and styling at any screen size. ```txt export default function RasterVsVector() { return (

{/* Raster (needs multiple sizes, can blur when scaled) */}

{/* Vector (scales perfectly) */}

); } ``` ### **Developers prefer SVGs for UI elements in React** React developers prefer SVGs because SVGs can behave like React components, be reusable, adapt easily to light and dark themes, and respond to state changes like active, hover, or disabled without using assets. That is why SVGs are ideal for modern UI elements in React. Just take a look to the example: ```txt function BellIcon({ size = 20, active = false }) { return ( ); } export default function Example() { return (

); } ``` ### **Common real-world use cases (icons, illustrations, charts, UI states)** #### **Icons:** SVG is the most common and practical format for using icons in React apps. SVG icons can be used in buttons, navigations, forms, and dashboards without any hesitation. ```txt function ArrowRight({ size = 18 }) { return ( ); } export default function Button() { return ( ); } ``` #### **Illustrations:** Illustrations stay lightweight and scale beautifully, especially when used for onboarding screens, empty states, dashboards, and marketing sections. Replacing old illustrations, they stay crisp and adjusted at all screen sizes without exporting any new assets or code. ```txt export default function SimpleIllustration() { return ( ); } ``` Icons and illustrations are mostly used in the development world. ## **How React Actually Renders SVGs** It's easy to overlook these small syntax details, but they are crucial for SVGs to render and behave correctly in React. ### **SVG elements inside the Virtual DOM** When you import an SVG directly into JSX, React does not count it as an `` tag. Actually, every SVG tag, like `

` or ``. ```txt function StatusIcon({ active }) { return ( ); } ``` When active changes occur, React updates only the `fill` attribute, not the entire SVG. ### **JSX differences between HTML and SVG attributes** SVG syntax comes from XML, while JSX follows JavaScript naming rules. Most of the SVGs are converted to camelCase when used in React applications. A React application relies on these names to correctly map attributes to the DOM. Mixing HTML or raw SVG syntax with JSX is one of the common reasons to break SVGs in React apps, which face developers most of the time. ```txt export default function SvgAttributesExample() { return ( ); } ``` ### **Common syntax mistakes developers face** Most of the SVG issues in React come from small JSX syntax mistakes. Not from the complex logic in React. SVG follows XML rules, and JSX follows the JS conventions. Those mixing leads to rendering errors and unexpected behavior. * Using `dash-case` attributes instead of `camelCase` ```txt // ❌ Wrong // ✅ Correct ``` * Using `class` instead of `className` ```txt // ❌ Wrong // ✅ Correct ``` * Missing or incorrect `viewBox` ```txt // ❌ Scales poorly // ✅ Scales correctly ``` These are small syntax details easy to overlook, but they are critical for SVGs to render and behave correctly in React. ## **7 Easy Methods to Import SVGs in React** There are several ways to import SVGs in React. Here are seven methods with examples for you. If you follow these methods, you will be able to use SVGs efficiently in React applications. ### **Method 1:** Inline **SVG** as **JSX** In this method, SVG markup is imported directly inside the JSX. JSX gives you complete control over every element and attribute. And the most straightforward approach is to directly use it in your React components. ```txt export default function InlineSvg() { return ( ); } ``` ### **Method 2:** Using the `` Tag This is the simple way to import SVGs like any other image file. You can import the SVG file and use it in an HTML `` element. It works well for static graphics but does not allow styling SVG parts with CSS or props. ```txt export default function ImgSvg() { return ( check icon

); } ``` ### **Method 3:** Import as **React Component** (SVGR) With the modern React tool SVGR (create React app, Vite, Next.js) can be imported as React components. This tool transforms SVG files into React components automatically. The automatic conversion SVGR tool reduces your time writing SVG markup. ```txt import logo from './assets/logo.svg'; const Header = () => { return (

); }; ``` ### **Method 4:** React Component **Wrapper** Here, you can wrap SVG markup inside a reusable React component instead of being used as a static file. This allows you to control the SVG using props like width, height, color, and className. This approach gives you the benefits of components without SVGR. ```txt function CheckIcon({ size = 24, color = "currentColor" }) { return ( ); } export default CheckIcon; ``` ### **Method 5:** Using **react-svg** The library converts external SVG files into inline elements in your React app. So, you can style and manipulate SVGs like handwritten inline SVGs. To use the `react-svg` library, you need to install npm first. And then you can embed the inline SVG files in your React app. ```txt npm install react-svg ``` Usage of react-svg library: ```txt import { ReactSVG } from 'react-svg'; const IconDisplay = () => { return (

{ svg.classList.add('user-icon'); svg.setAttribute('style', 'width: 50px; height: 50px;'); }} afterInjection={(error, svg) => { if (error) { console.error('SVG injection error:', error); return; } console.log('SVG loaded successfully'); }} />

); }; ``` ### **Method 6:** SVG **sprite** **sheets** SVG sprite sheets combine multiple SVG icons into a single file. Each icon is wrapped inside a `` and referenced wherever needed using the `` tag. This method reduces HTTP requests when maintaining individual access to each icon. Create an SVG sprite: ```txt ``` Use the sprite in React: ```txt const Icon = ({ name }) => ( ); // Usage ``` ### **Method 7:** Using SVG as a **data URL** The last method of importing SVGs is using SVG as a data URL. In this method, the SVG is used directly inside a URL string. After that, the URL can be applied anywhere an image URL is accepted, like ``, CSS background image, and inline styles. Here are the examples: As you can see, using the SVG as an `` Source. If you want to use SVG in a data URL, you can follow this method. ```txt export default function DataUrlSvg() { const svgDataUrl = "data:image/svg+xml;utf8,"; return ( check icon

); } ``` Also, there is another example for you that you can use SVG as a CSS background. ```txt export default function DataUrlSvgBackground() { const svgDataUrl = "data:image/svg+xml;utf8,"; return (

); } ``` ## **Styling SVGs in React Applications** You have explored in the previous section the methods of importing SVGs in React. Now we will show you how to style SVGs in React. Although there are a lot of ways to style SVG in React, we will try to show you some important methods from them with an example. ### **1. Inline Styles:** You can directly apply styles to SVG elements using the `style` prop in JSX. But an important note is- This is an easy and quick way to style individual elements, but it may not be flexible or reusable for large applications. ```txt import { ReactComponent as CheckIcon } from "./check.svg"; export default function InlineStyleExample() { return ( ); } ``` ### **2. CSS classes:** A traditional approach for styling with CSS classes or IDs. It is more scalable and maintainable when the same style is needed in multiple elements across the same application. ```txt import { ReactComponent as CheckIcon } from "./check.svg"; import './styles.css'; export default function CssClassExample() { return ; } ``` CSS file: (styles.css) ```txt .icon-check { fill: #2563eb; width: 40px; height: 40px; stroke: #fff; stroke-width: 2px; } ``` ### **3. CSS Modules:** When you use CSS modules, you can import styles from a `.module.css` file. Every CSS file is linked to a specific component. So, class names don’t conflict with others. ```txt import { ReactComponent as CheckIcon } from "./check.svg"; import styles from './Icon.module.css'; export default function CssModulesExample() { return ; } ``` Icon.module.css: ```txt .iconCheck { fill: #2563eb; width: 40px; height: 40px; stroke: #fff; stroke-width: 2px; } ``` ### **4. Styled Components (CSS-in-JS):** Nowadays, this is a super popular `CSS-in-JS` library that lets you write components inside your `JavaScript` and keep styles scoped to each component. ```txt import styled from 'styled-components'; import { ReactComponent as CheckIcon } from "./check.svg"; const StyledCheckIcon = styled(CheckIcon)` fill: #2563eb; width: 40px; height: 40px; stroke: #fff; stroke-width: 2px; `; export default function StyledComponentsExample() { return ; } ``` ## **How to Animate SVGs in React** For animating SVGs in React applications, you have to use pure `CSS`, the native **Web Animations API (WAAPI)**, or dedicated animation libraries like **Framer Motion** and **React Spring**. But before starting to animate your SVGs, you have to properly prepare the SVGs for React. Make sure that you're using SVG as a React component instead of the `` tag. Most of the modern React development tools, like Create React App or Vite with the (Vite.plugin-svgr) plugin, support this by default. ```txt import { ReactComponent as Logo } from './logo.svg'; // or for Vite: import Logo from './logo.svg?react'; const App = () => { return (

); }; ``` ### **CSS Animations** You can animate SVGs using CSS (like @keyframes, stroke-dasharray, stroke-dashoffset, transform, etc.). It’s ideal for simple, declarative animations. Animating a Checkmark Stroke: ```txt import { ReactComponent as CheckIcon } from "./check.svg"; import './styles.css'; export default function CssAnimationExample() { return ; } ``` styles.css: ```txt .animate-check path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } ``` ### **Animations Libraries (Framer motion, React spring)** For more complex or interactive animations, React animation libraries- Framer Motion and React Spring provide advanced capabilities like declarative and high-level animations, physics-based animations. #### **Framer Motion** Framer Motion provides a declarative way to animate components, including SVGs. It uses motion components (e.g., ``, ``) and variants for defining animation states. Framer Motion also allows you to animate properties like opacity, scale, and rotation with ease. NPM installation: ```txt npm install framer-motion ``` Animate SVG with Framer Motion ```txt import { motion } from "framer-motion"; export default function FramerMotionExample() { return ( ); } ``` #### **React Spring** React Spring is a popular library that makes it easy to create interactive and physics-based animations in React. It provides hooks like `useSpring` and `useTrail` to animate values such as **opacity**, **scale**, and **rotation** with fluid, natural motion. Install React Spring: ```txt npm install @react-spring/web ``` Animate SVG with React Spring ```txt import { useSpring, animated } from "@react-spring/web"; export default function AnimatedCheck() { const styles = useSpring({ from: { strokeDashoffset: 100, opacity: 0 }, to: { strokeDashoffset: 0, opacity: 100 }, config: { tension: 200, friction: 20 }, }); return ( ); } ``` ### **Web Animations API (WAAPI)** The Web Animations API (WAAPI) provides a native JavaScript method to animate DOM elements directly, without depending on external libraries or complex CSS configurations. By using the `useRef` hook, you can get access to the SVG element and apply animations with the `.animate()` method. ```txt import { useEffect, useRef } from "react"; import { ReactComponent as CheckIcon } from "./check.svg"; // Replace with your SVG file export default function WaapiExample() { const pathRef = useRef(null); // useRef to access the SVG element useEffect(() => { const path = pathRef.current; // Get the SVG path element // Use the .animate() method to animate the path path.animate( [ { strokeDasharray: "0, 100", offset: 0 }, // Start point { strokeDasharray: "100, 100", offset: 1 }, // End point ], { duration: 2000, // Animation duration in milliseconds fill: "forwards", // Keep the final state after the animation } ); }, []); return (

{/* Access the SVG element using the ref */}

); } ``` ## **TypeScript Integration** TypeScript adds type safety to your React components, making your SVG handling more robust and maintainable. When working with SVGs as props, proper typing prevents runtime errors and provides excellent IDE autocomplete support. ### **Importing SVG as React Components** In React with TypeScript, you can pass SVG components as props. This is useful when you want to reuse the same SVG component with different properties like `color`, `size`, or other `styles`. ```txt // CheckIcon.tsx import { SVGProps } from "react"; const CheckIcon = (props: SVGProps) => ( ); export default CheckIcon; ``` ```txt // App.tsx import React from "react"; import CheckIcon from "./CheckIcon"; const App: React.FC = () => { return (

{/* Passing CheckIcon as a component prop */}

); }; export default App; ``` ### **Dynamic SVG Props with TypeScript** If you want to pass dynamic props to an SVG, you can define an interface for the props. This way, you can control properties like `width`, `height`, or even the path data dynamically. ```txt // CheckIcon.tsx import { SVGProps } from "react"; interface IconProps extends SVGProps { customColor?: string; } const CheckIcon: React.FC = ({ customColor = "black", ...props }) => ( ); export default CheckIcon; ``` ```txt // App.tsx import React from "react"; import CheckIcon from "./CheckIcon"; const App: React.FC = () => { return (

{/* Passing custom color prop */}

); }; export default App; ``` ## **When NOT to Use SVGs** SVGs are a powerful format. Although modern platforms support SVG for better performance and flexibility; there are some specific scenarios where SVG is not recommended, and alternative image types like JPG, PNG, or WebP are more appropriate to use. You should avoid using SVGs in the following scenarios - * **Photographs**: SVGs are vector-based, they use mathematical shapes and paths to express them. That's why SVGs are unsuitable for photographs or complex raster images. Photographic images contain a million or more pixels of color data and fine details that are inefficiently represented by vectors. * **Older Browsers**: SVG is designed for modern web standards. Therefore, very old or legacy browsers may not support SVG. Older browsers, such as Internet Explorer 8 and below, and some older mobile browsers may have limited or no support for SVG. * **Social Media Platforms:** Most social media sites do not support SVG uploads for profile pictures and posted images. They must be in the required raster formats like JPG or PNG. Uploading SVG files will likely result in an error or an empty folder. ## **Practical Guide to Using SVG Icons in React** When you are building modern web applications with React, SVGs are the best choice for scalable and high-quality graphics. SVGs have some advantages over raster images. SVGs are scaled perfectly, offer smaller file sizes, and allow dynamic styling and animations. ### **Using SVG Icons in React** React app makes it easy to perfectly fit into your app. Here’s a breakdown of how you can use SVG icons in React. We bring the most popular [ React icon library ](https://hugeicons.com/react-icons) for example - [Hugeicons](https://hugeicons.com/) icon library. #### **Prerequisites for using SVG icons in React** Before you using Hugeicons icon library in React, You should have- 1. Node.js and a package manager (npm, pnpm, or Yarn and bun) 2. A React app (Create React App, Next.js, Vite, etc.) 3. Basic familiarity with JSX and React components Here are some practice guide examples for you. First of all, you have to Install the React component package: npm package: ```txt npm install @hugeicons/react ``` This package gives icons renderer component. Which helps to render raw SVG icons from [Hugeicons packages](https://hugeicons.com/packages). Once you install the React component package, as well as you can install the free icon pack from Hugeicons icon library. npm free icon pack: ```txt npm install @hugeicons/core-free-icons ``` **Basic Usage:** (Free icons from Hugeicons) ```txt import { HugeiconsIcon } from '@hugeicons/react' import { Notification03Icon } from '@hugeicons/core-free-icons' function App() { return } ``` You can adjust the `size`, `color` and `strokewidth` props. That will directly change on the rendered SVG icon. ### **Core advantages of using Hugeicons icons in React** * **Scalability:** Since SVGs are vector-based icons that can be scaled to any screen size without losing quality or pixelation. SVGs are perfect for responsive web designs, where you need icons to look sharp on all screen sizes. * **Dynamic Styling:** With the React components, you can style them by dynamically using CSS or inline styles. For example, you can change the color based on the component's state. * **Performance:** For the simple icons and logos, SVG files are often smaller in size than the raster image and speed up page load time. Especially if you’re using a large icon set. * **Interactive:** You can add animations for SVG icons using CSS or React Spring. For example, you can animate an SVG icon's stroke to create a drawing effect. ## **Making SVGs Accessible for All Users** SVGs are powerful elements for their simple, scalable, and lightweight graphics. But after that, they need to be accessible to all users, including those who depend on screen readers and keyboard navigation. If you want to create a fully accessible SVG in React, you need to follow the steps outlined below. ### **Provide Descriptive Text with \ and \<desc>** This is the first step to follow to make your SVGs accessible. Provide meaningful descriptions using the `<title>` and `<desc>` elements. These elements make sure that screen readers understand what the SVG actually represents. Example: ```txt <svg width="50" height="50" role="img" aria-labelledby="icon-title icon-desc"> <title id="icon-title">Checkmark Icon A green checkmark indicating a completed task ``` ### **Use ARIA Attributes** Accessible Rich Internet Applications (ARIA) attributes are essential for improving accessibility. They help define how assistive technologies interpret content. So, you can use `aria-hidden`, role, and aria-labelledby to control how the SVG is interpreted by screen readers. Example: ```txt ``` ### **Clear Focusable Interactive Elements** If your SVGs are interactive, such as buttons and links, make sure they are focusable for keyboard users. And they can interact with your SVGs. You can add a `tabindex` attribute and use `aria-label` to describe the actions. Example: ```txt ``` ### **Use role="img" for Visual SVGs** Always use `role="img"` to indicate to screen readers that the SVG is an image. This element improves accessibility for screen readers by declaring the SVG as an image. Example: ```txt ``` ## **Final Thoughts about using SVGs in React** SVGs are a great fit for React because they stay sharp at any screen size. And you can control them using props, state, and CSS. If you use SVG and style it in your web design, you don't need to explore multiple raster images. In this guide, we showed you ways to use SVGs in React, how React renders SVG elements, and some common JSX mistakes. We also helped you explore the styling, animation, and accessibility in SVG. We hope that this guide gives you the full concept of using SVGs in React. Overall, when used correctly, it provides a clean, flexible, and scalable solution for building modern React UIs.

Hugeicons Blog

React js

How to use SVGs in React: a Complete Guideline