React Badge with Icon on Left
A secondary badge with left-aligned icon for muted categorization with visual symbols
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-3.jsonRelated patterns you will also like
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