How do I use the React component?

Save the code as a .tsx file named after the component, for example MoonBadge.tsx, import it and render it like any element: . Every prop you pass goes to the element, so className, width, height, style, aria attributes and event handlers all work, and so does ref on React 19.

Why are some ids rewritten with useId?

When the same SVG appears twice on a page, both copies define the same gradient, clip path or mask ids, and the browser uses the first one it finds. If that copy is hidden, the second one loses its gradient. useId() gives each instance its own prefix. Only ids that the SVG refers to itself are changed; turn the option off to keep every id as it is.

What happens to xlink:href?

It becomes href, which every current browser supports in SVG, and the xmlns:xlink declaration is dropped. Other xlink and xml attributes become React props such as xlinkTitle and xmlSpace.

What does the converter remove?

Things that do not belong in a component or that React would reject: elements, event handler attributes such as onclick (pass functions as props instead), javascript: URLs, comments, editor metadata from Inkscape, Illustrator and Sketch, and enable-background. The notes under the output list what was changed, and warn if the SVG still links to outside files, which load when the component renders.

No. The conversion runs in your browser, and the SVG and the component code never leave your computer.

SVG to React component

Convert SVG to JSX: paste the code or open a file and get a typed React component, with React prop names, style objects and ids that stay unique on every instance.

Runs in your browser, nothing is uploaded

SVG code

Preview of your SVG, drawn as an image so nothing in it runs.

ComponentTypeScriptUnique ids (useId)Remove width and height

The component appears here.

Have a PNG or JPG? Vectorize it

SVG.new traces PNG, JPG and WebP images into SVG paths you can edit, recolor and download. Your first conversion needs no account.

Convert PNG to SVG

Do this from Claude Code or Codex

Ask your agent to vectorize logo.png and turn the result into a React component. With the SVG.new MCP server added, Claude Code or Codex does the vectorizing step itself, from PNG, JPG or WebP.

Claude Code Codex

How to convert SVG to JSX

1
Paste the SVG or open the file
Paste markup copied from Figma, Illustrator, an icon set or a web page, or drop an .svg file on the code box. SVG copied out of HTML often lacks xmlns; the converter adds it.
2
Name the component and pick the options
The name comes from the file name, and you can change it. Leave TypeScript on for a .tsx file typed with SVGProps<SVGSVGElement>, or turn it off for plain JSX. Remove width and height if CSS or props should set the size.
3
Copy or download it
Save it in your components folder, import it and pass props: <MoonBadge className="h-6 w-6" />.

What changes between SVG and JSX

Attribute names: class becomes className, and hyphenated presentation attributes are camelCased the way React spells them: stroke-width becomes strokeWidth, xml:space becomes xmlSpace. data-* and aria-* attributes stay as they are.
Inline styles: style="fill:#fff; opacity:.85" becomes style={{ fill: "#fff", opacity: ".85" }}. Values stay strings, so nothing gains a px unit; CSS custom properties are kept.
xlink:href: Becomes href, and the xlink namespace declaration is dropped.
Ids: Ids used by url(#…), href="#…", aria-labelledby or a <style> block get a per-instance prefix from useId(), and every reference is rewritten to match.
Props: The root <svg> ends with {...props}, so anything you pass overrides the attributes in the file.

A file exported from a design tool converts more cleanly after a pass through the SVG optimizer: it removes metadata, shortens path data and, where it can, moves the rules of a <style> block onto the shapes, so the component carries fewer global class names.

Questions about SVG to React

How do I use the React component?: Save the code as a .tsx file named after the component, for example MoonBadge.tsx, import it and render it like any element: <MoonBadge className="h-6 w-6" aria-hidden />. Every prop you pass goes to the <svg> element, so className, width, height, style, aria attributes and event handlers all work, and so does ref on React 19.
Why are some ids rewritten with useId?: When the same SVG appears twice on a page, both copies define the same gradient, clip path or mask ids, and the browser uses the first one it finds. If that copy is hidden, the second one loses its gradient. useId() gives each instance its own prefix. Only ids that the SVG refers to itself are changed; turn the option off to keep every id as it is.
What happens to xlink:href?: It becomes href, which every current browser supports in SVG, and the xmlns:xlink declaration is dropped. Other xlink and xml attributes become React props such as xlinkTitle and xmlSpace.
What does the converter remove?: Things that do not belong in a component or that React would reject: <script> elements, event handler attributes such as onclick (pass functions as props instead), javascript: URLs, comments, editor metadata from Inkscape, Illustrator and Sketch, and enable-background. The notes under the output list what was changed, and warn if the SVG still links to outside files, which load when the component renders.
Is my SVG uploaded?: No. The conversion runs in your browser, and the SVG and the component code never leave your computer.

More free SVG tools

All three tools run in your browser. For turning images into SVG, see the image to SVG converter and the API docs.