Avatar
Represents a person or team with initials, an icon or a photo. Optional online status.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="row">
<span class="px-avatar px-avatar--lg">OR</span>
<span class="px-avatar px-avatar--lg px-avatar--neutral"><svg class="px-icon" aria-hidden="true">…</svg></span>
<span class="px-avatar px-avatar--lg px-avatar--accent">PB<span class="px-avatar__status" aria-label="Online"></span></span>
<span class="px-avatar-label"><span class="px-avatar">LS</span><span class="px-avatar-label__text"><span class="px-avatar-label__name">Lana Steiner</span><span class="px-avatar-label__meta">lana@pixels.io</span></span></span>
</div>Usage
- Initials use the first letters of given and family name.
- Arabic names: first letters of the first two words.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Sizes
XS 24 · SM 32 · MD 40 · LG 48 · XL 56 · 2XL 64.
<div class="row" style="align-items:center">
<span class="px-avatar px-avatar--xs">OR</span><span class="px-avatar px-avatar--sm">OR</span><span class="px-avatar">OR</span><span class="px-avatar px-avatar--lg">OR</span><span class="px-avatar px-avatar--xl">OR</span><span class="px-avatar px-avatar--2xl">OR</span>
</div>Group
Overlapping avatars with an overflow count.
<div class="px-avatar-group" aria-label="5 members">
<span class="px-avatar">OR</span><span class="px-avatar px-avatar--accent">PB</span><span class="px-avatar">LS</span><span class="px-avatar px-avatar--neutral">+2</span>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-avatar | class | Initials by default. Put an <img> inside for a photo. |
px-avatar--xs … --2xl | class | Size. |
px-avatar--neutral · --accent | class | Type Icon / Accent. |
px-avatar__status · --offline | class | Status dot. |
px-avatar-group · px-avatar-label | class | Group and label group. |
Figma properties
Represents a person or team. Initials use the first letters of given and family name (Arabic names: first letters of the first two words). Swap in a photo via an image fill on the instance. Status dot…
| Property | Type | Values |
|---|---|---|
| Initials | Text | “OR” |
| Status | Boolean | — |
| Size | Variant | XS SM MD LG XL 2XL |
| Type | Variant | Initials Icon Accent |
Overlapping avatars with an overflow count. Earlier avatars sit on top. In RTL the stack starts on the right.
| Property | Type | Values |
|---|---|---|
| Size | Variant | SM MD |
| Direction | Variant | LTR RTL |
Avatar with name and supporting text (email, role). Used in tables, menus and headers.
| Property | Type | Values |
|---|---|---|
| Name | Text | “Olivia Rhye” |
| Supporting text | Text | “olivia@pixels.io” |
| Size | Variant | SM MD LG |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-avatar-size-xs | 24px | 24px |
--px-avatar-size-sm | 32px | 32px |
--px-avatar-size-md | 40px | 40px |
--px-avatar-size-lg | 48px | 48px |
--px-avatar-size-xl | 56px | 56px |
--px-avatar-size-2xl | 64px | 64px |
--px-avatar-radius | radius-full | 999px |
--px-avatar-background-neutral | color-background-neutral-default | #f2f4f7 |
--px-avatar-content-neutral | color-content-neutral-secondary | #475467 |
--px-avatar-ring | color-surface-default | #ffffff |
Accessibility
- Photos need alt text with the name; decorative initials next to a name can be aria-hidden.