All tools

SVG to JSX Converter

Paste SVG, get React JSX you can drop in.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon">
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>

Renames kebab-case attributes to camelCase, converts inline style strings to JS objects, drops XML declarations, DOCTYPE, and comments, and self-closes void elements.

About

React JSX has small differences from raw SVG (className, camelCase attrs, self-closing tags). This converts a pasted SVG to valid JSX you can paste into a component.

How to use

  1. Paste your SVG.
  2. Copy the JSX output.

FAQ

What changes are made?+

kebab-case attributes become camelCase (stroke-width to strokeWidth). class becomes className. Self-closing tags get the closing slash. Comments and XML declarations are stripped.