Icon

Display an icon using system colors and sizing

Figma

React

Bootstrap

Native

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>