# React Bootstrap Avatar Component
> Learn how to use CoreUI’s React Avatar component styled with Bootstrap to display profile images, icons, initials, and status indicators in a consistent and responsive design.
## Image avatars
Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarImage = () => {
return (
<>
)
}
```
## Letter avatars
Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarLetter = () => {
return (
<>
CUI
CUI
CUI
)
}
```
## Icon avatars
Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarIcon = () => {
return (
<>
)
}
```
## Rounded avatars
Use the `shape="rounded"` prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarRounded = () => {
return (
<>
CUI
CUI
CUI
)
}
```
## Square avatars
To make avatars fully square with no border radius, apply `shape="rounded-0"`, matching Bootstrap’s `rounded-0` utility style.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarSquare = () => {
return (
<>
CUI
CUI
CUI
)
}
```
## Sizes
Customize avatar size using the `size` prop. Available options include `xl`, `lg`, `md`, and `sm`, aligning with Bootstrap’s scalable design system.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarSizes = () => {
return (
<>
CUI
CUI
CUI
CUI
CUI
)
}
```
## Avatars with status
Add a small status indicator (e.g. online, offline) to avatars using the `status` prop — useful for chat interfaces or user dashboards.
```html
import React from 'react'
import { CAvatar } from '@coreui/react'
export const AvatarWithStatus = () => {
return (
<>
CUI
)
}
```
## API reference
Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.
- [<CAvatar />](../api/#cavatar)