Avatar

Overview

Use an avatar to represent a person, team, account, or organization.

Avatars work best when they support identity, not when they carry critical information by themselves. Always pair them with names in places where identity must be unambiguous.

Anatomy

An avatar has an image and a fallback. The image is shown when it loads successfully. The fallback is shown when there is no image or the image fails to load.

Usage guidance

Use initials, an icon, or a neutral placeholder as the fallback. Keep avatar sizes consistent in the same surface. Use grouped avatars when showing a small set of collaborators or participants.

Accessibility

Use meaningful alt text when the avatar image adds identity. Use empty alt text when the visible name already identifies the person next to the image.

Installation

npx love-ui@latest add avatar

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src="/avatars/01.png" alt="User avatar" />
  <AvatarFallback>CL</AvatarFallback>
</Avatar>

Examples

The examples show image fallback, size, radius, and grouped avatar patterns.

Fallback Only

Different Sizes

Different Radius

Group Avatars