SVG to JSX converter for React components
Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.
Free · no sign-up · runs in your browser
Normalized to PascalCase.
Paste a whole file. It never leaves your browser.
The component
Component
export function ArrowRight(): React.ReactElement {
return (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111111" strokeWidth="2" strokeLinecap="round" className="icon">
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
)
}What changed
- xmlns dropped — JSX does not need it.
- Hyphenated attributes camelCased (data- and aria- left alone).
React does not accept raw SVG. Attributes like stroke-width and stroke-linecap have to be camelCased, class becomes className, and an inline style string has to become an object or React throws. Doing that by hand for an icon set is tedious and easy to get subtly wrong — the classic mistake is camelCasing data- and aria- attributes too, which React only complains about at runtime. This converts the whole file in one paste, and tells you exactly what it changed.
How it works
- 01The SVG is parsed as text, not through the DOM, so the result is identical on the server and in your browser and the tool works the same either way.
- 02Every hyphenated presentation attribute is camelCased — stroke-width becomes strokeWidth, stop-color becomes stopColor — and class becomes className, for becomes htmlFor, xlink:href becomes xlinkHref.
- 03data-* and aria-* attributes are deliberately left alone. React expects those with their dashes intact, and camelCasing them is the most common bug in a hand-rolled converter because nothing fails until runtime.
- 04An inline style string is converted to a React style object, with CSS custom properties quoted as keys so they survive.
- 05Scripts and every on* event handler are stripped. Nothing here executes them, but the output is going into your codebase, so handing back a component with an onload attribute intact would just move the problem.
- 06Optionally: literal fill and stroke colours become currentColor so the icon takes the surrounding text colour, width and height become a size prop, and remaining props are spread onto the root element.
Use cases
- Converting an icon downloaded from a design tool or an icon library into a component.
- Turning a Figma SVG export into a typed component with a size prop.
- Building an in-repo icon set instead of adding an icon-library dependency.
- Making a monochrome icon theme-aware by switching its fills to currentColor.
- Fixing an SVG that React refuses to render because of a style string or a hyphenated attribute.
- Sanitising an SVG from an untrusted source before it goes anywhere near your bundle.
Frequently asked questions
How do I convert an SVG to a React component?
Paste the SVG above and copy the component that appears. The conversion camelCases hyphenated attributes, renames class to className, converts any inline style string to an object, and drops xmlns, which JSX does not need. Choose TypeScript or JavaScript, and optionally add a size prop or switch colours to currentColor.
Why does React reject my SVG?
Three things usually cause it. A hyphenated attribute like stroke-width is not valid JSX and must be strokeWidth. An inline style written as a string throws — React requires an object. And a stray class attribute is silently ignored rather than applied, because React wants className. All three are handled here.
Should data-* and aria-* attributes be camelCased in JSX?
No. React passes those through to the DOM verbatim and expects the dashes — aria-hidden, not ariaHidden; data-testid, not dataTestid. Converting them produces an attribute React does not recognise, and you only find out from a console warning at runtime. This converter leaves them exactly as written.
What does the currentColor option do?
It replaces literal fill and stroke colours with the keyword currentColor, so the icon inherits whatever colour the surrounding text has. That is what makes one icon work on a light and a dark background without a second copy. Values of none and gradient references like url(#id) are left alone, since replacing those would break the shape.
Is my SVG uploaded anywhere?
No. The conversion runs in your browser and nothing is sent to a server. That is also why the URL only remembers your options, not the SVG itself — the file stays on your machine.
Can I convert several SVGs into an icon set at once?
This converts one file at a time, which is the right unit when each icon becomes its own named component. For a whole directory, the usual approach is a build step — SVGR is the standard tool — and this is the faster path for one icon, a quick fix, or checking what a converter should have produced.
Related resources
SVG SpinnersA collection of 60+ SVG and CSS loading spinners — copy the markup or use them via Iconify.Design & UIOpen sourceSep 2
MDN Web DocsThe definitive reference for HTML, CSS, JavaScript, and the web platform.Learn & DocsPickFreeJul 17
ReactThe library for web and native user interfaces — official docs, learn section, and API reference.FrontendPickOpen sourceJul 17
Related reading
- Frontend5 Frontend Tools Worth Bookmarking in 2026A short, opinionated list of the frontend tools and references we reach for every week — frameworks, styling, components, and icons.
More tools
Tailwind CSS color palette generator
Open →Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.
CSS clamp() calculator for fluid typography
Open →Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.
Meta tag generator with Google SERP preview
Open →Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.
Favicon generator — .ico, PNG set and manifest
Open →Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.
JSON-LD schema generator and validator
Open →Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.
robots.txt generator with validation
Open →Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.
UTM link builder and campaign URL generator
Open →Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.
Colour contrast checker with WCAG suggestions
Open →Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.
Image converter — WebP, AVIF, JPEG and PNG
Open →Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.
JSON formatter and validator — free, in your browser
Open →Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.
JSON to TypeScript — generate interfaces from a payload
Open →Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.
OG image generator — free 1200×630 social cards
Open →Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.