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';

<Icon icon={iconSettings} />

Size

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

The default size is small.

<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.

<Box flexDirection="column">
  <Icon icon={iconLightBulb} color="danger.base" />
  <Icon icon={iconHeartOutlined} color="warning.base" />
  <Icon icon={iconHeartFilled} color="success.base" />
</Box>

React Native

Icon takes a named size (tiny, small, medium — the default, large, huge) via the size prop, not a numeric pixel value. Use dimmed for the deemphasized color variant instead of a manual color override.

Common Mistakes

• If you wrap Icon in your own styled() component to pass through extra style props, export the wrapper via .styleable() — without it, Tamagui can't forward incoming style/variant props into the wrapped component and they silently don't apply.