Why does the memo option export a different name?

With Wrap in memo, the inner function keeps your name and the exported constant gets an Icon suffix, so a component called Star is exported as StarIcon. Choose a name without Icon to avoid ending up with StarIconIcon.

What does Use currentColor replace?

Literal fill and stroke colors become currentColor, so the icon takes the CSS color of its parent. Values of none, currentColor and url() references such as gradients are left untouched.

Does it optimize or minify the SVG?

No. Paths are copied exactly as written. If the file carries editor metadata, run it through a dedicated optimizer first, because this tool only converts syntax.

What if the input holds several svg elements, or none?

Extraction runs from the first opening svg tag to the last closing one. Without an svg element you get a message saying none was found, and a missing closing tag gives an unclosed-element error.

What does Spread props actually do?

It adds a spread of the incoming props to the root svg, so callers can pass className, width, onClick or aria attributes. In TypeScript mode the props are typed to accept any SVG attribute.

Developer toolsInstantPrivateNo account

SVG to JSX Converter

Wraps an SVG in a named React component so it can be imported like any other icon.

Back to category

About SVG to JSX

Wraps an SVG in a named React component so it can be imported like any other icon. You choose the component name and toggle TypeScript typing, prop spreading, dimension stripping, currentColor, memo and a default export, and the code updates as you type. The SVG is transformed as text and is never inserted into the page.

How to use it

Paste your SVG into the SVG markup box. Files exported from a design tool with an XML prolog or doctype are fine, because only the svg element is extracted.
Type a Component name such as CheckBadge. It is converted to a valid PascalCase identifier, and a leading digit gets an Svg prefix.
Switch on the Output options you want: TypeScript, Spread props, Remove width & height, Use currentColor, Wrap in memo and Add default export.
Check the result under React component.
Copy the code, or Download it as the component name with a .tsx extension, or .jsx when TypeScript is off.

A recolorable minus icon

Input

Component name: minus-icon
Root attributes: width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-width="2"
Toggles on: Remove width & height, Use currentColor

Output

An exported function named MinusIcon whose root svg carries viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" and the spread props. Inner attributes such as stroke-linecap become strokeLinecap.

When to use it

Building an icon set for a design system out of SVG files exported by a designer.
Making a logo recolorable with CSS by turning on currentColor so it inherits the surrounding text color.
Replacing an image tag that points at a small SVG with an inline component to save a network request.
Generating memoized icon components for a long list where re-render cost matters.

Good to know. Remove width & height only affects the root svg, so inner shapes keep their own sizes. Attribute conversion follows the same rules as the HTML to JSX tool, which means inline event handler strings stay strings.

Questions about SVG to JSX

Why does the memo option export a different name?: With Wrap in memo, the inner function keeps your name and the exported constant gets an Icon suffix, so a component called Star is exported as StarIcon. Choose a name without Icon to avoid ending up with StarIconIcon.
What does Use currentColor replace?: Literal fill and stroke colors become currentColor, so the icon takes the CSS color of its parent. Values of none, currentColor and url() references such as gradients are left untouched.
Does it optimize or minify the SVG?: No. Paths are copied exactly as written. If the file carries editor metadata, run it through a dedicated optimizer first, because this tool only converts syntax.
What if the input holds several svg elements, or none?: Extraction runs from the first opening svg tag to the last closing one. Without an svg element you get a message saying none was found, and a missing closing tag gives an unclosed-element error.
What does Spread props actually do?: It adds a spread of the incoming props to the root svg, so callers can pass className, width, onClick or aria attributes. In TypeScript mode the props are typed to accept any SVG attribute.

Related tools

Developer toolsInstantPrivateNo account

SVG to JSX Converter

Wraps an SVG in a named React component so it can be imported like any other icon.

Back to category

WorkbenchClient-side · Private

About SVG to JSX

How to use it

Paste your SVG into the SVG markup box. Files exported from a design tool with an XML prolog or doctype are fine, because only the svg element is extracted.
Type a Component name such as CheckBadge. It is converted to a valid PascalCase identifier, and a leading digit gets an Svg prefix.
Switch on the Output options you want: TypeScript, Spread props, Remove width & height, Use currentColor, Wrap in memo and Add default export.
Check the result under React component.
Copy the code, or Download it as the component name with a .tsx extension, or .jsx when TypeScript is off.

A recolorable minus icon

Input

Component name: minus-icon
Root attributes: width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-width="2"
Toggles on: Remove width & height, Use currentColor

Output

An exported function named MinusIcon whose root svg carries viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" and the spread props. Inner attributes such as stroke-linecap become strokeLinecap.

When to use it

Building an icon set for a design system out of SVG files exported by a designer.
Making a logo recolorable with CSS by turning on currentColor so it inherits the surrounding text color.
Replacing an image tag that points at a small SVG with an inline component to save a network request.
Generating memoized icon components for a long list where re-render cost matters.

Questions about SVG to JSX

Why does the memo option export a different name?: With Wrap in memo, the inner function keeps your name and the exported constant gets an Icon suffix, so a component called Star is exported as StarIcon. Choose a name without Icon to avoid ending up with StarIconIcon.
What does Use currentColor replace?: Literal fill and stroke colors become currentColor, so the icon takes the CSS color of its parent. Values of none, currentColor and url() references such as gradients are left untouched.
Does it optimize or minify the SVG?: No. Paths are copied exactly as written. If the file carries editor metadata, run it through a dedicated optimizer first, because this tool only converts syntax.
What if the input holds several svg elements, or none?: Extraction runs from the first opening svg tag to the last closing one. Without an svg element you get a message saying none was found, and a missing closing tag gives an unclosed-element error.
What does Spread props actually do?: It adds a spread of the incoming props to the root svg, so callers can pass className, width, onClick or aria attributes. In TypeScript mode the props are typed to accept any SVG attribute.

Related tools

WorkbenchClient-side · Private

Output options

Shape the generated component to match your codebase.

TypeScript

Type the props as SVGProps<SVGSVGElement>.

Spread props

Forward incoming props onto the root <svg>.

Remove width & height

Let CSS size the icon instead.

Use currentColor

Replace literal fill and stroke colors.

Wrap in memo

Export a React.memo-wrapped component.

Add default export

Export the component as default too.

React component

The SVG is converted to code text only — it is never rendered as markup.

import type { SVGProps } from "react"

export function StarIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111827" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      {/* a simple check badge */}
      <path d="M12 2l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L4.2 7.7l5.4-.8z" />
      <circle cx="12" cy="12" r="3" fill="#111827" />
    </svg>
  )
}

StarIcon.tsx

Output options

Shape the generated component to match your codebase.

TypeScript

Type the props as SVGProps<SVGSVGElement>.

Spread props

Forward incoming props onto the root <svg>.

Remove width & height

Let CSS size the icon instead.

Use currentColor

Replace literal fill and stroke colors.

Wrap in memo

Export a React.memo-wrapped component.

Add default export

Export the component as default too.

React component

The SVG is converted to code text only — it is never rendered as markup.

import type { SVGProps } from "react"

export function StarIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111827" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      {/* a simple check badge */}
      <path d="M12 2l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L4.2 7.7l5.4-.8z" />
      <circle cx="12" cy="12" r="3" fill="#111827" />
    </svg>
  )
}

StarIcon.tsx

Search tools

SVG to JSX Converter

About SVG to JSX

How to use it

A recolorable minus icon

When to use it

Questions about SVG to JSX

Why does the memo option export a different name?

What does Use currentColor replace?

Does it optimize or minify the SVG?

What if the input holds several svg elements, or none?

What does Spread props actually do?

Related tools

SVG to JSX Converter

About SVG to JSX

How to use it

A recolorable minus icon

When to use it

Questions about SVG to JSX

Why does the memo option export a different name?

What does Use currentColor replace?

Does it optimize or minify the SVG?

What if the input holds several svg elements, or none?

What does Spread props actually do?

Related tools