What is Avatar?

An avatar is the visual stand-in for an identity: a profile photo in a comment, a company logo next to an account, the stack of faces showing who is in a document. It is nearly always a circle or a rounded square at a fixed size, so lists line up and the eye can scan by face. When there is no photo, or it fails to load, the avatar falls back to initials on a tinted background, and that fallback is what most avatars in a business app actually show.

Anatomy and sizes

• The image, cropped to a square and scaled to cover the circle. Request it at the rendered size times the device pixel ratio, not the original upload.
• The fallback: one or two initials, or a generic person icon for anonymous users. Derive the tint from the name so the same person always gets the same color.
• A presence indicator in one corner, such as a green dot for online, which needs its own text label.
• Sizes: a small set such as 24, 32 and 40px, plus one large size for profile pages, lined up with the text sizes they sit next to.
• Groups: overlapping avatars with a trailing +4 count when there are more than a few.

Accessibility

An avatar is an image, so it needs an alt decision. When the person's name appears right next to it, the image is decorative and gets alt="", so screen readers do not hear the name twice. When the avatar is the only sign of who it is, such as an icon-only button that opens the account menu, the alt text or the button's name must carry the name. Initials in a fallback should be hidden from assistive technology with the full name provided instead, because "MC" is not a name. A presence dot needs visually hidden text such as "Online", and an avatar group needs a summary like "Maya Chen, Theo Okafor and 4 others".

How to build one in React

MiniDev's Avatar is built on the Base UI avatar, which shows the fallback until the image has loaded and keeps it if loading fails:

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

export function Reviewer({ name, src }: { name: string; src?: string }) {
  const initials = name.split(" ").map((part) => part[0]).slice(0, 2).join("")
  return (
    <div className="flex items-center gap-2">
      <Avatar size="sm">
        <AvatarImage src={src} alt="" />
        <AvatarFallback aria-hidden>{initials}</AvatarFallback>
      </Avatar>
      <span className="text-sm">{name}</span>
    </div>
  )
}

Add a delay of a few hundred milliseconds on the fallback when images usually load fast, so initials do not flash before the photo. AvatarGroup stacks several with an overflow count, AvatarUpload handles the profile photo flow, and UserChip pairs an avatar with a name. Browse the media category for related pieces.