Blueprint

GuidesFoundationComponentsReleases
⌘K

Icon

Display an icon using system colors and sizing

React

Pass an icon from the @hover/icons package to the icon prop.


import { Icon } from '@hover/blueprint';

live

<Icon icon={iSettings} />

Size

Icons are available in a handful of sizes which include a standard margin around the icon by default.

The default size is small.

live

<Box flexDirection="column">
<Icon icon={iPackage} size="tiny" />
<Icon icon={iPackage} size="small" />
<Icon icon={iPackage} size="medium" />
<Icon icon={iPackage} size="large" />
<Icon icon={iPackage} size="huge" />
</Box>

Color

Pass any system color to the color prop to control the color of the icon.

live

<Box flexDirection="column">
<Icon icon={iFrown} color="danger.base" />
<Icon icon={iMeh} color="warning.base" />
<Icon icon={iSmile} color="success.base" />
</Box>

Accent

Some icons support a a secondary accent color in addition to the primary icon color.

live

<Box flexDirection="column">
<Icon icon={hBellyBand} color="neutral.600" accent="primary.700" size="huge" />
</Box>

Inline

Pass isInline to remove the default margin and set display to inline.

live

<Stack>
<Link href="#inline">Link <Icon icon={iExternalLink} /></Link>
</Stack>