Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Avatar

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleVariantsColor schemeConfigurationSpaceInteraction statesStyleVariantsColor schemeConfigurationSpaceInteraction states

Style

An avatar is a placeholder graphic, custom photo, or generated image. It can be used by itself, but it is often paired with text about the user like their full name, job title, company, etc.

Anatomy of an avatar group with numbered annotations. The first number points to the image, the second points to the avatar's text description.
  1. Avatar
  2. Attribution text

Variants

The Default variant is visible when a user has not uploaded a custom image (like a photo). Once they do, what they provided replaces the gray thumbnail. If they choose not to, a colored pattern will be generated instead based on their name. A specific name is linked to the same pattern, so thumbnails can stay static without storing lots of generated images.

Three avatars. One with a gray placeholder generic icon, one with a generated pattern, and one with a profile image of a person, each with descriptions.

Plain

The avatar thumbnail can be used on its own in places like accordions, cards, navigations, tables, and more.

A row of three avatar images without accompanying descriptions

Border

An avatar may also include a border for extra visual prominence or if it is used on non-white backgrounds.

A row of three avatar images with borders on a gray background without accompanying descriptions

Links may be applied to full name or job details text.

Two avatar groups; one has the full name linked and the other has the company name linked

Color scheme

All avatar variants are available for both light and dark color schemes.

Light scheme

A light scheme avatar group with three avatars and accompanying descriptions.

Dark scheme

A dark scheme avatar group with three avatars and accompanying descriptions.

Configuration

If you choose to include text near an avatar, there are specific styles.

Property Token or Style
Font weight - full name --rh-font-weight-body-text-medium
Font weight - job title --rh-font-weight-body-text-regular
Font style - company name Italic

Space

Avatars have 16 pixels of space between the image and the description text.

Interaction states

Go to the Interactions section to learn about inline link interaction states.

Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify