# React Avatar Component
> 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.
## Image avatars
Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarImage = () => {
return (
<>
)
}
```
## Letter avatars
Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
An avatar without a `color` stays neutral; with one, the background takes the theme color and the letters take the color that reads on it.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarLetter = () => {
return (
<>
CUICUICUICUI
)
}
```
## Subtle avatars
_Added in 6.0.0._
Use `variant="subtle"` for a tinted avatar that keeps the theme color in the text rather than the background.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarSubtle = () => {
return (
<>
CUI
CUI
CUI
CUI
CUI
CUI
)
}
```
## Icons avatars
Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarIcon = () => {
return (
<>
)
}
```
## Rounded avatars
Use the `shape="rounded"` prop to make React avatars squared with rounded corners.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarRounded = () => {
return (
<>
CUI
CUI
CUI
)
}
```
## Square avatars
Use the `shape="rounded-0"` prop to make React avatars squared.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarSquare = () => {
return (
<>
CUI
CUI
CUI
)
}
```
## Sizes
Fancy larger or smaller React avatar component? Add `size="xl"`, `size="lg"`, `size="md"`, `size="sm"` or `size="xs"` for additional sizes. The status indicator scales with the avatar, so it stays proportional at every size.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarSizes = () => {
return (
<>
CUI
CUI
CUI
CUI
CUI
)
}
```
## Stacked avatars
Display multiple avatars in a stack to represent a group of users or items, with an additional count if there are more avatars than can be displayed. Each avatar in a stack wears a ring in the page background color, so overlapping photos stay separated in both color schemes.
```html
import React from 'react'
import { CAvatar, CAvatarStack } from '@coreui/react'
export const AvatarStack = () => {
return (
+2
)
}
```
Size the whole stack at once with the `size` property on ``, and tune the overlap with `--cui-avatar-stack-spacing` — the fraction of the avatar size each one is pulled over its neighbour:
```html
import React from 'react'
import { CAvatar, CAvatarStack } from '@coreui/react'
export const AvatarStackSizing = () => {
return (
)
}
```
## Avatars with status
Add a status indicator with the `status` property to show presence. The indicator takes its color from the matching `theme-*` class; `status="secondary"` reads as offline.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarWithStatus = () => {
return (
CUI
CUI
CUI
)
}
```
The indicator is a few pixels of color and nothing else, so color is the only thing separating one state from another — not enough on its own, and at this size a different shape would not help either. Where the state means something rather than decorates, name it with `ariaStatusLabel`:
```jsx
CUI
```
That renders `role="img"` alongside the label, which is what makes the name stick: `aria-label` on a bare `` has no role to attach to, and assistive technology is free to ignore it. Without the property the indicator stays decorative.
The ring around the indicator follows the page background through `--cui-avatar-status-border-color`, so it stays correct in dark mode.
## API
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
- [<CAvatar />](./api/#cavatar)