Avatar
Avatar is a graphical element which you can use to represent a person, group, entity or communication channel.
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 is not 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.
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.
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 is not 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.
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.
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 is not 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.
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.