React Avatar
A rounded square avatar with subtle corner radius for modern app interfaces and brand identity displays
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Circular avatars are classic, but sometimes you need more character—literally. This React avatar uses rounded-lg for softer square shapes that work beautifully for brand logos, app icons, or interfaces where circles feel too traditional. Built with shadcn/ui and Radix UI, both Avatar and AvatarFallback use className rounded-lg for consistent corner radius. Perfect for company directories, app marketplaces, workspace switchers, or anywhere mixing human faces with brand identities demands flexible shapes beyond pure circles.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-square-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-square-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-square-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-square-1.jsonRelated patterns you will also like
Circular Avatar
Traditional circular avatar shape
Square Avatar Initials
Square avatar with initials fallback
Square Avatar Icon
Square avatar with icon fallback
Square Avatar Status
Square avatar with presence indicator
Card with Avatar
Card layouts featuring avatars
Workspace Switcher
Multi-workspace selection with icons