search

tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.45k stars 1.28k forks source link

Icon sizing has padding? #664

Closed ctsstc closed 2 years ago

ctsstc commented 2 years ago

It drives me crazy that if I'm using tailwind to size the heroicon I'll end up wanting something that's 16x16 (w-4) so I have to make the outer container 20x20 (w-5) so that I end up with a 16x16 icon. This also can get weird with layouts when you don't want padding. Padding should be a choice not built-in.

It seems that if I manually set the viewBox to 2 2 16 16 on something like x-circle then it respects the sizing.

adamwathan commented 2 years ago

Hey! There's no intent to really bake in "padding" per se, it's just that every icon needs to be drawn on the same canvas size for the set to work together, and for the icons to look balanced when used together, some of them need more whitespace than others.

image

You can see the lightning bolt uses all of the available vertical space (except for 1px), and the speaker uses all of the horizontal space. The vertical and horizontal menu icons of course have lots of space on horizontal axis and vertical axis respectively.

The only way to remove all whitespace for each icon would be to make the artboards different shapes and sizes for each icon, and then you couldn't size them as easily.

No plans to change this — we designed these icons for ourselves and the way they are built has worked perfectly for our own projects. We released them as a gift, which is why this is an MIT licensed open source project. If you need icons that are implemented differently, perhaps these are at least a helpful starting point, but even if they aren't of course you are free to make your own icons for yourself just we made these icons for ourselves 👍🏻