Unaligned position of "i" in "information-circle" mini 20x20 icon

tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.

https://heroicons.com

MIT License

21.04k stars 1.26k forks source link

Unaligned position of "i" in "information-circle" mini 20x20 icon #828

Closed akodkod closed 1 year ago

akodkod commented 1 year ago

Hi,

I just noticed that "i" isn't centred correctly in the "information-circle" mini 20x20 icon.

Here are some screenshots:

As you can see, the width of the blue square is 6px, while the width of the yellow square is 7px. I think we get this problem because of an uneven number of pixels, but could it be fixed somehow? Because IMHO, it looks a bit bad in UI:

Have a good day, Andrew

adamwathan commented 1 year ago

Yeah good catch agree this probably should be tweaked. I'll let Steve do the real one but I whipped together a tweaked version here if you want to try it:

https://play.tailwindcss.com/pffD6hY4JM

RobinMalfait commented 1 year ago

Hey! Thank you for your bug report! Much appreciated! 🙏

@sschoger fixed this for us, and it is available in the latest release!

You can try it using:

npm install heroicons@latest.
npm install @heroicons/react@latest.
npm install @heroicons/vue@latest.