Avatar

Use the Avatar to display a visual representation of a user, showing their profile picture, initials, or a placeholder icon.

OverviewPropertiesUsageChangelog

When to use

• To visually represent a single user, for example, next to their name in a comment, assignment, or activity entry.
• To show ownership or responsibility, such as the creator of a document or the assignee of a task.
• As a compact identity marker in dense layouts like tables, lists, or menu items. Use the small size in these cases.

When not to use

• To represent entities such as objects, hosts, or services. Use the corresponding functional icon instead.
• To represent an app, for example, in ready-made documents. Use the corresponding app icon instead.
• To display several users together in a limited space. Use AvatarGroup instead.

Content guidelines

1. Initials (required)
2. Label (optional)
3. Subtitle (optional)
4. Tooltip (optional, when there's no label)

Initials

• Display the first letters of a user's first and last name. Put the first name initial first and the last name initial second.
• If you use the small variant of the component, such as in a table or list, show only the first name initial.
• Always capitalize the initials.

Label

• Don't use periods or other punctuation in the name.

Subtitle

• A common subtitle for the avatar is an email address, in lowercase.
• If the subtitle is a description, use sentence case. End any sentences with periods.

Tooltip

• Use a tooltip when the Avatar has no label, so users can identify the person.
• Only include the user's name in it.