@spark-web/icon

---
title: Icon
isExperimentalPackage: false
---

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

Examples

$3

Define the icon size.

``jsx live






`

$3

Define the icon tone.

`jsx live













`

$3

To ensure icons have sufficient contrast, when on a dark background the
foreground tones “neutral” and “muted” will be inverted.

`jsx live








``

Props

[data-attribute-map]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
[size-type]:
https://github.com/brighte-labs/spark-web/blob/11e73659ff4a01a48a8761821bff34c6ec28568b/packages/icon/src/createIcon.tsx#L9
[foreground-tone]:
https://github.com/brighte-labs/spark-web/blob/6c1909208460cb421e62f516106e774e4b0ddc35/packages/text/src/useForegroundTone.ts#L5