# @scalar/icons

> Scalar Icons

Latest version **0.7.6** (published 2026-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @scalar/icons
pnpm add @scalar/icons
yarn add @scalar/icons
bun add @scalar/icons
```

## Health

**Score 80/100 (A)** — status: active.

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

Warnings: low downloads; large bundle; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.6 |
| Published | 2026-08-20 |
| First published | 2024-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22 |
| Dependencies | 4 |
| Unpacked size | 22 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16153 |
| Author | Scalar |
| Maintainers | cameronrohani, marclave, scalar_geoff, hwkr, hanspagel, amritk, scalar-machine |

## Links

- npm: https://www.npmjs.com/package/@scalar/icons
- Repository: https://github.com/scalar/scalar
- Issues: https://github.com/scalar/scalar/issues/new/choose
- npm.io page: https://npm.io/package/@scalar/icons

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.5.40
- [chalk](https://npm.io/package/chalk.md) ^5.6.2
- [@types/node](https://npm.io/package/@types/node.md) ^24.1.0
- [@phosphor-icons/core](https://npm.io/package/@phosphor-icons/core.md) ^2.1.1

## Recent versions

- 0.7.6 (latest) — 2026-08-20
- 0.7.5 — 2026-07-16
- 0.7.4 — 2026-07-15
- 0.7.3 — 2026-06-02
- 0.7.2 — 2026-04-03
- 0.7.1 — 2026-03-31
- 0.7.0 — 2026-03-25
- 0.6.4 — 2026-03-24
- 0.6.3 — 2026-03-20
- 0.6.2 — 2026-03-20
- 0.6.1 — 2026-03-18
- 0.6.0 — 2026-03-04
- 0.5.3 — 2026-02-13
- 0.5.2 — 2025-12-18
- 0.5.0 — 2025-11-03
- … 20 more at https://npm.io/package/@scalar/icons/versions

## README

# Scalar Icons

This package provide a set of icons for use Scalar applications based on [Phosphor Icons](https://phosphoricons.com/). It uses a custom Vue implementation based on the [`@phosphor-icons/vue`](https://github.com/phosphor-icons/vue) package which allows for tree shaking.

---

Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in.

- **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs.
- **[Developer Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
- **[SDK Generator](https://scalar.com/products/sdk-generator/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
- **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI.

20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com)

---

For a full list of available icons see [Phosphor Icons](https://phosphoricons.com/#beacon). The icon will be available from this package as `ScalarIcon<Icon Name in PascalCase>`.

## Installation

```bash
pnpm i @scalar/icons
```

## Usage

```vue
<script setup lang="ts">
import { ScalarIconMagnifyingGlass } from '@scalar/icons'
</script>

<template>
  <!-- You can size and color the icons easily using Tailwind -->
  <ScalarIconMagnifyingGlass class="size-4 text-c-3" weight="bold" />
</template>
```

## Differences from [`@phosphor-icons/vue`](https://github.com/phosphor-icons/vue)

There are a few differences between this implementation and [`@phosphor-icons/vue`](https://github.com/phosphor-icons/vue) to better it align with our Scalar stack.

* **Size & Color Props:** Rather than using props you can use Tailwind classes (e.g. `size-<Number>` or `text-<color>`) to adjust the size and color of the icons. By default the icons are sized to `1em` (the size of the text around it) and set to the currentColor.
* **Mirrored Prop:** If you need to mirror an icon (e.g. for a RTL layout) you can use the `-scale-x-100` Tailwind class.
* **A11y Attributes:** In order to make the icons accessible by default icons have the `aria-hidden` and `role="presentation"` attributes set. If you set the `label` prop then the `aria-label` will be set instead.

## Development

To build the icons we use a icon generation script modified from the [`@phosphor-icons/vue`](https://github.com/phosphor-icons/vue) [`assemble.ts`](https://github.com/phosphor-icons/vue/blob/main/bin/assemble.ts) script. The icon SVGs are pulled from [`@phosphor-icons/core`](https://github.com/phosphor-icons/core) and compiled into individual Vue components for tree shaking.

To generate the icons run:

```bash
pnpm generate:icons
```

This will also update / override the exports in the index file at `src/index.ts`. See also the [development docs for `@phosphor-icons/vue`](https://github.com/phosphor-icons/vue/tree/main?tab=readme-ov-file#development).

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).

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