Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Shape
      • Size
      • Status
      • Type
    • How to use it well
      • Select the right shape for the job
    • Configuration
    • API
      • Avatar

    Avatar

    An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.

    Table of Contents
    • How to use it
      • Shape
      • Size
      • Status
      • Type
    • How to use it well
      • Select the right shape for the job
    • Configuration
    • API
      • Avatar
    Used for this
    • To visually represent a person, brand, or product

    How to use it

    Shape

    An Avatar can be a circle or rounded square. See which shape to use.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Size

    You have 5 sizes to choose from. The default size is medium.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Status

    A colored ring outside the Avatar indicates a user’s status. The options are away, available, or active.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Type

    An Avatar can contain an icon, an image, or text.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    How to use it well

    Select the right shape for the job

    Use circles to represent people and rounded squares for objects, brands, or products. This helps a user distinguish between the two when scanning a page.

    Do this

    Use a circular Avatar for people.

    Do this

    Use a rounded square Avatar for objects, brands, or Zendesk products.

    Configuration

    • Name9.5.1•View source•View on npm
    • Installnpm install @zendeskgarden/react-avatars
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Avatar } from '@zendeskgarden/react-avatars'

    API

    The Avatar component follows this structure:

    <Avatar>  {/* One of icon, img, or Avatar.Text */}</Avatar>

    Avatar

    Extends HTMLAttributes<HTMLElement>

    Prop nameTypeDefaultDescription
    backgroundColor
    		string

    Sets the avatar background color. Accepts a color variable key (i.e. background.emphasis) to render based on light/dark mode, or any hex value.

    badge
    		string | number

    Sets the badge text and applies active styling

    foregroundColor
    		string

    Sets the color for child SVG or Avatar.Text components. Accepts a color variable key (i.e. foreground.onEmphasis) to render based on light/dark mode, or any hex value.

    isSystem
    		boolean

    Applies system styling for representing objects, brands, or products

    size
    		'extraextrasmall' | 'extrasmall' | 'small' | 'medium' | 'large'
    'medium'

    Specifies the avatar size

    status
    		'available' | 'away' | 'transfers' | 'offline'

    Applies status styling

    statusLabel
    		string

    Specifies the status label

    surfaceColor
    		string

    Provides surface color for an avatar placed on a non-default background. Accepts a color variable key (i.e. background.subtle) to render based on light/dark mode, or any hex value.

    Avatar.Text

    Extends HTMLAttributes<HTMLSpanElement>

    The Text component applies appropriate styles to child text. Nest it within an Avatar component. See type example.

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025