Icons
Icon library from Lucide React with usage guidelines for Shift Scan.
Icon Library
Shift Scan uses Lucide React for all icons. These are the primary icons used throughout the site.
QrCode
QR code scanning features
WifiOff
Offline-first functionality
MapPin
Location and GPS features
LayoutDashboard
Dashboard views
ClipboardList
Timesheets and forms
Wrench
Equipment and tools
Layers
Features and complexity
FileSpreadsheet
Reports and exports
Bell
Notifications
Fingerprint
Biometric authentication
Coffee
Break tracking
Tag
Tags and labels
Building2
Job sites
Languages
Multi-language support
Home
Home and navigation
HelpCircle
Help and support
Shield
Security and privacy
Users
Team and people
Zap
Performance and speed
TrendingUp
Analytics and growth
Icon Sizes
Extra Small (16px)
Inline icons with text
Small (20px)
UI controls and button icons
Medium (24px)
Default size for most icons
Large (28px)
Feature cards and callouts
Extra Large (32px)
Hero sections and prominent features
Usage Guidelines
Choose Descriptive Icons
Select icons that clearly represent the feature or action. Avoid ambiguous icons that might confuse users.
Consistent Sizing
Use the predefined sizes (h-4, h-5, h-6, h-7, h-8) to maintain visual consistency. Avoid custom sizing.
Color Application
Icons inherit text color by default. Use text-primary for interactive elements, text-muted-foreground for supporting text.
Accessibility
Always pair icons with text labels for clarity. Never use icons alone without explanatory text unless universally understood (e.g., close button).
Icon Library Resource
Browse the complete Lucide React icon library at lucide.dev for all available icons.