Hand-Crafted SVG Icon Library

Hand-Crafted SVG Icon Library

heroicons.com

3

About this website

Heroicons is a collection of 316 hand-crafted SVG icons designed by Steve Schoger and maintained by the Tailwind CSS team. The library is released under the MIT license with no attribution requirements, making it suitable for commercial and open source projects alike. Icons are organized into four distinct style variants: Outline at 24 by 24 pixels with a 1.5 pixel stroke designed for clean line-based interfaces, Solid at 24 by 24 pixels with filled shapes for emphasis and compact layouts, Mini at 20 by 20 pixels for dense data tables and navigation bars, and Micro at 16 by 16 pixels for inline text indicators and badges. Each variant maintains a consistent visual language with uniform stroke widths, corner radii, and geometric proportions across the entire set. The icon browser on the website provides real-time search across all 316 icons by name, with instant visual previews in each style variant. Clicking any icon copies the raw SVG markup to the clipboard for immediate use in HTML, or developers can use the official React and Vue component packages that export each icon as a typed component accepting standard props for class names, sizes, and accessibility attributes. A Figma community file containing all icons in editable vector format is available for designers who need to customize stroke weights, colors, or shapes before exporting. The icon naming convention follows a descriptive pattern using kebab-case identifiers like academic-cap, arrow-down-tray, chat-bubble-left, and magnifying-glass-plus, making icons discoverable through intuitive keyword searches. The collection covers common interface needs including navigation arrows, file operations, communication, commerce, user management, media controls, and system status indicators.

Tags & Categories

Statistics

3
Views
0
Clicks
0
Like
0
Dislike

Comments

Log In to post a comment

No comments yet. Be the first!