SVG to JSX
FreeConvert SVG markup into a clean React component (JSX or TSX) with props, currentColor, forwardRef and camelCased attributes.
SVG
TSX
import { type SVGProps } from "react";
const RocketIcon = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon icon-rocket" {...props}>
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" style={{ fillOpacity: 0.2, mixBlendMode: "multiply" }} />
<circle cx="15" cy="9" r="1.5" fill="currentColor" />
</svg>
);
export default RocketIcon;
Processed locally in your browser — nothing leaves your device.