Avatar

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

Example of an avatar

Default avatars 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 default avatars depends on where they’re used and how much information is included.

For example, the size of a default avatar used in the navigation needs to be smaller than a default avatar used in a bigger layout with more space. The maximum size of a default avatar is 64px, so be mindful of the amount of text that’s included next to it.

Text positioning

Text is positioned to the right or centered below a default avatar.

Example of text positioned to the right of the avatar image

Attribution or descriptor text is vertically-aligned

Example text positioned below the avatar image

Attribution or descriptor text is horizontally-aligned


Default avatars are subtle placeholder graphics used in the absence of photos or images. When a user doesn’t provide their own photo or image, a default avatar is used instead.

Text options

Text options can be placed to the right or under a default avatar. For example, someone’s name can be placed on one line and their job information on the second line. Always group a default 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.

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

Layout

Default avatars 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 avatar components aligned horizontally

Default avatars shouldn’t be used without text unless absolutely necessary in the right context, like in the navigation.

Two avatar images placed side-by-side

Don’t use a dark theme default avatar in the light theme.

Light theme avatar placed in dark theme

Don’t include job information on the same line as a name, break it to the second line.

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

Don’t allow vertically-aligned attribution or a descriptor become too compressed, otherwise change to horizontally-aligned.

Default avatar with a descriptor and attribution that wraps to 4 lines

Vertical vs. top alignment

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

Avatar with short text, vertically aligned

Attribution or descriptor text vertically-aligned

Avatar with longer text aligned to the top

Attribution or descriptor text aligned to the top edge

Responsive design

Default avatars can be used with text on desktop and mobile. If text that’s positioned on the right becomes too compressed, it will flow under and its alignment will change to centered. On mobile, default avatars 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.


Default avatars use PatternFly 4 spacers to define spacing values between the avatar and text.

Avatar with short text, vertically aligned
Avatar with longer text aligned to the top

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.