# @kyndryl-design-system/shidoka-icons

> Shidoka Icons

Latest version **2.28.1** (published 2026-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kyndryl-design-system/shidoka-icons
pnpm add @kyndryl-design-system/shidoka-icons
yarn add @kyndryl-design-system/shidoka-icons
bun add @kyndryl-design-system/shidoka-icons
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.28.1 |
| Published | 2026-10-07 |
| First published | 2024-07-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | kumarivijeta, w.barbee, shidoka-bot |

## Links

- npm: https://www.npmjs.com/package/@kyndryl-design-system/shidoka-icons
- Repository: https://github.com/kyndryl-design-system/shidoka-icons
- Homepage: https://github.com/kyndryl-design-system/shidoka-icons#readme
- Issues: https://github.com/kyndryl-design-system/shidoka-icons/issues
- npm.io page: https://npm.io/package/@kyndryl-design-system/shidoka-icons

## Dependencies (1)

- [@kyndryl-design-system/shidoka-foundation](https://npm.io/package/@kyndryl-design-system/shidoka-foundation.md) ^2.8.10

## Recent versions

- 2.28.1 (latest) — 2026-10-07
- 2.0.0-next.7 (next) — 2025-02-12
- 2.28.0 — 2026-08-25
- 2.27.0 — 2026-08-25
- 2.26.3 — 2026-08-19
- 2.26.2 — 2026-07-06
- 2.26.1 — 2026-06-24
- 2.26.0 — 2026-06-23
- 2.25.0 — 2026-05-18
- 2.24.0 — 2026-04-14
- 2.23.0 — 2026-04-08
- 2.22.0 — 2026-03-24
- 2.21.0 — 2026-03-05
- 2.20.1 — 2026-02-26
- 2.20.0 — 2026-02-12
- … 57 more at https://npm.io/package/@kyndryl-design-system/shidoka-icons/versions

## README

# Shidoka Icons

[![Release](https://github.com/kyndryl-design-system/shidoka-icons/actions/workflows/release.yml/badge.svg)](https://github.com/kyndryl-design-system/shidoka-icons/actions/workflows/release.yml)

## Contributing

Read the [Contributing Guide](CONTRIBUTING.md) here.

## Usage

### Install

```bash
npm install -S @kyndryl-design-system/shidoka-icons
```

### Set a color scheme

More info on color schemes in the [Foundation Storybook](https://shidoka-foundation.netlify.app/?path=/docs/foundation-colors--docs#setting-a-theme).

### Set up an SVG Inline Loader

Below is a list of links to some loaders that should work for most projects:

Generic loaders:

- [Vite SVG Loader](https://www.npmjs.com/package/vite-svg-loader)
- [Webpack SVG Inline Loader](https://www.npmjs.com/package/svg-inline-loader)
- [Rollup Plugin SVG](https://www.npmjs.com/package/rollup-plugin-svg)

React [SVGR](https://react-svgr.com/) loaders:

- [Vite Plugin SVGR](https://www.npmjs.com/package/vite-plugin-svgr)
- [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
- [@svgr/rollup](https://www.npmjs.com/package/@svgr/rollup)

Angular loaders:

- [Angular SVG Icon](https://www.npmjs.com/package/angular-svg-icon)

### Import an Icon

_Example only, refer to loader documentation._

```js
// monochrome. 4 sizes available: 16, 20, 24, 32
import iconName from '@kyndryl-design-system/shidoka-icons/svg/monochrome/<size>/<icon-name>.svg';

// duotone. one size available (48, 64, 96)
import iconName from '@kyndryl-design-system/shidoka-icons/svg/duotone/<size>/<icon-name>.svg';
```

### Render the Icon

_Example for Lit, refer to loader/framework documentation._

```html
<div>${iconName}</div>
```

### Customize the icon

#### Monochrome Fill

Monochrome icons use `fill="currentColor"` by default, so they will inherit the CSS text color. You can override this by specifying a CSS `fill` on the SVG element. Example:

```css
svg {
  fill: red;
}
```

#### Duotone Fill

Duotone icons have two layers, `primary` and `secondary`, and default colors of Primary `#29707A` and Secondary `#5FBEAC`. These can be customized by changing the fill color of each layer. Example:

```css
svg .primary {
  fill: red;
}

svg .secondary {
  fill: blue;
}
```

#### Icon Size

Generally you should import the icon of the size you need. Since they are vectors, if needed they will scale to any size via CSS override. Example:

```css
svg {
  width: 128px;
  height: 128px;
}
```

## Iconify Icon Sets

Pre-built [Iconify](https://iconify.design/) JSON icon sets are included in the package for use with any Iconify-compatible library or tool (e.g. Iconify web components, Mermaid.js, UnoCSS, etc.).

### Available Icon Sets

| Import name    | Prefix       | Size | Type       |
| -------------- | ------------ | ---- | ---------- |
| `monochrome16` | `kd-mono-16` | 16   | Monochrome |
| `monochrome20` | `kd-mono-20` | 20   | Monochrome |
| `monochrome24` | `kd-mono-24` | 24   | Monochrome |
| `monochrome32` | `kd-mono-32` | 32   | Monochrome |
| `duotone48`    | `kd-duo-48`  | 48   | Duotone    |
| `duotone64`    | `kd-duo-64`  | 64   | Duotone    |
| `duotone96`    | `kd-duo-96`  | 96   | Duotone    |

### Import

```js
import { monochrome32, duotone48 } from '@kyndryl-design-system/shidoka-icons';

// Or import individual JSON files directly
import monochrome32 from '@kyndryl-design-system/shidoka-icons/monochrome-32.json' with { type: 'json' };
import duotone48 from '@kyndryl-design-system/shidoka-icons/duotone-48.json' with { type: 'json' };
```

### Usage with `addCollection()` (Iconify)

```js
import { addCollection } from '@iconify/iconify';
import { monochrome32 } from '@kyndryl-design-system/shidoka-icons';

addCollection(monochrome32);

// Use icons as: prefix:icon-name
```

### Usage with Mermaid.js

```js
import { monochrome32 } from '@kyndryl-design-system/shidoka-icons';

mermaid.registerIconPacks([
  {
    name: monochrome32.prefix, // 'kd-mono-32'
    icons: monochrome32,
  },
]);
```

Then reference icons in your Mermaid diagrams using the prefix:

```
architecture-beta
  service icon[prefix:icon-name](My Service)
```

---
_Source: https://npm.io/package/@kyndryl-design-system/shidoka-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._