---
title: Avatar
description: >-
  A component used for displaying user avatars, with image support and fallback
  initials for when the image fails to load.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/avatar'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/avatar.md'
---

# Avatar

A component used for displaying user avatars, with image support and fallback initials for when the image fails to load. For full props documentation, see [Radix Avatar](https://www.radix-ui.com/primitives/docs/components/avatar).

Examples

## Preview

![avatar](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Avatar-DFKULvt_.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {Avatar, AvatarFallback, AvatarImage} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Avatar>
        <AvatarImage src="https://example.com/avatar.png" alt="my-avatar" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    )
  }
  ```

***