# Avatar

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/avatar
*Captured:* 2026-04-27T14:58:16.613Z

The Avatar is a small component designed to render a users image, the initials of the users name or an icon.

## Avatar

### Example: Example 1

JD
AAK
AK

#### React (tsx)

```tsx
import Avatar from '@rio-cloud/rio-uikit/Avatar';
import Divider from '@rio-cloud/rio-uikit/Divider';
import Notification from '@rio-cloud/rio-uikit/Notification';

export default () => (
    <div className='max-width-600 padding-20 display-flex gap-25'>
        <Avatar />
        <Avatar name='John Doe' />
        <Avatar name='Augusta Ada King' />
        <Avatar name='Augusta Ada King' abbr='AK' />
        <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' />
        <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' alt='Kylie Cunningham' />

        <Divider vertical />

        <Avatar iconName='heart' className='cursor-pointer' onClick={() => Notification.info('Avatar clicked')} />
        <Avatar backgroundColor='bg-white' className='border' />
    </div>
);
```

#### HTML (html)

```html
<div class="max-width-600 padding-20 display-flex gap-25">
    <div class="Avatar bg-lighter" style="height: 40px;">
        <span class="Avatar-icon rioglyph rioglyph-user ">
        </span>
    </div>
    <div class="Avatar bg-lighter" style="height: 40px;">
        <span class="Avatar-initials">JD</span>
    </div>
    <div class="Avatar bg-lighter" style="height: 40px;">
        <span class="Avatar-initials" style="letter-spacing: -0.2px;">AAK</span>
    </div>
    <div class="Avatar bg-lighter" style="height: 40px;">
        <span class="Avatar-initials">AK</span>
    </div>
    <div class="Avatar bg-lighter" style="height: 40px;">
        <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="avatar" class="Avatar-image" draggable="false">
    </div>
    <div class="Avatar bg-lighter" style="height: 40px;">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Kylie Cunningham" class="Avatar-image" draggable="false">
    </div>
    <div class="Divider position-relative" style="padding-left: 15px; padding-right: 15px;">
        <div class="divider-line bg-light" style="width: 1px; height: 100%;">
        </div>
    </div>
    <div class="Avatar bg-lighter cursor-pointer" style="height: 40px;">
        <span class="Avatar-icon rioglyph rioglyph-heart ">
        </span>
    </div>
    <div class="Avatar bg-white border" style="height: 40px;">
        <span class="Avatar-icon rioglyph rioglyph-user ">
        </span>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| name | string | — | When a name is provided, the Avatar automatically generates and displays the initials of that name. The name also appears in a tooltip when hovered over. |
| abbr | string | — | The abbreviation can also be defined manually. It is recommended to limit abbreviations to a maximum of 2 to 3 characters. |
| image | string | — | The image to be shown. When an image is displayed, the abbreviation is not shown. |
| alt | string | — | The image alt text. If not given, the name will be used. |
| iconName | string | 'user' | The name of an icon that should be shown instead of initials. If nothing is provided, a default icon will be shown. |
| size | number | 40 | The height and width of the component. |
| backgroundColor | string | 'bg-lighter' | The background color for the component. By default, the text and icon color is derived from the background color. |
| tooltip | string \| JSX.Element | — | The content of the Avatars tooltip. if nothing is provided, the name is used. |
| iconClassName | string | — | Additional classes set to the icon element. |
| className | string | — | Additional classes set to the wrapper element. |

## AvatarGroup

### Example: Example 2

JD
AAK
AK
+2

+2

#### React (tsx)

```tsx
import Avatar from '@rio-cloud/rio-uikit/Avatar';
import AvatarGroup from '@rio-cloud/rio-uikit/AvatarGroup';

export default () => (
    <div className='max-width-600 padding-20 display-flex flex-column gap-25'>
        <AvatarGroup maxItemsVisible={5}>
            <Avatar />
            <Avatar name='John Doe' />
            <Avatar name='Augusta Ada King' />
            <Avatar name='Augusta Ada King' abbr='AK' />
            <Avatar name='Foo Bar' />
            <Avatar name='Lorem Ipsum' />
        </AvatarGroup>

        <AvatarGroup maxItemsVisible={3}>
            <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' name='Wendy Miller' />
            <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' name='Kylie Cunningham' />
        </AvatarGroup>

        <AvatarGroup maxItemsVisible={4}>
            <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' name='Wendy Miller' />
            <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' name='Kylie Cunningham' />
            <Avatar image='https://randomuser.me/api/portraits/women/43.jpg' name='Nina Reynolds' />
            <Avatar image='https://randomuser.me/api/portraits/women/42.jpg' name='Sue Hopkins' />
            <Avatar image='https://randomuser.me/api/portraits/women/41.jpg' name='Alma Snyder' />
        </AvatarGroup>
    </div>
);
```

#### HTML (html)

```html
<div class="max-width-600 padding-20 display-flex flex-column gap-25">
    <div class="AvatarGroup">
        <div class="Avatar bg-lighter" style="height: 40px;">
            <span class="Avatar-icon rioglyph rioglyph-user ">
            </span>
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <span class="Avatar-initials">JD</span>
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <span class="Avatar-initials" style="letter-spacing: -0.2px;">AAK</span>
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <span class="Avatar-initials">AK</span>
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <span class="Avatar-initials">+2</span>
        </div>
    </div>
    <div class="AvatarGroup">
        <div class="Avatar bg-lighter" style="height: 40px;">
            <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="Wendy Miller" class="Avatar-image" draggable="false">
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Kylie Cunningham" class="Avatar-image" draggable="false">
        </div>
    </div>
    <div class="AvatarGroup">
        <div class="Avatar bg-lighter" style="height: 40px;">
            <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="Wendy Miller" class="Avatar-image" draggable="false">
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Kylie Cunningham" class="Avatar-image" draggable="false">
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Nina Reynolds" class="Avatar-image" draggable="false">
        </div>
        <div class="Avatar bg-lighter" style="height: 40px;">
            <span class="Avatar-initials">+2</span>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| maxItemsVisible | number | — | Maximum number of items to be shown. Items that overflow are grouped into a single Avatar that displays the overflow count. Collapsed names are shown inside a tooltip. By default all items are shown. |
| className | string | — | Additional classes set to the outer element. |