# @clds/icon

> ## Adding new icon

Latest version **0.70.2** (published 2025-07-21) · 0 weekly downloads

## Install

```sh
npm install @clds/icon
pnpm add @clds/icon
yarn add @clds/icon
bun add @clds/icon
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.70.2 |
| Published | 2025-07-21 |
| First published | 2022-10-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cloudinary |
| Maintainers | cloudinary-internal |

## Links

- npm: https://www.npmjs.com/package/@clds/icon
- Repository: https://github.com/cloudinary/design-system
- Homepage: https://github.com/cloudinary/design-system/tree/main/libs/components/icon#readme
- Issues: https://github.com/cloudinary/design-system/issues
- npm.io page: https://npm.io/package/@clds/icon

## Dependencies (5)

- [es-toolkit](https://npm.io/package/es-toolkit.md) 1.31.0
- [@clds/themes](https://npm.io/package/@clds/themes.md) 0.70.2
- [@clds/blender](https://npm.io/package/@clds/blender.md) 0.70.2
- [@clds/typography](https://npm.io/package/@clds/typography.md) 0.70.2
- [@clds/design-system-foundations](https://npm.io/package/@clds/design-system-foundations.md) 0.70.2

## Recent versions

- 0.70.2 (latest) — 2025-07-21
- 0.70.1 — 2025-07-08
- 0.70.0 — 2025-07-06
- 0.69.0 — 2025-06-26
- 0.68.0 — 2025-06-24
- 0.67.1 — 2025-06-12
- 0.67.0 — 2025-06-12
- 0.66.0 — 2025-06-09
- 0.65.0 — 2025-06-08
- 0.64.2 — 2025-06-05
- 0.64.1 — 2025-06-03
- 0.64.0 — 2025-06-03
- 0.63.1 — 2025-05-25
- 0.63.0 — 2025-05-06
- 0.62.4 — 2025-04-09
- … 143 more at https://npm.io/package/@clds/icon/versions

## README

## @clds/icon

## Adding new icon

Icons are managed in a special template in `src/template/index-icons.tsx`.
This package autogenerates two files: `index.tsx` and `metadata.ts`.
`index.tsx` is for production apps that don't require icon metadata.
`metadata.ts` is for development apps that need to access icon information such as name, keywords, or category.

In order to add your icon successfuly, you need to:

1. add your icon in `src/template/index-icons.tsx`
2. sort the icons by running `pnpm run sort-icons-exports`
3. run `pnpm nx generate tools:generateIcons` from the package directory
4. commit
5. if you forget to generate code from the template, GitHub would do it for you by adding new commit in your PR

**Please don't edit main files directly** since they will be overwritten next time someone changes something in the template.

---

[![npm version](https://img.shields.io/npm/v/@clds/icon)](https://www.npmjs.org/package/@clds/icon)

## Versioning

This library follows [Semantic Versioning](http://semver.org/).

## License

See [LICENSE](https://github.com/cloudinary/design-system/blob/main/LICENSE)

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