Why SVG Icons Shift Bottom 0? Fix Vertical Alignment

Learn why SVG icons often have extra space at the bottom or shift position. Discover CSS fixes including display block, vertical-align, and line-height adjustments.

Have you ever placed an SVG icon in your HTML and noticed it doesn't align perfectly? Often there's an annoying few pixels of extra space at the bottom, or the icon sits slightly higher than the text next to it.

This "shift bottom 0" or extra space issue is extremely common and is actually compliant browser behavior. Here is why it happens and how to fix it instantly.

The Cause: Why SVG Icons Shift

By default, SVG elements are treated as inline elements by browsers, similar to text characters or images. Inline elements are aligned to the baseline of the text, not the bottom of the container.

Solution 1: Change Vertical Alignment

If you want to keep the icon inline with text, the easiest fix is to change the vertical alignment property. This moves the element off the baseline.

svg {
  vertical-align: middle; /* or top, or bottom */
}

Solution 2: Display Block

If the icon is the only thing in its container (like a button or a div) or you have full control over layout (like Flexbox), making it a block element removes line-height calculations entirely.

svg {
  display: block;
}

Solution 3: Flexbox

Modern layouts usually rely on Flexbox. Setting the container to display: flex allows much better control over alignment and usually eliminates whitespace issues automatically.

.icon-container {
  display: flex;
  align-items: center; /* Centers vertically */
}

Need Perfect Icons for Your Project?

If you are working with SVGs, you might need to use them as favicons or desktop icons. Converting raw SVG files to the correct format (like ICO) ensures compatibility across all operating systems.