# @hcl-software/enchanted-icons-web-component
> Enchanted Icons is a collection of web component 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-web-component
pnpm add @hcl-software/enchanted-icons-web-component
yarn add @hcl-software/enchanted-icons-web-component
bun add @hcl-software/enchanted-icons-web-component
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-09-24 |
| First published | 2025-11-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 4.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Nhicko Garachico |
| Maintainers | hcl-ospo-officer, emmanuelryan.gamla, paulswithers, felix-hcl, rwilkins108, stwissel, hcl-ds-dcl |
| Keywords | web-component, lit, carbon, ts |
## Links
- npm: https://www.npmjs.com/package/@hcl-software/enchanted-icons-web-component
- 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-web-component
## Dependencies (3)
- [lit](https://npm.io/package/lit.md) ^3.3.0
- [debug](https://npm.io/package/debug.md) ^4.4.3
- [@types/debug](https://npm.io/package/@types/debug.md) ^4.1.12
## Alternatives
- [csv-to-markdown-table](https://npm.io/package/csv-to-markdown-table.md) — 47.0K weekly downloads
- [@sapphire/ratelimits](https://npm.io/package/@sapphire/ratelimits.md) — 4.4K weekly downloads
- [js-csvparser](https://npm.io/package/js-csvparser.md) — 2.0K weekly downloads
- [@adadapted/js-sdk](https://npm.io/package/@adadapted/js-sdk.md) — 251 weekly downloads
- [@grapecity/spread-sheets-sparklines](https://npm.io/package/@grapecity/spread-sheets-sparklines.md) — 103 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
## README
# HCL Software Enchanted Icons package for Web Components
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 web 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)
[](https://www.npmjs.com/package/@hcl-software/enchanted-icons)
## ⬇️ Installation
```sh
npm install @hcl-software/enchanted-icons-web-component
```
### Usage
Web Components can be used in any web framework or plain HTML.
**1. Import the icon definition**
You must first import the icon's JavaScript file to define the custom element. This is typically done once in your application's main entry point.
```javascript
import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/rocket';
import '@hcl-software/enchanted-icons-web-component/dist/apps/es/app-switcher';
```
**2. Use the HTML tag**
Once defined, you can use the icon's custom HTML tag. The tag name is `icon-` followed by the icon's name (e.g., `icon-rocket`, `icon-app-switcher`).
```html
```
Icons with double dash in their name like `chevron--up` will use single dash in their component name.
```javascript
import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/chevron--up';
// Usage
// Usage by using the 'VITE_COMPONENT_PREFIX=prefix-' env parameter
```
**Styling (Size and Color)**
You can style the icons by setting the `size` and `color` properties on the element.
**As HTML attributes:**
```html
```
**As JavaScript properties:**
```javascript
const myIcon = document.querySelector('icon-rocket');
myIcon.size = 24;
myIcon.color = 'var(--my-theme-color)';
```
**With CSS Custom Properties (Advanced):**
The icons are styled internally with CSS Custom Properties. You can override these variables globally to set a theme for all icons.
```css
/* Set a default theme size and color for all icons on the page */
body {
--icon-theme-size: 24px;
--icon-theme-color: #3d3d3d;
}
```
---
_Source: https://npm.io/package/@hcl-software/enchanted-icons-web-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._