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