Shadcn.io is not affiliated with official shadcn/ui
Badge with Icon on Left
A secondary badge with left-aligned icon for muted categorization with visual symbols
Icons in gray badges guide without shouting. This React badge combines shadcn/ui's secondary variant with a Lucide React icon positioned left of text for subtle category identification. Built with mr-1 spacing and size-3 icon scaling in subdued gray styling, the pattern creates scannable categories without overwhelming. Perfect for content types with symbols (Document 📄, Code 💻, Design 🎨), metadata categories needing icons, or any classification where symbols help but prominence would distract—users process icons faster while the muted palette keeps focus on primary content.
Badge with Icon on Left preview
Installation
Related Components
Secondary Icon Right
Right-aligned icon variant
Secondary Text Only
Text-only gray badge
Standard with Icon Left
Primary colored icon badge
Outline Icon Left
Minimal bordered icon badge
Secondary with Link
Clickable gray badge
Circular Secondary Count
Round gray count badge
FAQ
Was this page helpful?
Sign in to leave feedback.