React Avatar with Verification Check
A rounded square avatar with blue verification badge for official workspaces, certified integrations, or verified organizations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Verification on square avatars signals different trust—official workspace, certified integration, vetted partner. This React avatar adds a blue VerifiedIcon from Lucide React to rounded-lg squares, indicating officially recognized entities rather than verified individuals. Built with shadcn/ui and Radix UI, the fill-blue-500 checkmark communicates platform certification, partner status, or first-party integrations. Perfect for app marketplaces distinguishing official from community plugins, workspace directories showing enterprise-verified organizations, or integration lists highlighting vetted partners.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-square-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-square-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-square-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-square-6.jsonRelated patterns you will also like
Basic Square Avatar
Square avatar without verification
Circular Avatar Verified
Circular avatar with verification check
Verified Partner
Partner and vendor verification patterns
Certified Integration
Officially certified third-party integrations
Square Avatar Status
Square avatar with presence indicator
Organization Badge
Organization verification badges
Questions you might have
React Avatar with Offline Indicator
A rounded square avatar with gray offline indicator for inactive workspaces, disconnected integrations, or unavailable services
React Avatar with Count Indicator
A rounded square avatar with red notification count badge for workspace updates, integration alerts, or pending items