search

tailwindlabs / heroicons

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

Target 20x20 size needs h-6 w-6 pt-px pl-px #202

Closed RalphCorderoy closed 3 years ago

RalphCorderoy commented 3 years ago

The small solid-fill icons are designed to be rendered at 20x20 but most Tailwind CSS I've seen for them uses h-6 w-6 which gives a 21x21 box. I've ended up adding pt-px pl-px to add a pixel of padding top and left leaving 20x20 for the content, which produces crisper pixels, but this seems tedious. Are they just slightly off for use by Tailwind CSS's default sizes, or should the icons be aiming at a 21x21 rendering?

adamwathan commented 3 years ago

Using h-6 w-6 gives you a 24x24 box, not 21 (at least with Tailwind's default configuration). For solid icons you want to use h-5 w-5. The artboard for the icons is 20x20, and the icons themselves are slightly smaller within that artboard.

adamwathan commented 3 years ago

Doing some house cleaning so going to close but hope that info is helpful!