← All Components
Component Details
Avatar
A graphical representation of a user: usually a photo, illustration, or their initials. Often found in headers or comment sections.
Also known as: User, Profile picture, Thumbnail
AI Prompt
Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Avatar component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML (img for image avatars, div/span with aria-label for initials/icons). - Design: Clean, modern aesthetic with support for different sizes (small, medium, large) and shapes (circle, rounded square). Include fallback styles (e.g., initials or default icon) when an image fails to load. - Interaction: Include an optional notification badge or status indicator (e.g., online, offline) positioned at the bottom right or top right corner. - Accessibility: Must be fully screen reader friendly. Include appropriate alt text for images. - Provide a single HTML file containing all necessary styles and scripts.
Reference Implementations
Explore how top-tier design systems implement the Avatar:
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗
View Design System ↗