Discussion on "Why SVG Icons Render at the Wrong Size: viewBox, width/height, and CSS"

Roman Riaboshtan · 2026-08-10T22:47:02.879Z

You export a 24×24 icon from Figma. In the browser it renders tiny or huge, or it looks sharp as SVG but turns soft after PNG export. The file is usually not broken. It carries three different sizes a

The {...props} order bug is the one I've seen bite teams the most, especially once a design system wraps every icon in its own component and nobody remembers to check spread order six months later. I'd add one more trap to your edge case list: a global .icon { width: 24px !important } left over from an old reset will beat both the size prop and correct spread order, and it looks exactly like a broken component so people go debugging JSX for an hour before checking the stylesheet. Worth grepping for !important on icon classes before blaming the component.

Thanks for reading and for the great tip! I’ll definitely look into adding this edge case to the article. Also, really appreciate you sharing that real-world issue from your project — awesome feedback!

Glad it's useful. That !important trap is easy to miss since the symptom looks exactly like a broken component, not a stylesheet issue, so it's worth calling out explicitly.

Search Hashnode

Why SVG Icons Render at the Wrong Size: viewBox, width/height, and CSS

Responses(3)