Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Square

Avatar with Placeholder Initials (Square) for React

A square avatar with no picture that shows initials as the placeholder.

Framework
UI library

Initials in a square read as an organization rather than a person. This React avatar has no image: AvatarFallback shows CN in a rounded-lg square on the muted background. Use it for companies, teams and workspaces that haven't uploaded 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

FAQ

How is the square applied with no photo?

rounded-lg is on Avatar and AvatarFallback, and after:rounded-lg is on Avatar for the border. There is no AvatarImage to round.

What does the fallback show?

The text CN. With no image, that fallback is always the face, centered in the square.

What color is the square?

Muted background and muted foreground, from the avatar styles. This file doesn't set a background class.

How do I change the letters?

Replace CN. Keep it to one or two characters so they fit the default size.

How do I resize it?

Set size on Avatar to sm, default, or lg. The fallback type scale follows sm.

How do I add a photo without losing the square?

Add AvatarImage with src, alt, width, height, and rounded-lg. The initials show when that image is missing or fails.

All 14 avatar examples