Skip to content

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

Free

Avatar with Placeholder Icon (Square) for Svelte

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

UI library: Ark UI

An avatar with square corners and no photo shows a user icon on the muted background. There are no initials and no image.

Use it for an app, a workspace, or a service that has no logo yet. A person with no photo still fits a round Avatar. In Svelte, Ark UI does not pick a logo.

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

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.

API Reference

Avatar

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

All 14 avatar examples