Pictogram

Display larger iconography, called pictograms, using system colors and sizing

React

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

import { Pictogram } from '@hoverinc/design-system-react-web';
<Pictogram pictogram={pictogramCabinets} />

Size

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

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

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