Shadcn.io is not affiliated with official shadcn/ui
Badge with Icon on Left
A badge with a Lucide React icon positioned to the left of text for enhanced visual communication
Icons make badges scannable—star for featured, check for verified, flame for trending. This React badge adds a Lucide React icon with mr-1 spacing before text, using size-3 for proportional sizing. Built with shadcn/ui, the icon provides instant visual context that text alone can't convey as quickly. Perfect for feature status badges, priority indicators, verification markers, or trending content labels where icons communicate meaning faster than reading text.
Badge with Icon on Left preview
Installation
Related Components
Badge Icon Right
Badge with trailing icon
Text Only Badge
Basic badge without icons
Secondary Icon Badge
Subtle badge with icon
Circular Count Badge
Icon-sized round badge for counts
Icon Badge
Icon-only badge patterns
Status Indicator
Status indicators with icons
FAQ
Was this page helpful?
Sign in to leave feedback.