Shadcn.io is not affiliated with official shadcn/ui
Badge with Icon on Left
An outlined badge with left-aligned icon for visually enhanced tags, categories, and metadata labels
Icons make outlined badges scannable without adding visual weight. This React badge combines shadcn/ui's outline variant with a Lucide React icon positioned left of text for instant category recognition. Built with mr-1 spacing and size-3 icon scaling, the pattern balances icon and text while maintaining the subtle outline aesthetic. Perfect for categorized tags with symbols (Star for featured, Tag for labels, Folder for categories), metadata types needing quick identification, or any secondary indicator benefiting from iconic reinforcement—users process icons faster than text alone while keeping the interface light.
Badge with Icon on Left preview
Installation
Related Components
Outline Icon Right
Right-aligned icon variant
Outline Text Only
Text-only outlined badge
Standard with Icon Left
Default filled icon badge
Destructive Icon Left
Error state icon badge
Outline with Link
Clickable outlined badge
Circular Outline Count
Round outlined count badge
FAQ
Was this page helpful?
Sign in to leave feedback.