Some icons have implied padding making them hard to use

Hi, thanks for creating these icons I’ve found them very useful!

However, a lot of them have implied padding making them difficult to work with. By implied padding I mean that the icon does not go to the edge of the svg. As a user my expectation is that the long dimension of the icon goes to the edge of the svg. For example, using a standard 15x15 svg, the size of the GitHub icon is 13.3x12.97, and the size of the Zoom in/out icons are 11x11.

As a user it is easy for me to add padding/margin outside the svg if I need it. And it is also easy to shrink the svg, for example if the Zoom icons were 15x15, but I needed an 11x11 I could just set width="11" height="11". But what is not easy is removing the implied padding if I need the icon to go to the edge of the svg, the only way I found to do this is to use transform: scale(...).

For example, here’s the GitHub icon next the Sun icon (which doesn’t have implied padding):

Here’s the pair with focus styles applied:

Fixed - here’s the pair with transform: scale(1.1333333) applied to the GitHub icon:

Fixed - with focus styles applied:

[colmtuite]

Hey,

The different sizes are intentional. If all icons were the same size, there would be no balance between them.

Different shapes have different perceived sizes. For example, an 11px x 11px square might be perceived as the same size as a 13px x 13px circle.

In other cases, like the GH and Sun icons you showed above, the sun’s larger size is necessary, to create visual effects like the sun’s rays stretching. Similar effects this might work well with would include sparkles, speed/zoom effects, wind blowing etc. For icons that need to communicate movement or activity, they often demand the extra size. For static icons, they can be more contained.

So if we stretched each icon to reach its 15px viewbox edge, the icons would look very imbalanced.

I can assure you that all of the icons are designed meticulously, with no unintentional mistakes. The icons are intended to be used as-is, without any edits.

Does this help?

[vladmoroz]

Closing this as it’s been designed like that very deliberately. However, I did tweak the GitHub icon in the latest version a bit because its white space made it look slightly smaller than other circled icons of the same diameter.