Avatar

Circular profile images triggered by alt text containing “avatar” or “profile” — no classes needed.

Basic Avatar

<img
  src="https://api.dicebear.com/9.x/thumbs/svg?seed=Ada"
  alt="Ada avatar"
>

Inline With Text

Sam profile Sam Rivera

<p>
  <img
    src="https://api.dicebear.com/9.x/thumbs/svg?seed=Sam"
    alt="Sam profile"
  >
  Sam Rivera
</p>

Multiple Avatars

Alex avatar Jordan avatar Riley avatar

<p>
  <img
    src="https://api.dicebear.com/9.x/thumbs/svg?seed=Alex"
    alt="Alex avatar"
  >
  <img
    src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jordan"
    alt="Jordan avatar"
  >
  <img
    src="https://api.dicebear.com/9.x/thumbs/svg?seed=Riley"
    alt="Riley avatar"
  >
</p>

How It Works

Any img whose alt contains avatar or profile (case-insensitive) is styled as a circle
Images are cropped with object-fit: cover
Missing or broken images fall back to the alt text