SVG to JSX

Convert raw SVG markup into a React component (JSX).

Component Name

SVG Input

JSX Component

export function MyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v8"/></svg>
  );
}

Share this tool