Back to Archive
DESIGN2026.04.17

Using SVGs as Components

Author

Omnath Dubey

Research Visual
LAB: VERIFIED

Why `img src` isn't enough. Styling and animating SVGs by inlining them in React.

If you use `<img src="icon.svg" />`, you can't change its color with CSS on hover. ### Inline SVG `<svg fill="currentColor" ... />` Now the icon inherits the text color. `className="text-red-500 hover:text-blue-500"` This allows for dynamic theming (Dark Mode) without loading multiple icon files.
#SVG#React#CSS#WebDesign
Share Protocol

Related Posts

View All