Icon

Display an icon using system colors and sizing.

React

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

import { Icon } from '@hoverinc/design-system-react-web';

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={iconBattery} size="tiny" />
  <Icon icon={iconBattery} size="small" />
  <Icon icon={iconBattery} size="medium" />
  <Icon icon={iconBattery} size="large" />
  <Icon icon={iconBattery} 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={iconLightBulb} color="danger.base" />
  <Icon icon={iconHeartOutlined} color="warning.base" />
  <Icon icon={iconHeart} 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={iconExternalLink} />
  </Link>
</Stack>

Heading

IconButton