# 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

``` ### Avatar Groups You can group avatars with a few lines of CSS. ```html preview

``` [component-metadata:sl-avatar]