# jb-icons

> Icon components for the JB Design System

Latest version **2.5.0** (published 2026-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install jb-icons
pnpm add jb-icons
yarn add jb-icons
bun add jb-icons
```

## Health

**Score 60/100 (C)** — status: active.

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

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.5.0 |
| Published | 2026-09-09 |
| First published | 2020-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 679.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mohammad javad bathaei |
| Maintainers | javadbat |
| Keywords | icon, pack, web-component |

## Links

- npm: https://www.npmjs.com/package/jb-icons
- Repository: https://github.com/javadbat/jb-icons
- Homepage: https://github.com/javadbat/jb-icons#readme
- Issues: https://github.com/javadbat/jb-icons/issues
- npm.io page: https://npm.io/package/jb-icons

## Dependencies (1)

- [jb-core](https://npm.io/package/jb-core.md) ^0.37.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.5.0 (latest) — 2026-09-09
- 2.4.0 — 2026-09-06
- 2.3.0 — 2026-08-15
- 2.2.0 — 2026-07-31
- 2.1.0 — 2026-07-30
- 2.0.0 — 2026-07-24
- 1.0.0 — 2020-07-06

## README

# jb-icon

`jb-icon-expand` and `jb-icon-refresh` emit a non-bubbling `init` event when connection setup finishes. Register listeners before inserting the element into the document.

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-icons)
[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-icons/main/LICENSE)
[![NPM Version](https://img.shields.io/npm/v/jb-icons)](https://www.npmjs.com/package/jb-icons)
![GitHub Created At](https://img.shields.io/github/created-at/javadbat/jb-icons)

Icon component for the JB Design System.
jb-icon has no default export. it has some sub folder each contain one icon.

Every icon extends the SSR-safe `JBBaseComponent`, and custom-element registration is guarded. Icon submodules can therefore be imported while rendering in Node.js environments such as Next.js or Astro without requiring `HTMLElement`, `window`, or `customElements`. Their shadow DOM and animations initialize only when the elements are upgraded in a browser.

## Demo

- [Demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--overview)
- [Icon gallery](https://javadbat.github.io/design-system/?path=/story/components-jbicons--gallery)

## React JSX types

React applications can opt in to JSX declarations for every icon with one
type-only helper import. Continue importing each icon separately so only the
icons used by the application are registered and bundled. See the [React JSX demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--react-jsx).

```tsx
import "jb-icons/react";
import "jb-icons/triangle";

export function DisclosureIcon({ isOpen }: { isOpen: boolean }) {
  return <jb-icon-triangle direction="inline-end" spin={isOpen ? 90 : 0} round={60} size="xs" />;
}
```

The `jb-icons/react` runtime entry is empty. Non-React projects do not need to
import it and do not resolve any React types.

The declaration includes the shared `size`, `color`, `class`, standard HTML,
ARIA, children, and ref props. It also exposes each icon's public properties:

| Icons | Additional React JSX props |
| --- | --- |
| `arrow` | `direction`, `spin`, `end-line` |
| `arrow-tailed` | `direction`, `spin`, `long` |
| `triangle` | `direction`, `spin`, `round` |
| `delete` | `isOpen` |
| `edit` | `isActive`, `active` |
| `expand` | `isExpanded`, `expanded` |
| `eye` | `open` |
| `refresh`, `search` | `isLoading` |

Remove any application-local declarations for the same `jb-icon-*` JSX
elements after opting in, because duplicate declarations with different types
can conflict.

## Size and variants

Every icon supports a `size` attribute and property. Sizes set only the icon height;
width remains automatic and follows the SVG's aspect ratio.

The shared size rules live in `style/variables.css` and are injected into every
icon component before its icon-specific styles. The resolved height is available
as the `--icon-size` custom property. Compare the available sizes in the [sizes demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--sizes).

| Size | Default height | CSS custom property |
| --- | --- | --- |
| `xs` | 1rem (16px) | `--jb-icon-size-xs` |
| `sm` | 1.25rem (20px) | `--jb-icon-size-sm` |
| `md` | 1.5rem (24px) | `--jb-icon-size-md` |
| `lg` | 1.75rem (28px) | `--jb-icon-size-lg` |
| `xl` | 2.25rem (36px) | `--jb-icon-size-xl` |

`md` is the default when `size` is omitted. Its no-attribute size can be
customized with `--jb-icon-size`; an explicit `size="md"` uses
`--jb-icon-size-md`.

```html
<jb-icon-search></jb-icon-search>
<jb-icon-search size="sm"></jb-icon-search>
<jb-icon-search size="xl"></jb-icon-search>
```

Override one or more size tokens from an application stylesheet:

```css
:root {
  --jb-icon-size: 1.5rem;
  --jb-icon-size-xs: 0.875rem;
  --jb-icon-size-sm: 1.125rem;
  --jb-icon-size-md: 1.5rem;
  --jb-icon-size-lg: 2rem;
  --jb-icon-size-xl: 2.5rem;
}
```

`--icon-size` is internal to each icon and contains the resolved height. Prefer
the public `--jb-icon-size*` properties when customizing icons.

## Stroke width

Stroked icons use the shared 1024-unit weight scale from `style/variables.css`; the [stroke-width demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--stroke-widths) shows the three weights side by side.

| Weight | SVG units | Internal custom property |
| --- | ---: | --- |
| Thin detail | 48 | `--icon-stroke-width-thin` |
| Standard outline | 64 | `--icon-stroke-width` |
| Thick emphasis | 96 | `--icon-stroke-width-thick` |

Use the standard weight for primary outlines. Thin and thick weights are
reserved for secondary details and intentional visual emphasis.

## Color

Icons inherit the surrounding text color by default through `currentColor`. See every theme variant in the [colors demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--colors):

```html
<div style="color: rebeccapurple">
  <jb-icon-search></jb-icon-search>
</div>
```

Use the shared `--jb-icon-color` custom property to customize all JB icons in a
scope:

```css
:root {
  --jb-icon-color: #334155;
}
```

Icons also support these `color` attribute variants:

| Color | Theme fallback | CSS custom property |
| --- | --- | --- |
| `primary` | `--jb-primary` | `--jb-icon-color-primary` |
| `secondary` | `--jb-secondary` | `--jb-icon-color-secondary` |
| `positive` | `--jb-green` | `--jb-icon-color-positive` |
| `danger` | `--jb-red` | `--jb-icon-color-danger` |
| `warning` | `--jb-yellow` | `--jb-icon-color-warning` |
| `light` | `--jb-neutral-10` | `--jb-icon-color-light` |
| `dark` | `--jb-neutral` | `--jb-icon-color-dark` |

```html
<jb-icon-search color="primary"></jb-icon-search>
<jb-icon-search color="danger"></jb-icon-search>
```

Each variant first uses its `--jb-icon-color-*` property, then its corresponding
JB theme color, and finally `currentColor`. Without a `color` attribute, the
icon uses `--jb-icon-color` and falls back directly to `currentColor`.

## Icons

### Plus and minus icons

Import the number control icons from their submodules:

```js
import "jb-icons/plus";
import "jb-icons/minus";
```

Both icons use the standard 1024-unit view box, stroke weight, size variants,
and color variants:

```html
<jb-icon-plus size="sm" color="positive"></jb-icon-plus>
<jb-icon-minus size="sm" color="danger"></jb-icon-minus>
```

### Arrow-tailed icon

The [gallery demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--gallery) shows the short and long tail alongside every supported direction.

Import the tailed arrow from its submodule:

```js
import "jb-icons/arrow-tailed";
```

The default arrow has a short tail and square visual bounds. Add the boolean
`long` attribute, or set its property, to use the full-height tail:

```html
<jb-icon-arrow-tailed></jb-icon-arrow-tailed>
<jb-icon-arrow-tailed long></jb-icon-arrow-tailed>
```

```js
const arrow = document.querySelector("jb-icon-arrow-tailed");
arrow.long = true;
```

### Lorgnette icon

The [gallery demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--gallery) includes the lorgnette with the shared size and color variants.

Import the lorgnette icon from its submodule:

```js
import "jb-icons/lorgnette";
```

Use the shared size and color variants. Its lens highlights use the
complementary icon color:

```html
<jb-icon-lorgnette></jb-icon-lorgnette>
<jb-icon-lorgnette size="sm" color="primary"></jb-icon-lorgnette>
```

```css
jb-icon-lorgnette {
  --jb-icon-color-complementary: #ff1229;
}
```

### Expand icon

Try its expanded and collapsed states in the [animation demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--animations).

Import the expand icon from its submodule:

```js
import "jb-icons/expand";
```

Set `isExpanded` to animate between the expand and collapse states:

```js
const expandIcon = document.querySelector("jb-icon-expand");
expandIcon.isExpanded = true;
```

### Edit icon

Try its active and resting states in the [animation demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--animations).

Import the edit icon from its submodule:

```js
import "jb-icons/edit";
```

The pen uses the standard icon color, while its animated underline uses the
complementary icon color:

```html
<jb-icon-edit></jb-icon-edit>
<jb-icon-edit size="sm" color="primary"></jb-icon-edit>
```

Customize the underline with `--jb-icon-color-complementary`:

```css
jb-icon-edit {
  --jb-icon-color-complementary: #ff1229;
}
```

Set `isActive` to animate between the resting and active edit states:

```js
const editIcon = document.querySelector("jb-icon-edit");
editIcon.isActive = true;
```

### Delete icon

Try its open and closed lid states in the [animation demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--animations).

Import the delete icon from its submodule:

```js
import "jb-icons/delete";
```

Use the shared `size` and `color` variants on `<jb-icon-delete>`:

```html
<jb-icon-delete></jb-icon-delete>
<jb-icon-delete size="sm" color="danger"></jb-icon-delete>
```

Set `isOpen` to animate the bin lid between its open and closed states. The
animation is triggered programmatically and is not tied to hover:

```js
const deleteIcon = document.querySelector("jb-icon-delete");
deleteIcon.isOpen = true;

// Close it again:
deleteIcon.isOpen = false;
```

The `playOpenAnimation()` and `playCloseAnimation()` methods remain available
and keep `isOpen` synchronized.

### Refresh icon

Try its loading state in the [animation demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--animations).

Import the refresh icon from its submodule:

```js
import "jb-icons/refresh";
```

```html
<jb-icon-refresh></jb-icon-refresh>
<jb-icon-refresh size="sm" color="primary"></jb-icon-refresh>
```

Set `isLoading` to `true` to start rotating the icon. Setting it back to
`false` does not interrupt the active rotation; the icon finishes that cycle
and then stops repeating:

```js
const refreshIcon = document.querySelector("jb-icon-refresh");
refreshIcon.isLoading = true;

// When refreshing finishes:
refreshIcon.isLoading = false;
```

### Search icon

Try its loading state in the [animation demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--animations).

Import the search icon from its submodule:

```js
import "jb-icons/search";
```

Use the shared `size` and `color` variants on `<jb-icon-search>`:

```html
<jb-icon-search></jb-icon-search>
<jb-icon-search size="sm" color="primary"></jb-icon-search>
```

Set the `isLoading` property to animate the search icon while a search is in
progress. Reset it to `false` to finish the animation and return to the search
shape:

```js
const searchIcon = document.querySelector("jb-icon-search");
searchIcon.isLoading = true;

// When the search finishes:
searchIcon.isLoading = false;
```

### Eye icon

Try its open and closed states in the [animation demo](https://javadbat.github.io/design-system/?path=/story/components-jbicons--animations).

Import the eye icon from its submodule and use the `open` attribute or property
to switch between hidden and visible states:

```js
import "jb-icons/eye";
```

```html
<jb-icon-eye></jb-icon-eye>
<jb-icon-eye open></jb-icon-eye>
```

```js
const eye = document.querySelector("jb-icon-eye");
eye.open = true;
```
## Related Docs

- See the [React JSX documentation](https://javadbat.github.io/design-system/?path=/story/components-jbicons-react-readme--docs) for typed JSX usage.
- See the [`jb-icons/react` README](./react/README.md) for React-specific guidance.
- See [All JB Design System Component List](https://javadbat.github.io/design-system/) for more components.
- Use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute to this component.


## AI agent notes

- Import `jb-icons/icon-name` once before using `<jb-icon-name>`.

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