Developer Tools

SVG to React Component Converter

Paste any SVG and get a clean React component. Renames attributes, parses inline styles, adds size and color props, and supports TypeScript and forwardRef.

SVG markup

Paste a single SVG element or the full contents of an .svg file. XML declarations and DOCTYPE lines are stripped automatically.

Input does not start with an <svg> tag. Paste SVG markup, not a raster image.

React component (Icon.tsx)

Output appears here once the SVG parses.

// Paste valid SVG markup above to generate a React component.

Component options

Tweak how the output is wrapped. All changes update instantly.

Naming and language

Component name

TypeScriptEmit a .tsx component with a typed prop interface.Forward refWrap in React.forwardRef so callers can attach a ref to the underlying SVG element.React.memoWrap the default export in React.memo for shallow prop memoization.Spread props onto root SVGAdds {...props} so callers can pass aria-label, className, style, or any standard SVGProps.Optional title for accessibilityAdds a title prop and renders an SVG <title> element only when provided.

Props and overrides

Replace width and height with a size propStrips the static width and height from the root SVG and binds both to a size prop with a default.

Default size

Color handling on the root SVG

currentColor lets the icon inherit text color. Bind to a prop if you need to set the color from the parent component.

Remove id attributesPrevents id collisions when the component renders multiple times on a page.Remove data-* attributesDrops the tracking / tooling attributes added by Figma, Sketch, and other editors.

Indent size

Attribute string quotes

What the converter changes

class becomes className; hyphenated SVG attributes like stroke-linecap become strokeLinecap.
Namespaced attributes such as xlink:href become xlinkHref; the xmlns attribute is always normalised on the root.
style="..." is parsed into a React style object with camelCased keys and string values, so existing units stay intact.
Tag names like clipPath, linearGradient, feGaussianBlur, and foreignObject are switched to the camelCase forms React expects.
Elements without children are self-closed, and HTML comments are turned into JSX comments.
on* event handler attributes and <script> elements are removed so the component is safe to ship.

Usage in your app

Copy the component into a Icon.tsx file in your icon directory, then import it like any other React component:

import Icon from "./Icon";

export function Header() {
  return (
    <button aria-label="Confirm">
      <Icon size={20} />
    </button>
  );
}

Need many icons? Run this converter once per SVG and drop each component into the same folder. Each output is self-contained and tree-shakeable.

How to use

Paste an SVG element or the full contents of an .svg file into the input on the left. The component preview updates as you type, and a sample icon is loaded so you can see the output immediately.
Set the component name (must start with an uppercase letter). Toggle TypeScript for a typed .tsx component, forwardRef for ref support, and React.memo for shallow prop memoization.
Wire the icon to props: replace width and height with a size prop, replace root colors with currentColor (so the icon inherits text color) or bind them to a configurable color prop, and choose whether to spread extra props onto the root svg.
Tweak hygiene options: remove id attributes to avoid collisions when the icon renders many times on a page, strip data-* attributes added by Figma and Sketch, and pick double or single quotes plus 2 or 4 space indentation to match your codebase.
Click Copy component to grab the full file, then save it as Icon.tsx (or whichever name you chose) and import it like any other React component.

About this tool

SVG to React Component Converter turns a pasted SVG into a complete React functional component you can drop straight into a .tsx or .jsx file. The conversion runs entirely in your browser using DOMParser plus a tree walker, so any script tag or on* event handler in the input is removed and never executed. Attribute names are rewritten to the casing React expects: class becomes className, hyphenated SVG attributes like clip-path, fill-rule, stroke-linecap, stroke-linejoin, color-interpolation-filters, and dominant-baseline become clipPath, fillRule, strokeLinecap, strokeLinejoin, colorInterpolationFilters, and dominantBaseline, and namespaced attributes such as xlink:href, xml:space, and xmlns:xlink become xlinkHref, xmlSpace, and xmlnsXlink. Tag names that React requires in camelCase are renamed too (clipPath, linearGradient, radialGradient, foreignObject, textPath, animateTransform, feGaussianBlur, feComposite, feColorMatrix, feDropShadow, and the rest of the SVG filter family). Inline style strings are parsed into React style objects with camelCased keys and quoted string values so units like px, %, em, and CSS custom properties stay intact. Elements without children are self-closed, HTML comments turn into JSX comments, the root svg always carries the SVG namespace, XML declarations and DOCTYPE lines are stripped, and Figma or Sketch tracking attributes can be removed with one toggle. On top of the syntactic conversion, the tool builds a real component wrapper: pick the component name, choose TypeScript or JavaScript, opt in to React.memo and React.forwardRef with a typed ref, replace the static width and height with a size prop that defaults to your chosen value, replace root colors with currentColor (so the icon inherits text color) or bind them to a configurable color prop with a default, and spread the remaining props onto the root svg so callers can pass aria-label, className, style, onClick, and any other React.SVGProps. An optional accessibility mode adds a title prop and renders an SVG title element only when provided, which is the lightweight pattern recommended by the WAI for inline icons. Indent size and attribute quote style (double or single) are configurable to match your codebase. The output panel reports line and character counts, surfaces warnings when inline scripts or event handlers had to be stripped, and a copy button drops the component on your clipboard. Useful for converting Figma exports into icon components, porting Lucide or Heroicons style files into custom variants, building a typed icon set without installing SVGR or running a build step, and turning marketing-page illustrations into reusable React modules. Everything stays in your browser; pasted SVG markup never leaves your device.

Free to use. Works in your browser. No signup, no login.

Related tools

SVG to React Component Converter

How to use

About this tool

You may also like

SVG to Data URI

SVG Optimizer

SVG to PNG Converter

HTML to JSX Converter

HTML Formatter

SVG to React Component Converter