---
title: "Avatar"
description: "Avatar with sizes and variants"
source: "Equality"
---
import { AvatarDemo } from "@demo/components/demo/avatar";

## Components

### Avatar Image

<AvatarDemo client:only="react" />

### Avatar Fallback

<AvatarDemo client:only="react" variant="fallback" />

## Size Variants

### Small

<AvatarDemo client:only="react" variant="fallback" size="sm" />

### Medium (Default)

<AvatarDemo client:only="react" variant="fallback" />

### Large

<AvatarDemo client:only="react" variant="fallback" size="lg" />

### Extra Large

<AvatarDemo client:only="react" variant="fallback" size="xl" />

## Shape Variants

### Circle (Default)

<AvatarDemo client:only="react" variant="fallback" />

### Square

<AvatarDemo client:only="react" variant="fallback" shape="square" />