Why should I include padding/margin around icons when I create them?

Question

I recently spoke with an engineer who requested that I edit all our existing icons (we have about 50 of them) to remove the extra margin I was putting around them so it would be easier for her to style the page. I was using the padding/margin for a bit of consistency as I designed the icons but I am wondering if there is any downside to providing engineers icons with no margin (basically the artboard comes right up to all four edges of each icon).

Thanks!

Answer 1

Maintaining a padding within the original file is a good way to make sure every shape gets it’s appropriate margin. Especially when the icon is not symmetrical, simple centering can lead to unbalanced results.

When looking at type, the same applies to kerning. While straight lines need more space between them, curvy shapes can remain closer together.

Answer 2

You're asking whether there's a downside to doing what the engineer asked?

I sure don't see one. If they make a request to make their job easier and faster, why would you not do that?

Maybe you could include a very tiny padding, like one pixel. Or else do as she asks, and if any icons look bad, call it out at that point.

When a co-worker asks something of me, I try to do it unless there's a strong reason not to. Then when I need something from them, they're more willing to help me out.

Answer 3

She could be needing the margin removed so she can fit the icons into a specific spot on her page, from there the engineer will be styling the page via CSS.

Edit: presuming the phrase "style the page" means a webpage

Answer 4

Three years after this post was made my design team shipped me icons with padding included, it's a mess to align in css. If I want the icon to fill the button it's in (no padding)

• if the icon has no padding
  • I set the font-size and line-height to the size of the button -> done
• if the icon includes a padding
  • I get up my seat and go smack the designer right on the top of head, come back to my seat and set the font-size and line-height bigger than the size of the button as to account for the added padding, then I "position relative" the container and "position absolute" the icon, add a "top -x px" and "left -x px" to position the icon slightly upwards and leftwards as to center it, then I get another coffee, sit back, contemplate my life choices, commit the crap I just made, write up an apology to the dev that is going to review the crap I just made, swear a little and go home

Just kidding, I asked the design team to reship the kit without padding

Note: if the icon is not square then padding should absolutely be added to make is square, it will be a lot easier to position. However, my gripe concerns uniform added padding on every side of the icon. To me there is no legitimate reason to do that, if I want my icons to be padded it is extremely easy to do in css, removing an unwanted hardcoded padding however is complicated and messy

Answer 5

I’ve ran into this. I use padding because creating the symbols in the software there needs to be symmetry and a library with organization. Also, when using components you can replace one icon symbol at the same size with another which is required during design phase.

Most of the time dev has used what was sent and used the icon square. Placing padding outside. If all icons are in a square of 24px and use outside padding of 4px between them. That shouldn’t be an issue.