Why padding is needed in icon design?

Question

My dev team need icons without padding, so I want some bullet points so I can convince them of the importance of padding in icon design.

Answer 1

Your dev team likely needs icon files that don't include padding so that they can add the padding programmatically - that way, it will scale according to resolution and viewport size. This is a good practice.

You can require padding specifications around icons for the following UX reasons:

1. On touch screens, padding increases the size of touch targets, making the icons easier for users to tap.
2. Readability. Icons need clear space so as not to run into other elements, such as text, which can hinder readability.
3. Gestalt. Padding helps users understand which objects in a UI belong together, and that should be respected.

Answer 2

Although I am not a developer or a designer, I can inform you from a UX researcher perspective.

In my career, there were instances when users found it difficult to click on the icons during usability studies which did not have padding. Padding was included based on the feedback obtained during these studies. Since then, I ensure I inform the designers to include padding all the time. Of course, it is rare that padding will be missed out during the prototype design, but still there are chances such as I encountered.

Padding is essential as it gives space around the icon which aids in easy readability and also provides the necessary space around the icons for easy clickability. It also has an aesthetic feel to it. I highly recommend including padding in all the designs.

If the developers have an industry standard practice of including it programmatically as explained by @izquierdo in the above post, then double check this is the case. Else you have put forth your recommendation and insights based on your observation and experience.

Answer 3

As both a developer and UX designer, I would say it's probably best to leave it up to the developers to add padding to the icon. You should absolutely hand it off with a recommendation for how much padding should be added, but as a developer it's easier to add padding programmatically to the outside container of an SVG than to have it in the SVG itself.

This is for several reasons, it's then easier to accurately size the icon within its context – the icon will behave more predictably as it will fill all of its available container, and also it's easier to make the padding adapt to changes made by the user-agent on behalf of the user because of accessibility, which should be respected.

TL;DR – Tell the developers how much padding is required, and then let them add it programmatically, it shouldn't be a part of the icon itself.