---
title: React Bootstrap Avatar Component
name: Avatar with Bootstrap Styling
description: 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.
route: /components/avatar/
bootstrap_component: true
---

## Image avatars

Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.

<ExampleSnippet className="theme-bootstrap" component="AvatarImage" componentName="React Bootstrap Avatar" />

## Letter avatars

Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.

<ExampleSnippet className="theme-bootstrap" component="AvatarLetter" componentName="React Bootstrap Avatar" />

## Icon avatars

Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.

<ExampleSnippet className="theme-bootstrap" component="AvatarIcon" componentName="React Bootstrap Avatar" />

## Rounded avatars

Use the `shape="rounded"` prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.

<ExampleSnippet className="theme-bootstrap" component="AvatarRounded" componentName="React Bootstrap Avatar" />

## Square avatars

To make avatars fully square with no border radius, apply `shape="rounded-0"`, matching Bootstrap’s `rounded-0` utility style.

<ExampleSnippet className="theme-bootstrap" component="AvatarSquare" componentName="React Bootstrap Avatar" />

## Sizes

Customize avatar size using the `size` prop. Available options include `xl`, `lg`, `md`, and `sm`, aligning with Bootstrap’s scalable design system.

<ExampleSnippet className="theme-bootstrap" component="AvatarSizes" componentName="React Bootstrap Avatar" />

## 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.

<ExampleSnippet className="theme-bootstrap" component="AvatarWithStatus" componentName="React Bootstrap Avatar" />

## API reference

Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.

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