Avatar

An Avatar is a placeholder graphic for a photo or an image that is placed to the left or on top of text.

Example of an avatar

View a live version of this component and see how it can be customized.

View the PatternFly Elements component

An avatar can be used in light and dark themes. They feature a circular silhouette icon and are always grouped with text, like attribution or some kind of descriptor.

Anatomy of an avatar
Example of an avatar used in a light theme
Example of an avatar used in a dark theme

Size

The size of an avatar depends on where they are used and how much information is included. For example, the size of an avatar used in the navigation needs to be smaller than an avatar used in a bigger layout with more space. The maximum size of an avatar is 64px, so be mindful of the amount of text that is included next to it.

Text positioning

Text is positioned to the right or centered below an avatar.

Example of text positioned to the right of an avatar

Attribution or descriptor text is vertically-aligned

Example text positioned below an avatar

Attribution or descriptor text is horizontally-aligned

An avatar is a subtle placeholder graphic used in the absence of a photo or image. When a user does not provide their own photo or image, an avatar is used instead.

Text options

Text options can be placed to the right or under an avatar. For example, a name can be placed on one line and their job information on the second line. Always group an avatar with text, attribution, or some other kind of descriptor text. Never use it by itself, unless absolutely necessary in the right context, like in the navigation.

An avatar in a light theme with text placed to the right
An avatar in a dark theme with text placed below the image

Layout

An avatar can be used in containers or layouts. They can be stacked vertically (or horizontally) depending on the amount of people and the container size.

Example of two avatars aligned horizontally

An avatar should not be used without text unless absolutely necessary in the right context, like in the navigation.

Two avatars placed side-by-side

Do not use a dark theme avatar in the light theme.

A light theme avatar placed in dark theme

Do not include job information on the same line as a name, break it to the second line.

Example of an avatar with job information and name on the same line

Do not allow vertically-aligned attribution or a descriptor become too compressed, otherwise change to horizontal alignment.

An avatar with a descriptor and attribution that wraps to four lines

Vertical vs. top alignment

If the height of text exceeds the height of an avatar, it becomes aligned to the top edge instead.

An avatar with short text, vertically aligned

Attribution or descriptor text vertically-aligned

An avatar with longer text aligned to the top

Attribution or descriptor text aligned to the top edge

Responsive design

An avatar can be used with text on desktop and mobile. If text that is positioned on the right becomes too compressed, it will flow under and its alignment will change to centered. On mobile, an avatar with text always stack vertically.

Sometimes a company name in attribution text can link out to their website. Refer to the specific interaction states that are assigned to Link for more information. Otherwise, there are no other interaction states.

An avatar uses PatternFly 4 spacers to define spacing values between the avatar and text.

An avatar with short text, vertically aligned
An avatar with longer text aligned to the top

To give feedback about anything on this page, contact us.

To learn how to use our other components in your designs, visit the Components section.