Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Avatar Square for React

A photo with square corners and the initials CN as the fallback if that picture is missing or fails to load.

A photo with square corners is on screen. The initials CN are the fallback, shown only if that picture is missing or fails. The border follows the same corners.

Use it for logos, apps, and workspaces, where a circle would look like a person. A round Avatar still fits people in the same list. In React, Base UI does not decide this photo is a logo.

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

Anatomy

Avatar anatomy: image, badge, fallback, group, group count

Usage

<Avatar className="rounded-lg after:rounded-lg">
  <AvatarImage
    alt="@shadcn"
    className="rounded-lg"
    height={32}
    src="https://github.com/shadcn.png"
    width={32}
  />
  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>

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.

API Reference

Avatar

Sets alt="@shadcn", height={32}, src="https://github.com/shadcn.png" and width={32}. The rest is on the Avatar page.

All 14 avatar examples