1.3.0 • Published 4 months ago
@spark-web/icon v1.3.0
title: Icon
isExperimentalPackage: false
Spark uses the “outline” variants of the wonderful open-source Heroicons library.
Examples
Size
Define the icon size.
<Inline gap="large" alignY="center">
<LightBulbIcon size="xsmall" />
<LightBulbIcon size="small" />
<LightBulbIcon size="medium" />
<LightBulbIcon size="large" />
</Inline>
Tone
Define the icon tone.
<Row gap="large" dividers>
<Inline gap="large">
<LightBulbIcon tone="neutral" />
<LightBulbIcon tone="muted" />
</Inline>
<Inline gap="large">
<LightBulbIcon tone="info" />
<LightBulbIcon tone="positive" />
<LightBulbIcon tone="caution" />
<LightBulbIcon tone="critical" />
<LightBulbIcon tone="accent" />
</Inline>
</Row>
Contrast
To ensure icons have sufficient contrast, when on a dark background the foreground tones “neutral” and “muted” will be inverted.
<Inline gap="large">
<Box background="neutral" padding="small" borderRadius="small">
<LightBulbIcon tone="neutral" />
</Box>
<Box background="neutral" padding="small" borderRadius="small">
<LightBulbIcon tone="muted" />
</Box>
</Inline>