Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Standard

Avatar with Placeholder Icon (Standard) for React

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

Framework
UI library

When you have neither a photo nor a name, a generic person icon still says there is someone here. This React avatar has no image: AvatarFallback fills the circle with a user icon on the muted background. Use it for guests, anonymous comments and accounts that haven't set a profile.

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

Why is there no photo?

This file has no AvatarImage. AvatarFallback is the whole face, and it holds a UserIcon at size-4.

Is the user icon announced?

The icon sets aria-hidden, and the fallback has no other text, so the avatar has no name. Add a visually hidden name next to the icon when nothing beside the avatar says who it is.

What color is the placeholder?

AvatarFallback uses the muted background and muted foreground from the avatar styles. The icon inherits that foreground. This file doesn't set a color.

How do I make the placeholder larger?

Set size on Avatar to sm, default, or lg. The icon stays size-4 until you change that class. The fallback fills the avatar.

Why is it round?

The avatar styles use rounded-full on the root and the fallback. This file doesn't override them.

How do I add a photo later?

Add an AvatarImage with src, alt, width, and height next to the fallback. The icon shows when that image is missing or fails.

All 14 avatar examples