An icon looks tiny inside a large button, even though its SVG element occupies the expected space. Increasing the button’s width may only create a larger version of the same problem. The drawing and its internal coordinate rectangle deserve a look.
The viewBox establishes a rectangle in the SVG’s own coordinate system. Its four values describe the minimum x and y coordinates, followed by width and height. Those coordinates are mapped into the displayed viewport; they are not simply the final CSS dimensions. MDN’s viewBox reference explains that relationship and the role of aspect-ratio handling.
Compare the rectangle with the artwork
Consider an illustrative icon whose viewBox is 0 0 100 100, but whose visible paths occupy only a small area around the centre. Displaying the SVG at 40 pixels wide also scales the unused space. The paths can therefore look much smaller than a neighbouring icon that fills its coordinate rectangle.
Inspect the source in a vector editor or browser developer tools. Check path bounds, strokes and any intentional padding. Do not crop tightly until you understand whether a shadow, focus treatment or animation needs space beyond the central shape.
Choose which dimension you intend to change
If the whole icon should be larger in the interface, change its displayed size. If an export contains accidental whitespace, correct the export or internal bounds. Editing path coordinates merely to compensate for a CSS layout problem makes later reuse harder.
Test a small and a large instance beside the surrounding text. Include the actual stroke thickness and alignment used in the product. A design can be mathematically centred yet look visually off balance because its shape carries more weight on one side.
Keep a copy of the original asset during the adjustment. Compare the result in the real button, navigation item or status message rather than judging only a large isolated preview. The goal is a predictable relationship between the drawing’s coordinates and the space the interface gives it.