Icons
Icons are visual symbols that help communicate meaning, actions, and navigation throughout an interface. The Cimpress UI library provides a collection of icons as React components that can be imported from @cimpress-ui/react/icons.
import { IconAdd } from '@cimpress-ui/react/icons';
export default function Demo() { return <IconAdd />;}Icons can be sized using the size prop, which accepts 16, 24 and 32 as valid pixel sizes.
import { Stack } from '@cimpress-ui/react';import { IconAddCircleFill } from '@cimpress-ui/react/icons';
export default function Demo() { return ( <Stack gap={16} direction="horizontal" align="center"> <IconAddCircleFill size={16} /> <IconAddCircleFill size={24} /> <IconAddCircleFill size={32} /> </Stack> );}Icons can be customized with different foreground colors using the tone prop. For information about available foreground colors and their intended use, please refer to the foreground colors documentation.
base
subtle
muted
inverse
accent
info
success
warning
critical
import { Stack, Text, type ForegroundTone } from '@cimpress-ui/react';import { IconPlaceholder } from '@cimpress-ui/react/icons';
const tones: NonNullable<ForegroundTone>[] = [ 'base', 'subtle', 'muted', 'inverse', 'accent', 'info', 'success', 'warning', 'critical',];
const toneNameMaxLength = Math.max(...tones.map((tone) => tone.length));
export default function Example() { return ( <div style={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(${toneNameMaxLength}ch, 1fr))`, fontSize: 14, gap: 8, }} > {tones.map((tone) => ( <Stack key={tone} gap={8} align="center" UNSAFE_style={{ backgroundColor: tone === 'inverse' ? 'var(--cim-bg-accent)' : undefined, padding: 8, }} > <IconPlaceholder key={tone} tone={tone} size={32} /> <Text as="span" tone={tone}> {tone} </Text> </Stack> ))} </div> );}Accessibility
Section titled “Accessibility”By default, the icon components from @cimpress-ui/react/icons are treated as decorative content. This means that we set aria-hidden="true" unless certain props are passed to the component.
If you would like the icon to be announced by a screen reader, you can supply an aria-label or aria-labelledby. For example:
import { IconAdd } from '@cimpress-ui/react/icons';
function App() { return <IconAdd aria-label="Add" />;}