# @openremote/or-icon

> Icon component for displaying an icon from an icon set

Latest version **1.30.0** (published 2026-09-02) · AGPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @openremote/or-icon
pnpm add @openremote/or-icon
yarn add @openremote/or-icon
bun add @openremote/or-icon
```

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.30.0 |
| Published | 2026-09-02 |
| First published | 2019-05-09 |
| Weekly downloads | 0 |
| License | AGPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 417.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | OpenRemote |
| Maintainers | openremotedeveloper, wborn |

## Links

- npm: https://www.npmjs.com/package/@openremote/or-icon
- npm.io page: https://npm.io/package/@openremote/or-icon

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^3.3.1
- [@mdi/font](https://npm.io/package/@mdi/font.md) latest
- [@openremote/model](https://npm.io/package/@openremote/model.md) 1.30.0
- [@openremote/or-element](https://npm.io/package/@openremote/or-element.md) 1.30.0

## Recent versions

- 1.30.0 (latest) — 2026-09-02
- 1.31.0-snapshot.20260916130646 (snapshot) — 2026-09-16
- 1.31.0-snapshot.20260915122244 — 2026-09-15
- 1.31.0-snapshot.20260911091633 — 2026-09-11
- 1.31.0-snapshot.20260910125057 — 2026-09-10
- 1.31.0-snapshot.20260910120754 — 2026-09-10
- 1.31.0-snapshot.20260908130403 — 2026-09-08
- 1.31.0-snapshot.20260907094218 — 2026-09-07
- 1.31.0-snapshot.20260904133325 — 2026-09-04
- 1.31.0-snapshot.20260904115341 — 2026-09-04
- 1.31.0-snapshot.20260904102436 — 2026-09-04
- 1.31.0-snapshot.20260903144735 — 2026-09-03
- 1.31.0-snapshot.20260903142507 — 2026-09-03
- 1.31.0-snapshot.20260903135821 — 2026-09-03
- 1.31.0-snapshot.20260903081447 — 2026-09-03
- … 812 more at https://npm.io/package/@openremote/or-icon/versions

## README

# @openremote/or-icon \<or-icon\>

[![NPM Version][npm-image]][npm-url]

Web Component for displaying an icon from a loaded iconset.

## Install

```bash
npm i @openremote/or-icon
yarn add @openremote/or-icon
```

## Usage

For a full list of properties, methods and options refer to the TypeDoc generated [documentation](<>).

Icons are defined in iconsets, there are two iconsets provided by default and new ones can be created as required (see
[demo-core](../../demo/demo-core)), The `mdi` iconset is quite large and it is possible to prevent loading of this
when initialising the OpenRemote `Manager` via the `ManagerConfig`:

- `mdi` - [Material Design Icons](https://materialdesignicons.com/)
- `or` - OpenRemote icons (see [here](./or-iconset.ts))

The default iconset is `mdi` but this can be changed by setting `OrIcon.DEFAULT_ICONSET`, to load an icon use the
following HTML:

```$html
<or-icon icon="mdi:access-point" />
```

If using the default iconset then the iconset prefix can be omitted:

```$html
<or-icon icon="access-point" />
```

Styling is done through CSS, the following CSS variables can be used:

```$css
--or-icon-fill (default: currentcolor)
--or-icon-stroke (default: none)
--or-icon-height (default: 24px)
--or-icon-width (default: 24px)
--or-icon-pointer-events (default: none)
```

When an iconset is added then any `or-icon` components in the DOM will be notified and refresh as required.

## Supported Browsers

The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
Internet Explorer 11 is also supported.

## License

[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)

[npm-image]: https://img.shields.io/npm/v/@openremote/or-icon.svg
[npm-url]: https://www.npmjs.com/package/@openremote/or-icon

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