Avatar

Choose the avatar kind that best matches the identity you’re communicating. Avatars can represent an individual person or a named non-person entity such as a team, organization, or business. Person and Entity kinds use different shapes to help users quickly understand what the avatar represents.

Use kind="person" when the identity is a single individual (e.g., user profile, author, assignee, commenter).

Use up to 2 characters for Person avatars, typically the first and last name initials.

Use kind="entity" when the identity is a named non-person entity such as a team, business, organization, company, or account. Use an Entity avatar when representing the team as a single named identity.

Use up to 3 characters for Entity avatars, to support company names, codes, and shorthand identifiers.

We recommend using an image when available; You can pass an image as the avatar image using the src prop.

You can also pass a custom image or SVG as the child of the component. Note that for images passed as children, you'll also need to handle the fallback logic.

If a photo isn't available, the avatar will fall back to initials or an icon:

• You can use initials when a photo is unavailable, but profile information is.
• Use an icon when neither a photo nor profile information is available.

The color prop can be used to change Avatar's background to one of the 20 categorical colors.

Avatar can be made interactive using the render prop. See the render prop guide for the supported render forms.

Common interactive use cases include:

• Navigating to a user profile page when the avatar is clicked.
• Opening a menu with user-related actions (e.g., ‘Settings’, ‘Log out’).

• Ensure the Avatar has a meaningful accessible name so screen reader users understand what action will occur.
• Avoid using size modifiers on interactive avatars, as they can shrink the touch target and make them harder to interact with.

You can deterministically derive an avatar's color from its name so that the same person is always represented by the same categorical color. In the example below, a simple hash of the name is used to pick one of the 20 categorical colors.

You can use the size prop to modify the avatar size. Each avatar variant has a default size across all four densities, equal to the size foundation size-base: 20px (HD), 28px (MD), 36px (LD), and 44px (TD). The size property acts as a multiplier of the base size.

Avatar renders with an icon defined by UserSolidIcon when kind is person and BankIcon when kind is entity, but you can pass an alternative icon as fallbackIcon.