Some icons have implied padding making them hard to use

[rafgraph]

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?

[rafgraph]

Hi @colmtuite, thanks for the detailed explanation. I guess I agree with your reasoning but disagree with how it's implemented.

I think everything you mentioned can be implemented if the icons fill the viewbox, but not the other way around. Adding "balance" (which is very necessary) at the svg level makes them less primitive (the user can't adjust the "balance"). I think this could be better done at the component level, and the balanced version could even be the default. For example, the visual effects you mentioned work best if the icons fill the viewbox, but what if I wanted to apply those effects to the Zoom icon which is 11x11?

In terms of using the icons as-is, my above example is not hypothetical. The GitHub and Sun Icons appear next to each other in my site's nav. The GitHub icon links to the repo, and the Sun toggles dark mode. To me it looks better when the are the same size, especially when tabbing the page and the focus styles are applied. Although my design sense could be off on this as I'm an amateur designer (most of my design sense comes from photography).

I think the right approach kind of depends on the intention for the icons. If they are meant as a company's internal icons then I think the current approach makes sense, the company's designers own the "balance" and can adjust it as necessary based on internal requirements. However, if they're meant to be used by an number of different designers on unrelated projects, then not being able to control the "balance" can make them difficult to work with (having some icons larger to work with effects doesn't apply to a design system that doesn't use effects, etc).

Anyways, feel free to close this issue. I'm a fan of what you're doing with Stitches, Radix, and Modulz. I think it's a much needed approach. In the past I've pushed for design and engineering to co-create and co-own ui component apis, with varying degrees of success.

[rafgraph]

I switched the icons on my photo website to use the Radix icons because the design of the icons is on point 👍👍

But I had the same issue with the predefined balance not fitting my use case.

For example, here are comparison screenshots of the icons in the footer on one of the pages.

Using the predefined balance:

With transform: scale(1.2) for the arrows and transform: scale(1.1) for the info icon:

[colmtuite]

I forgot to mention to you before, it looks like you're not putting the icons inside a button? You should not be putting an outline on the icon itself, but the outline should go on a that wraps the icon.

Then you give the

a fixed width and height.

[rafgraph]

I'm always using the icons inside of a <button> or <a>, with the focus styles (outline or box shadow) applied to the <button> or <a> element (svgs aren't focusable).

The wrapper <button> or <a> takes the size of it's svg child, which is set using the icon's width and height props, but the issue is that the path/visual icon doesn't consistently fill the svg viewbox (each icon has its own implied padding/predefined balance).

For example, in a 15x15 svg, the arrows are 11x9 and the dashboard is 13x13, so to make the arrows and dashboard icons look roughly the same size inside the same size <button> a 1.2 scale transform needs to be applied. The info icon is also 13x13, but because of the way we perceive the size of circles vs squares, it actually needs to be a bit bigger than the dashboard icon to look like it's the same size, hence the 1.1 scale transform.

If you're curious to look into it with dev tools or on codesandbox, the initial example of the sun and github icons can be found here: website and codesandbox (the focus outline is applied using box-shadow), and the most recent example is live at https://rafael.photo.

[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.