Best practices
Avatars should be used consistently within a given context. Avoid mixing different sizes or types in the same group unless there is a clear hierarchy or functional reason.
Use the smallest size that still allows the person to be recognisable in context. Don't use Avatar as a substitute for a person's name when their identity is important to understanding the content.
When to use
Use Avatar when representing a person in contexts such as:
- Author or contributor information
- User profiles
- Teams or groups
- Comments or other user-generated content
When not to use
Don't use Avatar as a decorative image or for general imagery.
Variants
Initials
Uses the person's initials when no image is available. Available in default and inverted styles.
Image
Uses the person's initials when no image is available. Available in default and inverted styles.
Identicon
Uses a generated visual identity when no image or initials are available. Available in default and inverted styles.
Content guidelines
Use the person's initials for the Initials variant. Keep them to a maximum of two characters. Use the Image variant when a suitable profile image is available.
Do
- Use a suitable profile image when available
- Use initials as a fallback when appropriate
- Keep initials to one or two characters
- Use inverted variants when required by the surrounding context
Don’t
- Use Avatar for decorative imagery
- Use more than two initials
- Mix variants without a clear reason
Accessibility
When the Avatar represents a person, the person's name should be available to assistive technologies. If the name is already provided as visible text, the Avatar image can be treated as decorative.