# Source: https://tamagui.dev/ui/avatar.md

---
title: Avatar
description: Display aspect-fixed images with a fallback while loading
name: avatar
component: Avatar
package: avatar
demoName: Avatar
---

<HeroContainer>
  <AvatarDemo />
</HeroContainer>

```tsx hero template=Avatar

```

<Highlights
  features={[
    'Accepts size prop that stays in sync with other components.',
    'Completely control styles on every element.',
    'Automatically swaps fallback for image on load.',
  ]}
/>

## Installation

Avatar is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/avatar
```

## Usage

```tsx
import { Avatar } from 'tamagui'

export default () => (
  <Avatar circular size="$6">
    <Avatar.Image src="http://picsum.photos/200/300" />
    <Avatar.Fallback bc="red" />
  </Avatar>
)
```

## API Reference

### Avatar

Avatar extends [Square](/docs/components/shapes#shape-props), giving it all the [Tamagui standard props](/docs/intro/props) as well as `size` and `circular`.

### Avatar.Fallback

Avatar.Fallback extends [YStack](/docs/components/stacks), plus:

<PropsTable
  data={[
    {
      name: 'delayMs',
      required: false,
      type: 'number',
      description: `Milliseconds to wait before showing the fallback, to prevent flicker.`,
    },
  ]}
/>

### Avatar.Image

Avatar.Image extends [Image](/docs/components/image).