Scale — Avatar

Install

Examples

Sizes

Five sizes from xs (16px) to xl (96px). Match the size to the surrounding text and control density.

Behaviour & states

A fallback chain keeps the avatar meaningful: a src renders the photo; with no src, the first letter of alt; with neither, a placeholder icon. disabled dims the avatar.

Guidelines

Usage

profile pictures, comment threads, user lists, team members — anywhere a person needs a visual identity.

Do

Always pass alt with the person’s name — it becomes the accessible label.
Use the initials fallback for users who have no photo.
Keep the size consistent within a single list or row.

Don’t

Don’t make an avatar the only label for an interactive control — pair it with a name or tooltip.
Don’t line up many avatars by hand — use Avatar group.
Don’t rely on the placeholder icon to identify a specific person.

Accessibility

Name: renders role="img" with an aria-label taken from alt (falls back to “Avatar” when empty) — always supply a meaningful alt.
Decorative layers: the initials and placeholder icon are aria-hidden; the accessible name comes solely from alt.
Contrast: initials sit on a token-driven surface that meets WCAG AA against the text colour.
Disabled: disabled is visual only — convey the disabled state on the surrounding interactive element too.

Properties

Avatar group — an overlapping stack with an overflow count for multiple people.
Status indicator — a presence dot often paired with an avatar.

Avatar