# Avatar

Source: https://iriscss.com/documentation/components/avatar/

A round picture or initials, in four sizes, with overlapping groups.

Put `.avatar` on an `img`, or on a `span` with initials.

```html
<img class="avatar" src="/android-chrome-192x192.png" alt="Iris CSS">
<span class="avatar">AL</span>
<span class="avatar" role="img" aria-label="Grace Hopper">GH</span>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) colors the initials and their background.

```html
<span class="avatar primary">PR</span>
<span class="avatar info">IN</span>
<span class="avatar success">SU</span>
<span class="avatar danger">DA</span>
<span class="avatar contrast">CO</span>
```

## Sizes

```html
<span class="avatar small">S</span>
<span class="avatar">D</span>
<span class="avatar medium">M</span>
<span class="avatar large">L</span>
```

## Square

`.square` rounds the corners only.

```html
<img class="avatar square large" src="/android-chrome-192x192.png" alt="Iris CSS">
<span class="avatar square large">AL</span>
```

## Group

`.avatar-group` overlaps the avatars, with a ring in the page color between them.

```html
<div class="avatar-group">
  <span class="avatar primary">AL</span>
  <span class="avatar info">GH</span>
  <span class="avatar accent">AT</span>
  <span class="avatar">+4</span>
</div>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-avatar-size` | `2.5rem` |  |
| `--i-avatar-size-small` | `2rem` |  |
| `--i-avatar-size-medium` | `3rem` |  |
| `--i-avatar-size-large` | `4rem` |  |
| `--i-avatar-group-overlap` | `0.2` | How far each avatar in a group tucks under the one before it |