SVG Size

[agentphoenix]

I've been playing around with Heroicons UI and Tailwind today, but I'm running into a weird issue with the SVG size. When I insert the SVG inline and assign some Tailwind classes, the icon's path is half the size of its parent svg element. I can bump up the sizing on the svg element, but that leads to some really strange line height and padding issues.

When I put a Zondicons icon in with the same Tailwind classes, both the svg and path elements have the same size like I would expect.

https://jsfiddle.net/9zgf0yLf/1/

Am I doing something wrong or is there some distinct difference between Heroicons UI and Zondicons that I'm not seeing. Thanks for any help!

[jiblett1000]

You are not alone

[ctsstc]

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

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.

[ctsstc]

Opened: https://github.com/tailwindlabs/heroicons/issues/664