Avatar

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

OverviewPropertiesUsage

When to use

• To display a visual representation of a user, such as a profile picture, initials, or a placeholder icon.

When not to use

• When displaying multiple users in a compact row. Use AvatarGroup instead.

Content guidelines

General

• Capitalize both initials.
• Don't use periods or other punctuation in the name.
• Include only the user's name when using a tooltip with an avatar. Don't add unnecessary content.
• A common subtitle for the avatar is a lowercase email address. If the subtitle is a description, use sentence case. End any sentences with periods.
• The avatar should display the first letters of a user's first and last name as the initials.