React Avatar with Verification Check
A circular avatar with a blue verification checkmark badge indicating verified or official accounts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
You've seen that blue checkmark on Twitter, Instagram, and YouTube—it signals authenticity and trust. This React avatar adds a VerifiedIcon from Lucide React positioned at bottom-right with fill-blue-500 styling for that familiar verified look. Built with shadcn/ui and Radix UI, the icon sits in a bg-background circle creating clean separation from the avatar. Perfect for social platforms, community directories, official brand accounts, or any interface where distinguishing verified from unverified users prevents impersonation and builds trust.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-6.jsonRelated patterns you will also like
Basic Avatar
Avatar without verification badge
Avatar with Status
Avatar with presence indicator
Square Avatar Verified
Square avatar with verification check
Verification Badge
Standalone verification badge patterns
Avatar with Count
Avatar with notification badge
Verified User Profile
Complete verified profile layout