# @synerise/ds-icon

> Icon UI Component for the Synerise Design System

Latest version **2.1.3** (published 2026-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @synerise/ds-icon
pnpm add @synerise/ds-icon
yarn add @synerise/ds-icon
bun add @synerise/ds-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 | 2.1.3 |
| Published | 2026-09-22 |
| First published | 2019-10-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |

## Links

- npm: https://www.npmjs.com/package/@synerise/ds-icon
- Repository: Synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-icon

## Recent versions

- 2.1.3 (latest) — 2026-09-22
- 2.1.2 — 2026-09-18
- 2.1.1 — 2026-09-16
- 2.1.0 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.18.5 — 2026-07-23
- 1.18.4 — 2026-06-17
- 1.18.3 — 2026-06-11
- 1.18.2 — 2026-05-26
- 1.18.1 — 2026-05-22
- 1.18.0 — 2026-05-13
- 1.17.3 — 2026-05-04
- 1.17.2 — 2026-04-29
- 1.17.1 — 2026-04-28
- 1.17.0 — 2026-04-24
- … 208 more at https://npm.io/package/@synerise/ds-icon/versions

## README

---
id: icon
title: Icon
---

Icon UI Component

## Single icon

<iframe src="/storybook-static/iframe.html?id=components-icon--single-icon"></iframe>

## Icon list

<iframe src="/storybook-static/iframe.html?id=components-icon--list-icon"></iframe>

## Installation

```
npm i @synerise/ds-icon
or
yarn add @synerise/ds-icon
```

## Usage

```tsx
import Icon, { AngleLeftM } from '@synerise/ds-icon'

// Recommended for known icons: import the icon and pass it via `component`.
// Only the icons you import are bundled, so unused icons are tree-shaken from the app bundle.
<Icon component={<AngleLeftM />} color="red" size={20} />

// Only when the icon is not known at build time (e.g. the name is stored in a DB / returned by an API).
// The icon's set is fetched on demand, so the first render shows an empty (correctly sized) box:
<Icon iconName={iconNameFromApi} color="red" size={20} />
```

Icons requested by name load asynchronously, one set at a time. To make them synchronous — for
example so they appear in server-rendered HTML — register every icon eagerly from an application
entry file. This bundles the whole icon set, so use it only when you need it:

```tsx
import '@synerise/ds-icon/dist/registerAllIcons'
```

## API

| Property  | Description                                                                              | Type             | Default |
| --------- | ---------------------------------------------------------------------------------------- | ---------------- | ------- |
| iconName  | Icon name as string. Use **only** when the icon isn't known at build time (e.g. from a DB/API); prefer `component`. Resolved asynchronously — see above. Takes precedence over `component` | IconName |         |
| color     | Sets CSS `color` on SVG. Inherits parent colour if omitted (L/XL icons default to grey-800) | string       | inherit |
| name      | Sets the `title` HTML attribute on the container div (tooltip on hover)                  | string           |         |
| size      | Width and height of container and SVG in px                                              | string or number | 24      |
| stroke    | Also applies `color` value to CSS `stroke` property                                      | boolean          |         |
| onClick   | Callback triggered when clicking the icon. Adds `cursor: pointer` CSS                   | function         |         |
| component | **Recommended for known icons** — import the icon and pass it (e.g. `<AngleLeftM />`); tree-shakeable | ReactNode        |         |
| className | icon className (appended to `'ds-icon'`)                                                 | string           |         |
| style     | Style properties of icon, like color etc.                                                | CSSProperties    |         |

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