Icon
Icons are renderable SVG elements with configurable sizing and colours.
![Screenshot of component Icon basic](/static/d7ec5b7516fe2f1af93f5550cab3d5fe/Icon-basic-desktop.png)
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
.
![Screenshot of component Icon with-sizes](/static/8fdec80b6608aa157545f6190cc30727/Icon-with-sizes-desktop.png)
<Icon icon ="arrow-up" iconSize ={32} />
Intent
The base set of intent colouring is available to override the fill colour on the SVG.
![Screenshot of component Icon with-intent](/static/0b44820b2a68f6c9ff55bbcda58d2f72/Icon-with-intent-desktop.png)
<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.
![Screenshot of component Icon with-custom-colour](/static/620943b725d207f61f98b1c692dff4e6/Icon-with-custom-colour-desktop.png)
<Icon icon ="tree" color ="#668e43" />