React Avatar with Placeholder Icon
A circular avatar using a Lucide React icon as fallback, providing a generic user representation when no photo or name exists
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes you don't have user names or photos—just anonymous accounts or guest users. This React avatar uses a User icon from Lucide React inside AvatarFallback, creating a universal placeholder that communicates person without requiring personal data. Built with shadcn/ui and Radix UI, the icon scales properly with size-4 and maintains circular bounds. Perfect for guest accounts, anonymous comments, system users, or pre-authentication states where personal identifiers aren't available.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-3.jsonRelated patterns you will also like
Avatar with Initials
Avatar showing user initials fallback
Avatar with Image
Full avatar with image and fallback
Square Avatar Icon
Rounded square avatar with icon
Avatar with Status
Avatar with presence indicator
Icon Button
Icon-based button patterns
Empty State
Placeholder states with icons