# Avatar
[component-header:sl-avatar]
Avatars are used to represent a person or object.
```html preview
```
## Examples
### Images
To use an image for the avatar, set the `image` and `alt` attributes. This will take priority and be shown over initials and icons.
```html preview
```
### 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
```
### 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
```
### Shapes
Avatars can be shaped using the `shape` attribute.
```html preview
```
[component-metadata:sl-avatar]