React Avatar with Placeholder Icon
A rounded square avatar with icon fallback for generic workspace, app, or entity placeholders
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Square shapes communicate app or tool better than circles—think app icons on your phone. This React avatar uses rounded-lg with a User icon from Lucide React, creating recognizable placeholders for workspaces, integrations, or system entities without specific branding. Built with shadcn/ui and Radix UI, the square format matches user expectations for apps and tools. Perfect for app directories, integration lists, workspace placeholders, or plugin marketplaces where icons represent software rather than people.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-square-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-square-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-square-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-square-3.jsonRelated patterns you will also like
Square Avatar Initials
Square avatar with initials fallback
Circular Avatar Icon
Circular avatar with icon fallback
Square Avatar Image
Square avatar with photo
App Icon
Application icon patterns
Integration Card
Third-party integration cards
Workspace Avatar
Workspace and organization avatars