Skip to main content
Table of Contents

Icon overview

Table of Contents

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

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.