# @spectrum-web-components/icon

> `` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `` will subsequently check for its `src` attribute which could populate the icon via a

Latest version **1.12.5** (published 2026-10-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @spectrum-web-components/icon
pnpm add @spectrum-web-components/icon
yarn add @spectrum-web-components/icon
bun add @spectrum-web-components/icon
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.12.5 |
| Published | 2026-10-14 |
| First published | 2019-09-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1577 |
| Author | Adobe |
| Maintainers | caseyisonit, taratadobe, rajrock38, jnjosh, nikkimk, rubenc, jianliao79, pvashish, patrickfulton |
| Keywords | design-system, spectrum, adobe, adobe-spectrum, web components, web-components, lit-element, lit-html, component, css |

## Links

- npm: https://www.npmjs.com/package/@spectrum-web-components/icon
- Repository: https://github.com/adobe/spectrum-web-components
- Homepage: https://opensource.adobe.com/spectrum-web-components/components/icon
- Issues: https://github.com/adobe/spectrum-web-components/issues
- npm.io page: https://npm.io/package/@spectrum-web-components/icon

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.12.5 (latest) — 2026-10-14
- 1.12.3-next.20260903033550 (next) — 2026-09-03
- 1.12.3-snapshot-test.20260831180357 (snapshot-test) — 2026-08-31
- 1.12.3-test.20260827122947 (test) — 2026-08-27
- 1.12.0-snapshot.20260422090428 (snapshot) — 2026-04-22
- 1.12.0-snaphot-test.20260223152537 (snaphot-test) — 2026-02-23
- 1.12.0-testing.20260223092154 (testing) — 2026-02-23
- 1.11.0-preview-ae61361d.20251203202755 (preview) — 2025-12-03
- 1.9.1-nightly.20251101120150 (nightly) — 2025-11-01
- 1.6.1-beta.0 (beta) — 2025-05-05
- 0.0.0-20250410163257 (calendar) — 2025-04-10
- 1.0.1-color-testing (color-testing) — 2024-12-09
- 1.0.0-rc.10 (rc) — 2024-10-30
- 1.12.4 — 2026-09-29
- 1.12.3-next.20260901142734 — 2026-09-01
- … 445 more at https://npm.io/package/@spectrum-web-components/icon/versions

## README

## Overview

`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.

### Usage

[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/icon?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/icon)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/icon?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/icon)

```
yarn add @spectrum-web-components/icon
```

Import the side effectful registration of `<sp-icon>` via:

```
import '@spectrum-web-components/icon/sp-icon.js';
```

When looking to leverage the `Icon` base class as a type and/or for extension purposes, do so via:

```
import { Icon } from '@spectrum-web-components/icon';
```

### Example

Names of the icons on this page are provided by the [`<sp-icons-medium>` icon set](components/icons). Learn how to create your own via [`sp-iconset`](components/iconset).

```html
<sp-icons-medium></sp-icons-medium>
<sp-icon name="ui:Arrow100"></sp-icon>
```

### Options

#### Sizes

Icons are available in various sizes in Spectrum ranging from `s` to `xxl`. By default an `sp-icon` without a `size` attribute will appear as if it were `size="m"`. We can specify the size via `size` attribute.

```html
<sp-icon size="s" name="ui:Arrow100"></sp-icon>
<sp-icon size="m" name="ui:Arrow100"></sp-icon>
<sp-icon size="l" name="ui:Arrow100"></sp-icon>
<sp-icon size="xl" name="ui:Arrow100"></sp-icon>
<sp-icon size="xxl" name="ui:Arrow100"></sp-icon>
```

#### Icon colors

Icons apply their color as `currentColor`, so change the `color` property of the element for customization.

```html
<sp-icon name="ui:Arrow100" style="color: red;"></sp-icon>
```

#### Image icon

An image icon can be supplied via the `src` attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriate for your application's design requirements.

```html
<sp-icon
  label="Previous"
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
```

#### HTML/SVG Element icon

Icons can also be supplied via HTML elements and are applied via the default `<slot>`.

```html
<sp-icon>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 22 22"
    role="img"
    fill="currentColor"
    height="18"
    width="18"
    aria-hidden="true"
  >
    <path
      d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
    ></path>
  </svg>
</sp-icon>
```

### Accessibility

If no meaning is lost by visually hiding an icon, it is considered decorative. Decorative icons should not have a label and should be hidden from assistive technology. `aria-hidden` is set to true by default for icons.

If an icon does add meaning, a label is required. Use the `label` attribute to set the label's text as the `aria-label` of the icon and remove the `aria-hidden` attribute.

```html
<sp-icon name="ui:Arrow100" label="Arrow pointing to the right"></sp-icon>
```

---
_Source: https://npm.io/package/@spectrum-web-components/icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._