Components / Avatar

Avatar

A person or account identity mark: profile pictures in account rows, message authors, member lists. Groups overlap with AvatarGroup and truncate with AvatarGroupCount.

import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '@layers/ui/avatar'

Rendered stock

House rules

• Always render AvatarFallback with initials so a missing or failed image degrades honestly instead of leaving an empty circle.
• Sizing goes through the size prop (sm, default, lg); never restyle the circle with custom classes.
• Usernames rendered next to avatars never take an @ prefix.
• Account rows that pair a profile picture with a platform icon use AccountIdentity rather than composing Avatar by hand.