Avatar
Last updated
What is Avatar?
Avatars are used to show a thumbnail of a user photo or a visual representation of any other type of content.
- Image: Avatars should mask an image into their shape and work with any image size since they may get this image from unknown data sources.
- Image Fallback: There should be fallbacks when there’s no image available. This can be done with placeholder images or initials.
- Accessibility: Always provide a description for screen readers describing what’s displayed on the avatar image instead of just naming its role.
- Sizes: There are many contexts to use avatars and they all require different sizes for the component. For average projects use at least 2-3 different sizes and make sure there’s at least a small size available.
- Icon: Avatars can be used with an icon instead of an image to emphasize areas that don’t necessarily have (or need) an image associated with it.
- Background Colors: When used with icons or text, there has to be a background colour from the design system colour tokens applied to the avatar shape. Make sure that icons and text have enough contrast ratio with the background according to the WCAG AA standard.
More in stage 9: Project Management
- Project Management
- Input Text
- Banner
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- Card
- List
- Carousel
- Loading Indicator
- Dropdown
- Modal
- Icon
- Tabs
- Select
- Toast
- Textarea
- Tooltip
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Avatar: common questions
Can I learn Avatar in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Avatar in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Avatar tutorial for beginners?
It is lesson 84 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.