---
title: Avatar
description: An image representing a user, group, or organization.
links:
  doc: https://base-ui.com/react/components/avatar
  anatomy: https://base-ui.com/react/components/avatar#anatomy
  api: https://base-ui.com/react/components/avatar#api-reference
---

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
      <AvatarFallback>ZM</AvatarFallback>
    </Avatar>
  );
}
```

## Installation

<ComponentSource name="avatar" title="components/ui/avatar.tsx" />

## Usage

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
```

```tsx
<Avatar>
  <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
  <AvatarFallback>ZM</AvatarFallback>
</Avatar>
```

## Examples

### Sizes

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export function AvatarDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Avatar size="sm">
        <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
        <AvatarFallback>ZM</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
        <AvatarFallback>ZM</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
        <AvatarFallback>ZM</AvatarFallback>
      </Avatar>
    </div>
  );
}
```

### With badge

```tsx
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
      <AvatarFallback>ZM</AvatarFallback>
      <AvatarBadge className="bg-green-600 dark:bg-green-500" />
    </Avatar>
  );
}
```

### With badge icon

```tsx
import { IconPlus } from "@tabler/icons-react";

import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
      <AvatarFallback>ZM</AvatarFallback>
      <AvatarBadge>
        <IconPlus />
      </AvatarBadge>
    </Avatar>
  );
}
```

### With group

```tsx
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/ui/avatar";

export function AvatarDemo() {
  return (
    <AvatarGroup>
      <Avatar>
        <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
        <AvatarFallback>ZM</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/learnwithsumit.png" alt="Learn with Sumit" />
        <AvatarFallback>LS</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  );
}
```

### With group and count

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";

export function AvatarDemo() {
  return (
    <AvatarGroup>
      <Avatar>
        <AvatarImage src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" />
        <AvatarFallback>ZM</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/learnwithsumit.png" alt="Learn with Sumit" />
        <AvatarFallback>LS</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>+3</AvatarGroupCount>
    </AvatarGroup>
  );
}
```

### With Next.js Image

```tsx
import Image from "next/image";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage
        src="https://github.com/zbmzubayer.png"
        alt="ZBM Zubayer"
        render={
          <Image src="https://github.com/zbmzubayer.png" alt="ZBM Zubayer" width={40} height={40} />
        }
      />
      <AvatarFallback>ZM</AvatarFallback>
    </Avatar>
  );
}
```

## API Reference

### Avatar props

<ApiReferenceAccordion
  type={{
    size: {
      description: "The size of the avatar.",
      type: "'sm' | 'default' | 'lg'",
      default: `'default'`,
    },
  }}
/>