lightning:avatar

A visual representation of a person.

A lightning:avatar component is an image that represents a person. By default, the image renders in medium sizing with a rounded rectangle, which is also known as the square variant.

This component inherits styling from avatars in the Lightning Design System.

Here is an example.

1<aura:component>
2    <lightning:avatar src="/images/codey.jpg" alternativeText="Codey Bear"/>
3</aura:component>

Accessibility

Use the alternativeText attribute to describe the avatar, such as a user's initials or name. This description provides the value for the alt attribute in the img HTML tag.

Attributes

Attribute Name	Attribute Type	Description	Required?
`alternativeText`	String	The alternative text used to describe the avatar, which is displayed as hover text on the image.	Yes
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS class for the outer element, in addition to the component's base classes.
`size`	String	The size of the avatar. Valid values are x-small, small, medium, and large. This value defaults to medium.
`src`	String	The URL for the image.	Yes
`variant`	String	The variant changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square.

Lightning Components Developer Guide

lightning:avatar

Attributes