---
title: Avatar
description: 'Show a user’s profile image or initials in a compact, visual element.'
api_version: 2025-10
api_name: admin_extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/media/avatar
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/media/avatar.txt
---

# Avatar

Show a user’s profile image or initials in a compact, visual element.

## Properties

* alt

  string

  An alternative text that describes the avatar for the reader to understand what it is about or identify the user the avatar belongs to.

* initials

  string

  Initials to display in the avatar.

* size

  "small" | "small-200" | "base" | "large" | "large-200"

  Size of the avatar.

* src

  string

  The URL or path to the image.

  Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly

## Events

Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).

* error

  OnErrorEventHandler

* load

  CallbackEventListener\<typeof tagName> | null

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null
```

### CallbackEvent

```ts
Event & {
  currentTarget: HTMLElementTagNameMap[T];
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-avatar
    alt="John Doe"
    initials="JD"
  ></s-avatar>
  ```