React Avatar Component
Avatar
Limited offer ends 1st January 2025, use code 2024XMAS25 during checkout.
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.
Other Frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
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.
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.
Square avatars#
Use the shape="rounded-0" prop to make react avatars squared.
Sizes#
Fancy larger or smaller react avatar component? Add size="xl", size="lg", size="md" or size="sm" for additional sizes.
Avatars with status#
Add a status indicator to avatars using the status property to show online or offline status.
API#
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.