Icons are renderable SVG elements with configurable sizing and colours.

Screenshot of component Icon basic


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} />


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

Screenshot of component Icon with-sizes
<Icon icon="arrow-up" iconSize={32} />


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

Screenshot of component Icon with-intent
<Icon icon="info-sign" intent="warning" />
<Icon icon="info-sign" intent={Intent.WARNING} />


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.

Screenshot of component Icon with-custom-colour
<Icon icon="tree" color="#668e43" />