Introduction

Evergreen uses the amazing @blueprintjs/icons package for all of its icons.

Implementation Details

All of Evergreen's icons are exported as individual components, and can be imported directly like so:

import { CrossIcon } from 'evergreen-ui'

import { InfoSignIcon, EditIcon } from 'evergreen-ui'

Icons are not buttons

A icon is only a svg element and should not have onClick handlers. If you need a clickable icon, use IconButton instead.

Basic icon usage

jsx

<CrossIcon />

Resizing the icon

jsx

<BanCircleIcon size={40} />

Changing the color

Use the color prop on a Icon component to change the color. There are a couple of presets available: default, muted, disabled, selected, success, info, danger, warning.

jsx

<Pane>
  <BanCircleIcon color="danger" marginRight={16} />
  <TickCircleIcon color="success" marginRight={16} />
  <WarningSignIcon color="warning" marginRight={16} />
  <InfoSignIcon color="info" marginRight={16} />
  <EditIcon color="muted" marginRight={16} />
  <EditIcon color="selected" marginRight={16} />
  <EditIcon color="disabled" marginRight={16} />
</Pane>

Convenience component

There is an exported Icon component which acts as a convenient wrapper around icons so you can dynamically pass icons to it:

jsx

<Icon icon={CogIcon} size={12} />

All icons

Each icon has two different svg variations, a 16px and 20px variation. Evergreen will choose the most appropriate size based on the size passed to the icon.