---
meta:
title: Avatar
description: Avatars are used to represent a person or object.
layout: component
---
By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.
```html:preview
```
```jsx:react
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
const App = () => ;
```
## Examples
### Images
To use an image for the avatar, set the `image` and `label` attributes. This will take priority and be shown over initials and icons.
Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.
```html:preview
```
```jsx:react
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
const App = () => (
);
```
### Initials
When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
```html:preview
```
```jsx:react
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
const App = () => ;
```
### Custom Icons
When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
```html:preview
```
```jsx:react
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
>
);
```
### Shapes
Avatars can be shaped using the `shape` attribute.
```html:preview
```
```jsx:react
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
>
);
```
### Avatar Groups
You can group avatars with a few lines of CSS.
```html:preview
```
```jsx:react
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const css = `
.avatar-group sl-avatar:not(:first-of-type) {
margin-left: -1rem;
}
.avatar-group sl-avatar::part(base) {
border: solid 2px var(--sl-color-neutral-0);
}
`;
const App = () => (
<>
>
);
```