Build an SVG Icon Library for React
Create a custom React icon library by converting your SVG icons to components with consistent props, forwardRef support, and TypeScript types. This tool generates production-ready code for each icon.
SVG to JSX / React Component Converter
Paste an SVG and get JSX markup or a complete React component. Converts attributes to camelCase, handles style objects, removes XML cruft, and wraps in a component with props/ref support.
JSX output will appear hereAbout SVG to JSX Converter
- Attribute conversion — converts 80+ SVG attributes from kebab-case to camelCase (stroke-width → strokeWidth, fill-opacity → fillOpacity).
- Style objects — transforms inline style strings to JSX-compatible style objects.
- Component wrapping — generates a complete React component with customizable name, props spread, forwardRef, and memo.
- TypeScript support — outputs typed components with SVGProps interface and optional custom props.
- Cleanup — removes XML declarations, comments, DOCTYPE, and namespace cruft automatically.
- Everything runs in your browser — no data is sent over the network.
Why build a custom icon library?
Custom icon libraries give you full control over icon design consistency, bundle size, and API surface. Unlike using icon font packages (which load all icons regardless of usage) or third-party React icon libraries (which may include thousands of unused icons), a custom library contains exactly the icons you need. Combined with tree-shaking, each page only bundles the icons it imports.
Best practices for React icon components
Use forwardRef so parent components can access the SVG DOM element. Add memo to prevent unnecessary re-renders. Accept SVGProps via props spread so consumers can set className, onClick, aria-label, and other standard attributes. Remove fixed width/height and use currentColor for fill and stroke so icons inherit size and color from their parent. Include a displayName for better DevTools debugging.
Frequently Asked Questions
Should I use forwardRef for all icon components?
It is a best practice to use forwardRef for icon components. It allows parent components to programmatically focus, measure, or animate the SVG element. Libraries like Radix UI and Headless UI expect forwardRef support from icon components.
How do I make icons responsive to parent size?
Remove fixed width and height attributes (check 'Remove width/height' in this tool) and set viewBox on the SVG. Then control size via CSS or className on the component. The icon will scale to fill its container.
Related Convert Tools
OpenAPI to TypeScript
Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types
JSON to Zod Converter
Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields
GraphQL to TypeScript
Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations
TypeScript to JavaScript
Convert TypeScript to JavaScript — strip types, interfaces, enums, generics, and access modifiers to get clean JS output