Design System · Documentation → Components → Pictogram

React

Pass a pictogram from the @hoverinc/icons package to the pictogram prop.

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

live

<Pictogram pictogram={pictogramCabinets} />

Size

Pictograms are currently only available in a single size, default.

live

<Box flexDirection="column">
  <Pictogram pictogram={pictogramCabinets} size="default" />
</Box>

Color

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

live

<Box flexDirection="column">
  <Pictogram pictogram={pictogramDecking} color="danger.base" />
  <Pictogram pictogram={pictogramDoors} color="warning.base" />
  <Pictogram pictogram={pictogramFurniture} color="success.base" />
</Box>

Modal

PinInput