Calcite Icons

Icons as React Components

Calcite includes an iconset known as Calcite UI Icons. To make these icons easier to use in React, we use a library (calcite-ui-icons-react) that creates React components from the SVG icons.

Installation

To use these icons, you must install the calcite-ui-icons-react package:

xxxxxxxxxx

npm i calcite-ui-icons-react

Basic Usage

Importing Icons

The name of the React component you will import is simply the icon name in PascalCase suffixed with Icon.

xxxxxxxxxx

/* layer-basemap becomes LayerBasemapIcon */

import LayerBasemapIcon from 'calcite-ui-icons-react/LayerBasemapIcon';

​

<LayerBasemapIcon />;

Size

The icons take an optional size prop to adjust the rendered size of the icon. Calcite UI Icons has three unique SVGs for varying sizes for every icon, and we automatically select an icon for you based on the size you specify.

<LayerBasemapIcon size={16} />

<LayerBasemapIcon size={24} />

<LayerBasemapIcon size={32} />

<LayerBasemapIcon size={64} />

Color

All icons accept a color prop, which will be applied to the fill attribute on the svg element. This means any valid CSS color value can be used (e.g. "red", "#e34f2c", "rgba(255, 0, 0, 0.5)"). If a color prop is not found, we will set it to "currentColor".

<GlobeIcon color="red" />

<GlobeIcon color="#1d5d8c" />

<GlobeIcon color="rgba(155, 30, 95, 0.5)" />

Gotchas

Since JavaScript variables cannot start with a number, we convert any icon name that begins with a number so that the word (or words, in PascalCase) are used instead.

Currently, there are only two such cases:

Playground