@adobe/spectrum-wc-icons
Spectrum 2 workflow icons for Spectrum Web Components. Public, framework-agnostic icon art delivered two ways:
- Per-icon custom elements (
<swc-icon-star>): drop-in tags that render in any framework with zero ceremony, carrying size, color, and accessibility. - Per-icon SVG-string functions (
Icon_Star()): the tree-shakeable substrate, usable viainnerHTML, ReactdangerouslySetInnerHTML, Vuev-html, or LitunsafeSVG.
Neither couples a consumer to Lit. The package depends only on @adobe/spectrum-wc-core (for the shared IconBase).
The art is generated from the Adobe-internal A4U S2 Icon Global Set (Open Source) by this package's workflow generator. See Regenerating and the icon strategy RFC.
Install
yarn add @adobe/spectrum-wc-icons
Usage
Custom element (any framework, no Lit)
Import the per-icon element by subpath; the import registers the tag as a side effect.
import '@adobe/spectrum-wc-icons/swc-icon-star.js';
<swc-icon-star accessible-label="Favorite"></swc-icon-star>
<swc-icon-star accessible-label="Favorite" /> // React 19
Register every icon at once (not tree-shakeable; prefer per-icon imports in apps):
import '@adobe/spectrum-wc-icons/elements.js';
SVG-string function (build-time, SSR, custom composition)
import { Icon_Star } from '@adobe/spectrum-wc-icons/Star.js';
element.innerHTML = Icon_Star();
The package's default export is the barrel of every function, for convenience:
import { Icon_Star, Icon_Folder } from '@adobe/spectrum-wc-icons';
API
Every element extends IconBase from @adobe/spectrum-wc-core:
| Member | Type | Default | Notes |
|---|---|---|---|
size | 'xs' | 's' | 'm' | 'l' | 'xl' | 'm' | Sizes the box; the single drawing scales to it. |
accessible-label | string | '' | Set: host gets role="img" + aria-label. Empty: host is aria-hidden (decorative). |
CSS color | <color> | inherited | Drives icon color via the currentColor fallback. |
CSS --swc-icon-color | <color> | currentColor | Advanced color override, independent of text color. |
Naming
For an A4U logical name <Name> (PascalCase, e.g. Star, AddCircle, 3DAsset):
| Output | Form | Example (AddCircle) | Example (3DAsset) |
|---|---|---|---|
| Function | Icon_<Name>() | Icon_AddCircle() | Icon_3DAsset() |
| Element class | Icon<Name> | IconAddCircle | Icon3DAsset |
| Element tag | swc-icon-<kebab> | swc-icon-add-circle | swc-icon-3d-asset |
| Function subpath | /<Name>.js | /AddCircle.js | /3DAsset.js |
Regenerating
Icon art and styles are generated, not hand-authored. Run these from the repo root or gen2/packages/icons.
| Command | What it does |
|---|---|
yarn generate:workflow-icons | Regenerates src/*.ts from the raw SVGs in icon-source/, then runs generate:icon-styles |
yarn generate:icon-styles | Copies gen2/packages/swc/stylesheets/_lit-styles/icon-base.css to src/stylesheets/icon-base.css |
yarn check:icon-styles | Fails if the stylesheet copy is out of date (runs first in yarn build) |
To refresh the art (Adobe-internal, VPN required), download the S2 Icon Global Set (Open Source) SVGs into icon-source/, then run yarn generate:workflow-icons. The source SVGs are git-ignored; only the generated art in src/ is committed. See the icon source README for the full steps.
src/stylesheets/icon-base.css is a generated copy: edit the swc source, then run yarn generate:icon-styles. See Icon stylesheet.