React Badge with Icon on Left
An outlined badge with left-aligned icon for visually enhanced tags, categories, and metadata labels
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-outline-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-outline-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-outline-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-outline-3.jsonRelated patterns you will also like
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