Blueprint

Pictogram

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

React

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


import { Pictogram } from '@hover/blueprint';

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>


Copyright © 2024 Hover Inc. All Rights Reserved.