React Avatar Component

Avatar

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.

Available in Other JavaScript Frameworks

CoreUI React Avatar Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

Image avatars#

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

Letter avatars#

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

CUI

Icons avatars#

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

Rounded avatars#

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

CUI

Square avatars#

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

CUI

Sizes#

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

CUI

Avatars with status#

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

CUI

API#

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

<CAvatar />