You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
ctsstc
changed the title
Sizing is weird and padded?
Icon sizing has padding?
Apr 6, 2022
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.
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 👍🏻
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
to2 2 16 16
on something likex-circle
then it respects the sizing.The text was updated successfully, but these errors were encountered: