Icon

Icons are renderable SVG elements with configurable sizing and colours.

Usage

Icon's render SVG components. Accepts a string or enum value to select which glyph to draw.

import { Icon } from '@blueprintjs/core'
 
<Icon icon="lightbulb" />

import { Icon } from '@blueprintjs/core'
import { IconNames } from "@blueprintjs/icons";
 
<Icon icon={IconNames.LIGHTBULB} />

Size

Control the size of the icon with the size property. Accepts an integer, defaults to 16.

<Icon icon="arrow-up" iconSize={32} />

Intent

The base set of intent colouring is available to override the fill colour on the SVG.

<Icon icon="info-sign" intent="warning" />

<Icon icon="info-sign" intent={Intent.WARNING} />

Colour

Control the fill colour of the SVG with the color property.

Accepts a string with HTML color code #0066CC, or RGB values rgb(30, 120, 255).

Overrides specified intent property or any base icon colouring.

<Icon icon="tree" color="#668e43" />