SVGPulseUnderstanding viewBox, empty space, and cropped SVG icons
If an icon exports successfully but appears clipped, off-center, or unexpectedly small, the problem may be its coordinate system rather than the website's layout. The SVG viewport and the geometry inside it describe different things. Check both before compensating with negative margins.
Read the four values
A viewBox contains four numbers representing the coordinate rectangle used for the drawing. In a common example, 0 0 24 24 describes a rectangle beginning at the origin and extending 24 units in each direction. Display width and height decide how large that rectangle appears on the page. Changing display width does not rewrite the path geometry. Keeping the coordinate rectangle helps the browser scale the drawing consistently.
Look for artwork outside the canvas
A path can extend beyond the intended rectangle. Its stroke also extends around the path's centerline, so a line drawn directly on the edge may be clipped. Shadows and other effects may need additional space as well. Open the exported file independently and compare it with the editor preview. If the problem exists before the file reaches the website, adjust the source geometry or bounds rather than adding a site-specific layout workaround.
Distinguish padding from clipping
An icon that appears too small may have substantial unused space inside its coordinate rectangle. Increasing the CSS width makes both the drawing and that empty space larger. If the artwork is being reused as part of a consistent family, keep comparable internal margins. If it is a one-off import with excessive whitespace, crop its bounds deliberately in a trusted vector editor and recheck the stroke edges.
Watch aspect ratio
A wide arrow and a square badge should not automatically be forced into the same shape. Set a predictable outer box in the component and decide how the artwork should fit inside it. Avoid stretching width and height independently unless distortion is intentional. A circle becoming an oval is often a layout symptom. Review the CSS applied to the image or SVG and inspect whether a parent container is imposing conflicting dimensions.
Use a controlled troubleshooting order
First open the raw asset. Next place it in a plain page with only width and height defined. Then add the real component's styles one group at a time. This isolates whether the problem belongs to the file, the SVG embedding, or the component layout. Keep a known-good simple icon alongside the problematic one for comparison. Record any intentional non-square canvas so future developers do not accidentally normalize it into a square.
Implementation example
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M5 12h14m-6-6 6 6-6 6"/>
</svg>Use a coordinate example
For an SVG with viewBox set to 0 0 24 24, the internal drawing region starts at zero on both axes and spans 24 units in each direction. A line placed exactly at the left boundary with a visible stroke can extend beyond that boundary because the stroke has width. Increasing the rendered CSS width from 24 to 48 pixels scales the existing drawing region; it does not create more internal room around the line. This distinction explains why a larger export can still show the same clipped edge. To investigate, compare the path's position and stroke thickness with the declared canvas. Decide whether the artwork needs more inset or the canvas needs adjustment. Preserve the intended visual proportions and review all sides, because fixing one edge by shifting the drawing may create excessive padding or clipping elsewhere.
Separate an asset issue from a container issue
Open the SVG on its own and compare it with the version inside the page. If the independent asset looks correct but the embedded version is cut off, inspect the parent container's dimensions and overflow behavior. A fixed-height wrapper, an unexpected aspect ratio, or a clipping rule may be responsible. If both versions lose the same edge, inspect the SVG geometry, masks, clip paths, and filter regions. A shadow may extend beyond the original path even when the path itself fits comfortably inside the viewBox. Do not remove every clipping attribute without understanding why it exists; some illustrations rely on deliberate clipping. Save an untouched copy, isolate the suspected feature, and compare the result. This approach helps you identify whether the problem is in the artwork, the export settings, or the surrounding layout before making a permanent change.
Keep icon alignment consistent after a repair
A cropping repair can change how an icon aligns with the rest of a set. Expanding a canvas adds room but can make the visible symbol look smaller at the same CSS dimensions. Compare the corrected icon beside a few reference symbols at their actual display size. Look at visual center, baseline relationship, and apparent weight, not just the numeric width and height. If the asset will be used in a button, test it beside text; if it belongs in a square badge, test it inside that badge. Keep a note of the reason for the repair and retain the original source if licensing and project policy allow. Avoid repeated tiny adjustments without a reference context. A technically unclipped SVG is only the first goal; the final asset should also sit naturally in the interface and remain predictable when another person exports it at a different size.
Continue reading: Exporting sharp transparent PNG icons
Try it with an icon
Browse a collection, customize an icon in the studio, and review the result in your actual project.
Browse icon collections →