Skip to content

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

Free

Avatar with Placeholder Initials (Standard) for Solid

A round avatar with no photo at all. The letters CN sit in the circle on the muted background.

UI library: Ark UI

A round avatar with no photo shows the letters CN, centered on the muted background. There is no image to load.

Use it for new accounts and anywhere a photo is optional. The letters should come from the name. A generic person icon is the other fallback, and a status can sit in a Badge. In Solid, Ark UI does not invent the initials.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Avatar>
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>

FAQ

Why are the initials always visible?

There is no AvatarImage, so AvatarFallback is the avatar. The text is CN, and the fallback centers it.

Where does the background color come from?

The avatar styles set a muted background and muted foreground on AvatarFallback. This file doesn't pick a color from the name.

How do I change the initials?

Replace the text CN. One or two letters fit the default size.

How do I change the size?

Set size on Avatar to sm, default, or lg. The fallback text gets smaller on sm. This file uses the default.

What does a screen reader hear?

The letters in the fallback. When those letters aren't a full name, put the name next to the avatar or as extra text in the fallback.

How do I show a photo when I have one?

Add AvatarImage with src, alt, width, and height beside the fallback. The initials show when the image is missing or fails.

API Reference

Avatar

No extra props in this demo. The rest is on the Avatar page.

All 14 avatar examples