Avatar

An image element with a fallback for representing a user.

Image

<div
  className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
  role="img"
  aria-label="Avatar of Pedro Duarte"
>
  <img
    src="/profile.jpg"
    alt=""
    className="size-10 aspect-square h-full w-full object-cover"
  />
</div>

Fallback

<div className="relative flex size-10 shrink-0 overflow-hidden rounded-full items-center justify-center bg-zinc-800">
  <span className="font-medium text-zinc-300">PD</span>
</div>

Alert

Badge