v1.2.2

Icon

Stable

This component is considered stable. Reach out to the Spark team to find out more about what this means.

Edit this page

Installation

Install yarn add @spark-web/icon

npm @spark-web/icon

Source GitHub.com

Bundle unpkg.com

Spark uses the “outline” variants of the wonderful open-source Heroicons library.

Examples

Size

Define the icon size.

Open in Playroom

<Inline gap="large" alignY="center">
  <LightBulbIcon size="xsmall" />
  <LightBulbIcon size="small" />
  <LightBulbIcon size="medium" />
  <LightBulbIcon size="large" />
</Inline>

<Inline gap="large" alignY="center">
  <LightBulbIcon size="xsmall" />
  <LightBulbIcon size="small" />
  <LightBulbIcon size="medium" />
  <LightBulbIcon size="large" />
</Inline>

Tone

Define the icon tone.

Open in Playroom

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

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

Open in Playroom

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

<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

Prop	Type	Description
data?	DataAttributeMap	Sets data attributes for the element.
size?	SizeType: "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large"	The size of the icon.
tone?	"neutral" \| "muted" \| "link" \| "disabled" \| "fieldAccent" \| "placeholder" \| "accent" \| "primary" \| "primaryHover" \| "primaryActive" \| "secondary" \| "secondaryHover" \| "secondaryActive" \| "caution" \| "critical" \| "info" \| "positive"	The tone of the icon.