Display user profile images with automatic fallback to initials. Supports multiple sizes and RTL text direction for initials.
Preview
CN
Installation
Usage
Examples
With Fallback
CNJDAB
Different Sizes
CNCNCNCN
Avatar Group
CNVCAB+3
RTL Support Example
The Avatar component automatically adapts to RTL layouts. Avatar groups respect reading direction and overlapping order follows text direction.
LTR (English)
JD
Nuno Marques
ositaka@example.com
CNVCAB+5
RTL (العربية)
JD
Nuno Marques
ositaka@example.com
CNVCAB+5
Props
| Name | Type | Default | Description |
|---|---|---|---|
src | string | undefined | The image source URL |
alt | string | undefined | Alternative text for the image |
Accessibility
Image Alt Text
- Always provide descriptive alt text for avatar images
- Use user names or entity identifiers in alt text
- Fallback content is automatically accessible
ARIA Attributes
- Image has alt attribute for screen readers
- Fallback is rendered as text content
- Avatar is treated as decorative in most contexts
RTL Considerations
The Avatar component is fully RTL-compatible with proper layout handling.
- Avatar groups respect reading direction
- Overlapping order follows text direction in groups
- Fallback text displays correctly in all directions
- Image positioning remains centered
Use Cases
User profile displays
Comment and chat avatars
Team member listings
Navigation and user menus
Best Practices
Do
- ✓ Always provide a fallback (initials or icon) for missing images
- ✓ Use consistent sizes within the same context
- ✓ Include alt text for screen readers
Don't
- ✗ Don't use Avatar for decorative images — use img directly
- ✗ Don't mix avatar sizes in the same list
- ✗ Don't crop important content with the circular mask