Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Square

Avatar Square for React

A square avatar with a profile picture and initials as the fallback.

Framework
UI library

Round avatars are classic, but logos, apps and workspaces read better as squares. This React avatar passes rounded-lg to Avatar, AvatarImage and AvatarFallback, and after:rounded-lg to the avatar so its thin border follows the corners. Use it for company directories, workspace switchers, app lists, or anywhere brands sit next to people.

Preview

Preview width
CN

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the square shape applied?

The avatar styles start as a circle, so this file overrides them in four places: rounded-lg on Avatar, AvatarImage, and AvatarFallback, and after:rounded-lg on Avatar so the hairline border follows the corners.

Can I use a tighter or looser corner?

Swap rounded-lg for another radius utility and change all four spots together. Leave one on rounded-full and that piece stays round.

What do the image props do?

AvatarImage sets alt, plus width and height of 32, matching the default avatar size. AvatarFallback shows CN when that image is missing or fails.

Does size still apply to a square avatar?

Yes. size on Avatar is sm, default, or lg, and the radius classes don't change it. This file uses the default.

What should the alt text be?

Use the person's name in alt. When that name is already next to the avatar, an empty alt keeps it from being read twice.

Why does the fallback have rounded-lg too?

So the initials stay square when the photo isn't there. AvatarFallback centers the text CN.

All 14 avatar examples