Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Square

Avatar with Placeholder Icon (Square) for React

A square avatar with no picture that shows a user icon as the placeholder.

Framework
UI library

A square placeholder for something without a picture, such as a workspace, an app or a service. This React avatar has no image: AvatarFallback fills the rounded-lg square with a user icon on the muted background. Use it in app directories, integration lists and workspace pickers until a logo is set.

Preview

Preview width

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 this placeholder squared off?

rounded-lg is on Avatar and on AvatarFallback, and after:rounded-lg is on Avatar so the border matches. There is no image in this file.

What does the fallback contain?

A UserIcon at size-4. AvatarFallback centers it and fills the avatar.

Is the icon announced?

It sets aria-hidden, and there is no text, so the avatar has no accessible name. Add a visually hidden name beside the icon when the avatar stands alone.

Where does the gray background come from?

The avatar styles. AvatarFallback uses the muted background and muted foreground. This file doesn't pass a color class.

How do I change the avatar size?

Set size to sm, default, or lg on Avatar. The icon class stays size-4 until you edit it.

How do I drop a photo into this square?

Add AvatarImage with src, alt, width, height, and rounded-lg. The icon remains the fallback when the image is missing or fails.

All 14 avatar examples