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
      • Color
      • Palette
      • Icons
        • Overview
        • Library
        • Chrome icons
    Table of Contents
    • Usage
    • Best practices
    • Installation

    Icon overview

    Table of Contents
    • Usage
    • Best practices
    • Installation
    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Usage

    Garden’s icon library is implemented using SVG. Icons come two sizes: 12px and 16px. The 16px icons can also be doubled to create 32px icons.

    Styles

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

    Icons also come in two styles: stroke and fill. While stroke icons are the default icons to use, fill icons are used to show selected states.

    12px and 16px

    The default size is 16px, and should be used for the majority of cases. In certain instances where 16px icons will break the line height or will not fit in a small space, 12px icons should be used.

    Do this

    16px is the default icon size. Use 16px icons where possible.

    Do this

    Use 12px icons for compact spaces where 16px icons can’t fit.

    32px

    32px icons are the scaled-up versions 16px icons. They are used for illustration only.

    Do this

    Use 32px icons for illustration.

    Not this

    Don’t use 32px icons for interactions.

    Best practices

    Include tooltips for interactive icons

    Do this

    Use tooltips to clearly label interactive icons for accessibility.

    Installation

    View the zendeskgarden/svg-icons repository for implementation instructions.

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