Skip to content

Primer Design System

Main navigation navigation

Avatar

Use the avatar component to display a thumbnail representation of a person.

An image showing two different avatars, a circular and a square one.

Usage

Use avatars to display a thumbnail that represents individuals in various contexts, such as testimonials, speaker sessions, blog post authors, and beyond.

Options

Size

Avatar offers various sizes to fit different layout and visual scale needs. Sizes range from 32 to 80 pixels. Ensure the avatar is proportionate to its accompanying text.

An image showing the size scale of the avatar component: 32, 40, 48, 64, and 80 pixels

Shape

Avatars appear as two different shapes: circle and square. The choice depends on the desired visual impression and the overall design aesthetic of your project.

An image showing the two different shapes of the avatar component: circle and square