Icon Library

A comprehensive collection of carefully crafted icons built with Heroicons. Each icon is designed to be pixel-perfect, scalable, and accessible. Heroicons are created by the makers of Tailwind CSS.

Icon Sizes

Available icon sizes for different use cases

Small

16px (h-4 w-4)

Medium

20px (h-5 w-5)

Large

24px (h-6 w-6)

Extra Large

32px (h-8 w-8)

Navigation

10 icons

HomeIcon

UserIcon

Cog6ToothIcon

MagnifyingGlassIcon

ArrowRightIcon

ArrowLeftIcon

ChevronRightIcon

ChevronLeftIcon

ArrowUpIcon

ArrowDownIcon

Actions

10 icons

PlusIcon

MinusIcon

PencilIcon

TrashIcon

CheckIcon

XMarkIcon

ArrowDownTrayIcon

ArrowUpTrayIcon

ArrowPathIcon

BookmarkIcon

Communication

8 icons

BellIcon

EnvelopeIcon

PhoneIcon

ShareIcon

LinkIcon

ClipboardDocumentIcon

HeartIcon

StarIcon

Media & Files

6 icons

CameraIcon

PhotoIcon

VideoCameraIcon

DocumentIcon

FolderIcon

PrinterIcon

Time & Location

4 icons

CalendarIcon

ClockIcon

MapPinIcon

GlobeAltIcon

Commerce

4 icons

ShoppingCartIcon

CreditCardIcon

ChartBarIcon

PresentationChartBarIcon

Business & Users

2 icons

UserGroupIcon

BuildingOfficeIcon

Security

3 icons

ShieldCheckIcon

LockClosedIcon

KeyIcon

Technology

6 icons

BoltIcon

CpuChipIcon

ServerIcon

CloudIcon

WifiIcon

SignalIcon

Other

6 icons

BeakerIcon

LightBulbIcon

FireIcon

SparklesIcon

MoonIcon

SunIcon

Usage Guidelines

Best practices for using Heroicons in your designs

Icon Styles

Heroicons come in two styles: outline (24x24) and solid (20x20). This design system uses the outline style for consistency. Use outline icons for most UI elements and solid icons sparingly for emphasis.

Sizing

Use consistent icon sizes throughout your interface. The most common sizes are 16px for small UI elements, 20px for buttons, and 24px for primary actions. Icons scale beautifully at any size.

Color

Icons should inherit the text color of their parent element. Use semantic colors (success, warning, error) only when the icon conveys status information. Maintain sufficient contrast for accessibility.

Accessibility

Always provide alternative text for icons that convey meaning. Decorative icons should be hidden from screen readers using aria-hidden="true". When icons are interactive, ensure they have proper ARIA labels.