SVG to JSX Converter

What changes when SVG becomes JSX?

Browser SVG uses XML-style attributes. React expects DOM property names: stroke-width becomes strokeWidth, class becomes className, and a CSS style string becomes a JSX style object. The converter handles those changes and wraps the result in a typed component.

import type { SVGProps } from 'react';

export default function CheckIcon(props: SVGProps<SVGSVGElement>) {
  return <svg viewBox="0 0 24 24" {...props}>…</svg>;
}

SVG component or image?

Use a component when the graphic needs inherited color, props, animation, or accessible SVG content. Use an <img> or CSS data URI for fixed decorative graphics that do not need access to internal paths. Components add SVG markup to the rendered HTML; images keep that markup isolated.

Using the component in React

Download the TSX file or copy the output, then import it like any local component:

import Icon from './Icon';

export function Button() {
  return <Icon aria-hidden className="h-5 w-5" />;
}

Frequently asked questions

How do I convert SVG to JSX?

Paste SVG markup above. The converter changes SVG attribute names and inline styles to JSX syntax, then wraps the result in a typed React component.

What is the difference between SVG and JSX?

SVG is XML markup. JSX uses JavaScript DOM property names, so attributes such as stroke-width must become strokeWidth.

Can I use the output in TypeScript?

Yes. The generated file imports SVGProps from React and types its component props for an SVG element.

Is the SVG uploaded?

No. Parsing, conversion, preview, copying, and download all happen locally in your browser.

Need a CSS image instead? Use the SVG to CSS converter. For the component-vs-data-URI tradeoffs, read the React SVG guide.