i

Avatar

Showing state and identity · researched

A small picture, initials or icon identifying a person or organization.

atom · Carbon: UserAvatar

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Avatar native: no antd 6.6.5
Variants
—
Sizes
large, medium, small
States documented
—
Accessibility guidance
no

Span wrapping an img (native) or text/icon. Shape circle/square; Avatar.Group stacks avatars with maxCount.

1 corrected on re-read
  • builds_on_native: "partly" → "no" SSR: span.ant-avatar in every variant; img (when src) or text is only child content

docs ↗ · code ↗

Carbon

absentCarbon does not ship this component. Nothing is drawn in its place.

Not in the docs component list, the carbon-website pages, or the installed 1.117.0 package. packages/react/src/components on main has UserAvatar, but its mdx says migrated components are not in the published v11 package.

· code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No avatar or user-image component.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. No avatar component and no roadmap entry. The list page only documents a leading avatar item layout and its tokens (e.g. --md-list-item-leading-avatar-size).

Primer

Avatar native: yes
shipped, not drawn herePrimer documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
—
States documented
default
Accessibility guidance
no

Renders a native img; size is a pixel number (default 20, scale 16-64, responsive object allowed), no named sizes. square prop switches circle to square. No Accessibility page (URL redirects to the home page); alt is a documented prop. AvatarStack has variant cascade/stack, also no Accessibility page.

docs ↗ · code ↗

Spectrum

Avatar native: yes
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500
States documented
default, focus, disabled
Accessibility guidance
no

Sizes and states from the SWC 2nd-gen page data (numeric type-scale steps); a rsp Avatar page and an Avatar group page also exist. Native check: SWC 2nd-gen renders an img inside a div, SWC 1st-gen sp-avatar renders an img, and S2 Avatar uses its Image component.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

No avatar or user-image component. Checked the docs components index (47 components, v3.14.0), a text search of the fetched component pages, and the 88 entries of packages/ on the develop branch.

Platform facts

Native elementnot recordedNo HTML element or APG pattern for an avatar. The image part is the img element; MDN: provide a useful alt, and alt='' indicates the image is not a key part of the content. The spec/MDN img pages were read only for alt, not for how a fallback should work.
Baseline—
APG patternnone
ARIA role—
Shipped by3 of 7 systems

Anatomy

  1. image optional — img element; MDN: alt is the text replacement, alt='' marks a non-key decorative image.

The seven states

default Image or initials shown.
hover n/a — Not interactive.
focus n/a — Not focusable unless wrapped in a link or button.
active n/a — Not interactive.
disabled n/a — Not defined.
error A failed image load is a browser behaviour (MDN img: the browser may replace the image with its alt text); no avatar-specific state.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 1 of 35 fields changed on the second read — open any “corrected” note to see what it said before.