What fallback when an image fails?

Initials (first + last name letters) rendered in a colored circle. The background color is derived from a hash of the name so it's stable per person.

Does it support circular and square shapes?

Yes — toggle border-radius between 50% (circle), 20% (squircle), and 0% (square). Combine with a colored ring for status.

First letter of first name + first letter of last name, uppercase. For single-word names, the first two letters are used.

Size is set via a CSS variable so you can resize by updating `--avatar-size`. Font size scales proportionally.

Circular/square avatar with initials, ring, image fallback. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

The word 'avatar' in computing was first used by Chip Morningstar and Randall Farmer in Lucasfilm's Habitat (1986), a pioneering online multiplayer environment.
Gravatar (Globally Recognized Avatar), launched in 2004, generates default avatars from email hashes — it serves over 100 billion avatar requests per year as of 2023.
The standard avatar size in most design systems is 40px for inline mentions, 48px for list items, and 80-120px for profile headers — a convention established by early social networks.

What fallback when an image fails?: Initials (first + last name letters) rendered in a colored circle. The background color is derived from a hash of the name so it's stable per person.
Does it support circular and square shapes?: Yes — toggle border-radius between 50% (circle), 20% (squircle), and 0% (square). Combine with a colored ring for status.
How are initials calculated?: First letter of first name + first letter of last name, uppercase. For single-word names, the first two letters are used.
Is the output responsive?: Size is set via a CSS variable so you can resize by updating `--avatar-size`. Font size scales proportionally.

Circular/square avatar with initials, ring, image fallback. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

The word 'avatar' in computing was first used by Chip Morningstar and Randall Farmer in Lucasfilm's Habitat (1986), a pioneering online multiplayer environment.
Gravatar (Globally Recognized Avatar), launched in 2004, generates default avatars from email hashes — it serves over 100 billion avatar requests per year as of 2023.
The standard avatar size in most design systems is 40px for inline mentions, 48px for list items, and 80-120px for profile headers — a convention established by early social networks.

What fallback when an image fails?: Initials (first + last name letters) rendered in a colored circle. The background color is derived from a hash of the name so it's stable per person.
Does it support circular and square shapes?: Yes — toggle border-radius between 50% (circle), 20% (squircle), and 0% (square). Combine with a colored ring for status.
How are initials calculated?: First letter of first name + first letter of last name, uppercase. For single-word names, the first two letters are used.
Is the output responsive?: Size is set via a CSS variable so you can resize by updating `--avatar-size`. Font size scales proportionally.