SVG icons work beautifully in React when the source is prepared correctly. The trouble usually starts with raw exports from Figma, Illustrator, Sketch, or icon marketplaces. Those exports often include editor metadata, hard-coded colors, inconsistent dimensions, and HTML-style attributes that React does not accept.
Start with a clean SVG source
Before converting to JSX, open the SVG and check the basics. A good icon has a clear viewBox, predictable width and height, and no unnecessary metadata. Remove comments, editor namespaces, hidden layers, and unused groups. If the icon uses many repeated inline styles, consider simplifying them before turning the asset into a component.
Fix attributes for JSX
React uses JavaScript property names for SVG attributes. That means class becomes className, stroke-width becomes strokeWidth, fill-rule becomes fillRule, and clip-path becomes clipPath. These small differences are easy to miss by hand, especially across large icon sets. A converter should handle them consistently so the generated component works immediately.
Make size and color configurable
For reusable icon components, avoid locking every icon to one exact color and size unless the brand requires it. A common pattern is to keep the viewBox fixed and let props control width, height, className, fill, stroke, or style. This makes the icon usable in buttons, menus, empty states, dashboards, and documentation without duplicating files.
Accessibility depends on meaning
Not every icon needs a label. Decorative icons should be hidden from assistive technology with aria-hidden=”true” when the nearby text already explains the action. Informational icons should include an accessible name through title, aria-label, or surrounding text. Interactive icons need the button or link itself to carry the label, not only the SVG.
Recommended component pattern
For many teams, the simplest React icon component accepts standard SVG props and spreads them onto the root SVG. In TypeScript, use SVGProps<SVGSVGElement>. In plain React, keep the component small and predictable. Do not mix unrelated behavior into icon components. Animation, tooltips, and click handling usually belong in the parent UI component.
Final checklist
- Clean the source SVG before conversion.
- Confirm the viewBox is present and correct.
- Convert attributes to JSX-safe names.
- Use props for size and styling.
- Choose decorative or meaningful accessibility behavior.
- Run the final output through your formatter before committing.
SVGtoCode’s SVG to JSX and SVG to TSX tools are built for this exact handoff: take the raw vector markup, normalize it for React, and produce code that is easier to review and maintain.
React SVG icon checklist for real projects
A reliable React SVG icon starts with clean vector markup and a stable viewBox. Convert with SVG to JSX or SVG to TSX, then test the output inside the real button, menu, or layout where it will be used. The React documentation for common DOM props is helpful when checking prop names, event handlers, and aria attributes.
Long-term maintenance tips for SVG icon libraries
Keep icons predictable across the whole library. Use one sizing convention, one naming convention, and one approach for color inheritance. If a file needs masks, gradients, or clip paths, check for duplicate IDs before using it multiple times on the same page. The SVG Viewer and SVG Prettifier are useful before code review because they make visual and markup problems easier to spot.
Related SVG workflow guides
For icons that crop or scale oddly, use the SVG viewBox troubleshooting guide. For production cleanup, follow the SVG optimization checklist. If an icon carries meaning, also review the accessible inline SVG guide.