# Avatar

> A person or account as a circular image, initials or icon, alone or in an overlapping group.

## Anatomy

A `.avatar` shows a person or account as a circle. It is an `<img>`, or a `<span>` holding initials or an icon on a `secondary-container` fill.

![Ada Lovelace](https://picsum.photos/id/64/80/80) GH

```
<img class="avatar" src="ada.jpg" alt="Ada Lovelace">
<span class="avatar" role="img" aria-label="Grace Hopper">GH</span>
<span class="avatar" role="img" aria-label="Guest">
  <span class="material-symbols" aria-hidden="true">person</span>
</span>
```

## Sizes

Add `small` for 32px or `large` for 56px. The default is 40px. Initials and icons scale with the circle.

GH GH GH

```
<span class="avatar small" role="img" aria-label="Grace Hopper">GH</span>
<span class="avatar" role="img" aria-label="Grace Hopper">GH</span>
<span class="avatar large" role="img" aria-label="Grace Hopper">GH</span>
```

## Group

An `.avatar-group` overlaps its avatars by 8px and rings each one in the surface color. End with a count avatar for the people not shown, and say what the group is in the text around it.

![Ada Lovelace](https://picsum.photos/id/64/64/64) GH ![Alan Turing](https://picsum.photos/id/91/64/64) +3

6 people are editing

```
<div class="avatar-group">
  <img class="avatar small" src="ada.jpg" alt="Ada Lovelace">
  <span class="avatar small" role="img" aria-label="Grace Hopper">GH</span>
  <img class="avatar small" src="alan.jpg" alt="Alan Turing">
  <span class="avatar small" role="img" aria-label="3 more people">+3</span>
</div>
<span>6 people are editing</span>
```

## Accessibility

Give an image avatar `alt` text that names the person. Use `alt=""` when the name is already next to it. Initials read as separate letters, and an icon reads as its ligature name. Give a `<span>` avatar `role="img"` and an `aria-label` instead. When the person is named beside it, use `aria-hidden="true"`.

Grace Hopper

```
<span class="avatar" aria-hidden="true">GH</span>
<span>Grace Hopper</span>
```

## Tokens

Override these on the `.avatar`, or on `.avatar-group` for the overlap and ring.

| Token | Default |
| --- | --- |
| `--md-comp-avatar-size` | 40px; `small`: 32px; `large`: 56px |
| `--md-comp-avatar-container-color` | `--md-sys-color-secondary-container` |
| `--md-comp-avatar-color` | `--md-sys-color-on-secondary-container` |
| `--md-comp-avatar-group-overlap` | 8px |
| `--md-comp-avatar-group-ring-color` | `--md-sys-color-surface` |