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
UsageSizesWriting contentLayoutResponsive designBest practicesUsageSizesWriting contentLayoutResponsive designBest practices

Usage

The avatar thumbnail is commonly used to represent a user in a masthead or navigation. However, depending on other use cases and needs, there is more room for customization.

Sizes

The avatar thumbnail can be used at different sizes based on our design tokens. The default size is 64px.

Nine different avatar thumbnail sizes ranging from very small to large.

Writing content

Separate each part of the job title and company name with a comma.

Three avatars with profile images and description text ranging from short to long.

Layout

Alignment

The avatar thumbnail and job details text can be horizontally or vertically centered.

Two avatar groups; one is horizontally centered and the other is vertically centered

Responsive design

Large screens

Two avatar groups used on large breakpoints; one is aligned left and the other is aligned in the center

Small breakpoints

Two avatars on small breakpoints; One is left aligned and one is center aligned (image and description).

Line breaks

As screens or containers get smaller, text is still anchored to the top.

Two avatar groups with design specs overlayed; one has two lines and the other has five lines

Best practices

Thumbnail shape

Default avatar thumbnail in a circle next to 'Ada Lovelace, Computer programmer' text

Keep the thumbnail in a circle.

 Default avatar thumbnail in a square next to 'Ada Lovelace, Computer programmer' text

Do not change the shape of the avatar thumbnail.

Thumbnail theme

Light theme avatar against light theme background and dark theme avatar against dark theme background

Use the right avatar thumbnail for the theme.

 Dark theme avatar against light theme background and light theme avatar against dark theme background

Do not use a light theme avatar thumbnail in the dark theme and vice versa.

Icon vs. avatar thumbnail

Avatar thumbnail above the text 'You are logged in as Ada Lovelace'

Use an avatar thumbnail to represent an authenticated user.

 Avatar thumbnail above the text 'Login'

Do not use an avatar thumbnail when an icon is more suitable.
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify