How to remove padding from font library svg files

Question

I am using Flaticon font library, which is really useful, since you can include svg images via the i tag and change their color and size via css. Flaticon Font Documentation: https://www.flaticon.com/iconfonts

For some reason their svg icons are bigger than needed and have invisible space between them.

If I want to have a perfect design, I have to use margin with negative values, which is pretty annoying.

Is there something that I can do inline in order to make the size of the i element the same as the icon vector without the invisible space?

Update: It seems like the spacing is intentional: https://gyazo.com/90f1b8f986bea7a00e8efeea52c24cdd

Answer 1

SVG icons normally have some whitespace around them. On of the reasons is because sometimes icons have to have different physical sizes in order to look optically similar in size.

Consider this square and a circle.

<svg viewBox="0 0 200 100" width="400">
  <rect x="20" y="20" width="60" height="60" fill="grey"/>
  <circle cx="150" cy="50" r="30" fill="grey"/>
</svg>

Note how they are the same phical size, but the circle does not have the same "physical presence" as the square.

But if we make the circle a little bigger, they now look better. They appear to match in size despite being physically different sizes.

<svg viewBox="0 0 200 100" width="400">
  <rect x="20" y="20" width="60" height="60" fill="grey"/>
  <circle cx="150" cy="50" r="35" fill="grey"/>
</svg>

How to adjust the padding

Most SVG icons have a viewBox attribute that tells the renderer what the important area of the SVG is. The renderer needs to know which area of the SVG canvas to scale up or down when you make an SVG bigger or smaller.

I don't know for sure that the Flaticon ones have a viewBox. But I'm going to assume that they do.

You can alter the padding in your icons by adjusting the viewBox dimensions. Contracting the viewBox in towards the icon shape will reduce the padding. But consequently it will make the icon appear bigger if you don't also reduce the display size of the SVG (ie the width and height of the SVG - or it's container).

Unfortunately you cannot alter the viewBox attribute via CSS. So you will have to edit the actual SVG file.

You can read more about the viewBox attribute in the SVG Specification. If that's hard to follow, you will be able to find other good viewBox tutorials. Here is a good one by Sara Soueidan.

Note: The reason I included the first section of this answer was to explain why the padding was there, and why it is useful. If you do alter your icons by reducing the viewBox, my recommendation would be to try and make the same change on all icons. Otherwise they may end up looking like they are all different sizes.