---
url: /api/renderers/web-components/src/variables/avatar.md
---
[pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / avatar

# Variable: avatar

> `const` **avatar**: [`ElementDefinition`](../interfaces/ElementDefinition.md)

Alpha

`<instui-avatar>` — a circular (or rectangular) avatar. `variant` maps to `-color-<variant>`,
`size` to `-size-<size>`, and `shape="rectangle"` to `-shape-rectangle`; slotted content is the
initials, or an `<img>` (use an absolute/CDN `src`) to show a photo.

## Example

```html
<instui-avatar size="lg" margin="small">JS</instui-avatar>
<instui-avatar shape="rectangle" variant="green" margin="small">AB</instui-avatar>
```