Avatar
Below are code examples demonstrating different ways to use the Avatar component—including image-based avatars, initials, icons, sizing variations, and custom styling. These implementations showcase the flexibility and adaptability of the component across various interface needs.
The Avatar component offers a flexible visual representation of users or entities, supporting profile images, initials, icons, and customizable styles.
Avatar Implementation Variants
Image Avatar
Display user profile images.
Initials Avatar
Use initials when an image is unavailable.
JD
Icon Avatar
Use icons for generic representation.
Sized Avatars
Adjust avatar sizes to fit various contexts.
Custom Styling
Apply custom styles using the sx prop.
S
