The SVG viewBox, explained
If your SVG won't scale, is cropped, or renders tiny, the viewBox is almost always why. It defines the icon's internal coordinate system — and it's simpler than it looks.
Four numbers
viewBox="min-x min-y width height" declares the coordinate window the SVG draws into. viewBox="0 0 24 24" means “the artwork lives on a 24×24 grid starting at the top-left.” The browser then scales that grid to whatever display size you set with CSS or width/height.
Why it enables scaling
Because coordinates are relative to the viewBox, the same paths render crisply at 16px or 512px. Remove the viewBox and the SVG loses its intrinsic scaling — a common cause of “my icon won't resize.”
viewBox vs width/height
width/height set the default rendered size; viewBox sets the internal grid. Keep the viewBox and control size with CSS for fully responsive icons.
Frequently asked questions
What does viewBox 0 0 24 24 mean?
The icon is drawn on a 24×24 coordinate grid; the browser scales that grid to the rendered size.
Why is my SVG not scaling?
Usually a missing viewBox, or fixed width/height with no viewBox. Add a viewBox and control size via CSS.