Use the Avatar component to display the user's profile photo or some default placeholder.


Import the Avatar component from @avocado-ui/react and render with the required name prop.


The Avatar component throws an error when the name prop is not specified. It is required because it will be used for the title and alt of the image.

Multiple Avatars

To render multiple Avatar components, wrap them in an AvatarGroup component from @avocado-ui/react. There might be inconsistencies in rendering if you don't put multiple Avatars in the AvatarGroup



Avatar comes in the following sizes - xs, sm, md, lg and xl. Use the size prop to specify the preferred size



The default Avatar comes in a round shape. You might want to customize it by setting the shape prop to either round, curve, or square.


Image Source

Most avatars show profile images. If you pass a URI to an image to the src prop, Avatar will render an the image. The src can also be a link to an image on the internet.

Victor Ofoegbu


The Avatar component shows the value of name prop when you hover on it. If the alt prop is not specified, the value of the name prop is used instead. In cases where the icon prop is provided, the role="img" is provided so screen readers can callout the element as an image.

Background Color

The default primary color looks cool as the background for avatars. But you can change it by specifying a valid color value to the color prop.



You can render an Icon instead of an actual profile image. Provide an icon element to the icon prop and the Avatar component will handle the rest. I make use of Icons from react-feather in this example.


Props Table

sizesize of buttonxs, sm, md,lg, numbermd
shapeshape of buttonround, square,curveround
altText to read out to screen readers. If not available, the value of the name is usedstring
nameName to show if image is not availablestring
srcSource for avatar imagestring
colorcolor of avatar background when src is not specifiedstring
iconicon to show when the src prop is not providedReact.ReactNode