Skip to content

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

Free

Avatar with Placeholder Icon (Standard) for Vue

A round avatar with no photo and no initials. A user icon sits in the circle on the muted background.

UI library: Ark UI

A round avatar with no photo shows a user icon on the muted background. There are no initials and no image.

Use it for a guest or an account with no name and no picture. Initials are better once you know the name. A role can sit in a Badge beside it. In Vue, Ark UI does not choose the icon.

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><UserIcon aria-hidden="true" class="size-4" /></AvatarFallback>
</Avatar>

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.

API Reference

Avatar

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

All 14 avatar examples