Avatar

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. Props defined on the JSX element will be merged with props from the Avatar.

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, but you can pass an alternative icon as fallbackIcon.