Avatar

An avatar stands for a person where a full name would not fit, such as an owner column or an assignee. It shows up to two uppercase letters, the first of the first and last words, so Ada Lovelace is AL and Plato is P. The initials are worked out from the name; there is no image and no colour to set.

Initials

The first letters of the first and last names.

ALGHL

Avatar { name: "Ada Lovelace".into() }.html(out);
Avatar { name: "Grace Brewster Hopper".into() }.html(out);
Avatar { name: "Linus".into() }.html(out);

In a row

Beside a name, the avatar is decoration with a label.

MCMaya Chen

Avatar { name: "Maya Chen".into() }.html(out);
out.push_str("<span>Maya Chen</span>");

An agent

Agents are colleagues too.

TAWorking

Avatar { name: "Triage agent".into() }.html(out);
Status { word: "Working".into(), tone: Tone::Ok }.html(out);

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

Web

use ocean_ui_core::Avatar;
Avatar { name: "Ada Lovelace".into() }

Native

use ocean_ui_native::{Show, core::Avatar};
Avatar { name: "Ada Lovelace".into() }.show(ui);

Cargo feature base of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

Props

Name	Type	Default	What
`name`	`String`	—	The person's full name; the initials come from it and it is the accessible name.

The avatar is role="img" with the full name as its aria-label, so a screen reader says the name, not the letters.
It takes no focus and no clicks.
Where people must be told apart at a glance, show the name in words beside it.

Markdown

The same page as Markdown, for an agent or a pull request.

# Avatar

A person's initials in a circle, taken from the first and last words of their name.

An avatar stands for a person where a full name would not fit, such as an owner column or an assignee. It shows up to two uppercase letters, the first of the first and last words, so Ada Lovelace is AL and Plato is P. The initials are worked out from the name; there is no image and no colour to set.

## Use it

Web:

```rust
use ocean_ui_core::Avatar;
Avatar { name: "Ada Lovelace".into() }
```

Native:

```rust
use ocean_ui_native::{Show, core::Avatar};
Avatar { name: "Ada Lovelace".into() }.show(ui);
```

Cargo feature `base`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `name` | `String` | `—` | The person's full name; the initials come from it and it is the accessible name. |

On the Mac: ![Avatar, dark](/ui/native/avatar-dark.png) ![Avatar, light](/ui/native/avatar-light.png)

## Examples

### Initials

The first letters of the first and last names.

```rust
Avatar { name: "Ada Lovelace".into() }.html(out);
Avatar { name: "Grace Brewster Hopper".into() }.html(out);
Avatar { name: "Linus".into() }.html(out);
```

### In a row

Beside a name, the avatar is decoration with a label.

```rust
Avatar { name: "Maya Chen".into() }.html(out);
out.push_str("<span>Maya Chen</span>");
```

### An agent

Agents are colleagues too.

```rust
Avatar { name: "Triage agent".into() }.html(out);
Status { word: "Working".into(), tone: Tone::Ok }.html(out);
```

## Accessibility

- The avatar is role="img" with the full name as its aria-label, so a screen reader says the name, not the letters.
- It takes no focus and no clicks.
- Where people must be told apart at a glance, show the name in words beside it.

## Related

- [Badge](/ui/components/badge.md)
- [Grid](/ui/components/grid.md)
- [Live table](/ui/components/live-table.md)

Open Markdown