Heroicons
316 hand-crafted SVG icons from the Tailwind CSS team, in four size variants
Worth exploring
Four variants of the same icon (outline, solid, mini and micro), one for each size of use
- Why it works
- Four variants of the same icon, one per size, keep the stroke readable from 24 down to 16, so a small icon does not blur.
- Watch out
- Do not stretch one variant to fit every size. Use mini or micro at small sizes and keep one variant per context.
What it is
A set in Outline (24x24, 1.5px stroke), Solid, Mini and Micro, with React and Vue libraries, copyable SVG and a Figma file. The license is MIT.
What it’s for
For someone building an interface with Tailwind who wants ready icons for buttons and fields, from size 24 down to 16.
Benefits
- Four variants: outline, solid, mini and micro
- React and Vue packages and copyable SVG
- A Figma file available
Caveats
- The set is small, at 316 icons, and the docs live on GitHub.
