# @hcl-software/enchanted-icons

> Enchanted Icons is a collection of icons that are used in HCL Software products.

Latest version **2.0.0** (published 2026-09-24) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @hcl-software/enchanted-icons
pnpm add @hcl-software/enchanted-icons
yarn add @hcl-software/enchanted-icons
bun add @hcl-software/enchanted-icons
```

## Health

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

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

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-09-24 |
| First published | 2024-04-19 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 3.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Mridul Shrivastava |
| Maintainers | hcl-ospo-officer, emmanuelryan.gamla, paulswithers, felix-hcl, rwilkins108, stwissel, hcl-ds-dcl |
| Keywords | react, carbon, ts |

## Links

- npm: https://www.npmjs.com/package/@hcl-software/enchanted-icons
- Repository: https://github.com/HCL-TECH-SOFTWARE/enchanted-icons
- Homepage: https://github.com/HCL-TECH-SOFTWARE/enchanted-icons#readme
- Issues: https://github.com/HCL-TECH-SOFTWARE/enchanted-icons/issues
- npm.io page: https://npm.io/package/@hcl-software/enchanted-icons

## Dependencies (3)

- [@carbon/icons](https://npm.io/package/@carbon/icons.md) 11.27.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.14.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2026-09-24
- 1.10.0 — 2026-04-02
- 1.9.1 — 2026-03-16
- 1.9.0 — 2026-03-06
- 1.8.0 — 2026-03-05
- 1.7.2 — 2025-11-13
- 1.7.1 — 2025-11-12
- 1.7.0 — 2025-11-12
- 1.6.0 — 2025-11-03
- 1.5.0 — 2025-07-18
- 1.4.0 — 2025-05-23
- 1.3.0 — 2024-10-14
- 1.2.0 — 2024-06-07
- 1.1.0 — 2024-05-14
- 1.0.0 — 2024-04-19

## README

# HCL Software Enchanted Icons package

Enchanted Icons is a collection of icons that are used in HCL Software products. This package exposes own creations as well as external icons from the [Carbon React Icons Package](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) and exposes those as ready to use Material-UI components.

(C) 2024 HCL America Inc. Apache-2.0 license [https://www.apache.org/licenses/LICENSE-2.0](https://www.apache.org/licenses/LICENSE-2.0)


[![npm](https://nodei.co/npm/@hcl-software/enchanted-icons.png)](https://www.npmjs.com/package/@hcl-software/enchanted-icons)

## ⬇️ Installation

```sh
npm install @hcl-software/enchanted-icons
```
## Usage

In most cases, the Enchanted Components use the correct icons to adhere to the Enchanted design language; however, there may be valid reasons to use
icons directly from this library. **Always consult with your UX contact when using icons directly from this library.**

### Examples

#### Icon size
```jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...
<CheckmarkIcon fontSize="small" />
```
or
```jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...
<CheckmarkIcon fontSize="16px" />
```

#### Icon color
```jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...
<CheckmarkIcon color="success" />
```
Note: It is strongly recommended to use the thematic names of colors of the Enchanted theme, rather than explicit rgba values. For example, `"success"` or `"action"`.  This ensures consistency of colors across the UI and over time.  

#### Icon button
A common pattern is to use an icon in conjunction with an Enchanted `<IconButton>`
```jsx
import IconButton from '@hcl-software/enchanted-react-components/dist/IconButton';
import RocketIcon from '@hcl-software/enchanted-icons/dist/carbon/es/rocket';
...
<IconButton size="small" aria-label="launch"><RocketIcon /></IconButton>
```
Note: In this case the size of the icon is determined by the `size` prop of the `<IconButton>`. The icon color is controlled by the different button states (active, disabled, etc) and should not be overriden.

### Advanced
Icons from this library can take any props supported by MUI's `<SvgIcon>` component. See https://v5.mui.com/material-ui/api/svg-icon/  
**Always consult with your UX contact before applying any advanced styling.**

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