---
title: React Avatar Component
name: Avatar
description: The React Avatar component is used to display circular user profile pictures. React avatars can portray people or objects and support images, icons, or letters.
route: /components/avatar/
other_frameworks: avatar
---

## Image avatars

Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.

<ExampleSnippet component="AvatarImage" componentName="React Avatar" />

## Letter avatars

Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.

<ExampleSnippet component="AvatarLetter" componentName="React Avatar" />

## Icons avatars 

Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).

<ExampleSnippet component="AvatarIcon" componentName="React Avatar" />

## Rounded avatars

Use the `shape="rounded"` prop to make react avatars squared with rounded corners.

<ExampleSnippet component="AvatarRounded" componentName="React Avatar" />

## Square avatars

Use the `shape="rounded-0"` prop to make react avatars squared.

<ExampleSnippet component="AvatarSquare" componentName="React Avatar" />

## Sizes

Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.

<ExampleSnippet component="AvatarSizes" componentName="React Avatar" />

## Avatars with status

Add a status indicator to avatars using the `status` property to show online or offline status.

<ExampleSnippet component="AvatarWithStatus" componentName="React Avatar" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CAvatar /&gt;](./api/#cavatar)

