@spark-web/icon

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>

Props