Best Practices for SVG Icons in React
SVG icons are the modern standard for responsive, scalable UI elements. Learn how to convert, optimize, and integrate them into your React applications for optimal performance.
1. Why SVG Over Icon Fonts?
Icon fonts were the standard a decade ago, but SVG has clear advantages: smaller file sizes, better accessibility, easier to style with CSS, and no FOUT issues. Modern React projects should use SVG exclusively.
File Size Comparison
- Icon Font: 50–100 KB (loads entire font for few icons)
- Individual SVG: 1–5 KB per icon
- Optimized SVG as JSX: 0.5–2 KB (inline, no HTTP requests)
2. Optimization Techniques
Remove Unnecessary Attributes
Design tools export SVG with presentation attributes you don't need. This converter removes them automatically and standardizes fill to currentColor.
Before:
<svg width="24" height="24" viewBox="0 0 24 24" fill="#333" xmlns="...">
After:
<svg viewBox="0 0 24 24" fill="currentColor">
3. Accessibility
- Decorative: Add aria-hidden="true" when used alongside text.
- Semantic: Add aria-label when the icon is the only content of a button.
4. Common Pitfalls
- Forgetting viewBox: Always include viewBox — mandatory for scaling.
- Hardcoded colors: Avoid fill="#FFF". Use currentColor or pass as props.
- No TypeScript types: Type-safe icon props prevent misuse across a team.