# @wix/wix-ui-icons-common

> A set of commonly used icons for the Wix UI design system. [Storybook](https://wix-pages.com/wix-ui-icons-common)

Latest version **3.193.3** (published 2026-11-04) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @wix/wix-ui-icons-common
pnpm add @wix/wix-ui-icons-common
yarn add @wix/wix-ui-icons-common
bun add @wix/wix-ui-icons-common
```

## Health

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

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

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 3.193.3 |
| Published | 2026-11-04 |
| First published | 2022-05-25 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wix-ci, wixnpm, wix-ambassador, wix-ci-publisher, wix-bi-publisher, usability-sessions, bryanp-wix, ethanp, omrili, wix-org-headless, falconci, roir-wix |

## Links

- npm: https://www.npmjs.com/package/@wix/wix-ui-icons-common
- Homepage: https://wix-pages.com/wix-ui-icons-common
- npm.io page: https://npm.io/package/@wix/wix-ui-icons-common

## Recent versions

- 3.193.3 (latest) — 2026-11-04
- 3.193.2 — 2026-11-03
- 3.193.1 — 2026-10-30
- 3.193.0 — 2026-10-28
- 3.192.0 — 2026-10-26
- 3.191.3 — 2026-10-26
- 3.191.2 — 2026-10-22
- 3.191.1 — 2026-10-21
- 3.191.0 — 2026-10-19
- 3.190.8 — 2026-10-15
- 3.190.7 — 2026-10-14
- 3.190.6 — 2026-10-13
- 3.190.5 — 2026-10-12
- 3.190.4 — 2026-10-08
- 3.190.3 — 2026-10-07
- … 295 more at https://npm.io/package/@wix/wix-ui-icons-common/versions

## README

# wix-ui-icons-common
A set of commonly used icons for the Wix UI design system. [Storybook](https://wix-pages.com/wix-ui-icons-common)

**Note:** This project was migrated from wix-ui. The old Git history is available [here](https://github.com/wix-a/wix-ui-archive/tree/master/packages/wix-ui-icons-common).

## Installation

```bash
npm install @wix/wix-ui-icons-common
```

## Usage

You should use the system icons for internal components and the general icons for the consumer of your project.
To import and use Wix Design System icons:
```jsx
import { SomeGeneralIcon } from '@wix/wix-ui-icons-common';
import { SomeSystemIcon } from '@wix/wix-ui-icons-common/system';
```

To import and use classic editor (wix-base-ui) icons:
```jsx
import { SomeGeneralIcon } from '@wix/wix-ui-icons-common/classic-editor';
import { SomeSystemIcon } from '@wix/wix-ui-icons-common/classic-editor/system';
```

To import and use on-stage icons:
```jsx
import { SomeIcon } from '@wix/wix-ui-icons-common/on-stage';
import { SomeSystemIcon } from '@wix/wix-ui-icons-common/on-stage/system';
import { SomeReactionsIcon } from '@wix/wix-ui-icons-common/on-stage/reactions';
```

### Migration from old wix-ui-icons-common
1. Uninstall `wix-ui-icons-common`
2. Install `@wix/wix-ui-icons-common`
3. Use [this codemod](https://github.com/wix-private/wix-design-systems-utils/tree/master/packages/wix-ui-codemod/src/wix-ui-icons-common#wix-ui-icons-commonimports-from-main-index) to change all old-style imports
4. Check the codemod's output before committing to avoid potential mistakes.

### Properties

| prop name | type | default value | required | description |
|----------|----------|--------------|------------|-------------|
| size | string | 1em | - | Shorthand for setting width and height attributes of the SVG to the same value |
| ***All other Props are passed to the SVG element*** | | | | |

### Typescript
All icons have the same interface which you can import like so:
```jsx
import { IconProps } from '@wix/wix-ui-icons-common';
```

## Adding a new Icon

Before adding a new icon, please consult with your relevant UX. Not from Wix? Please open a [github issue](https://github.com/wix/wix-ui/issues/new) and we'll be happy to help

### Guidelines
* SVG icons will be transformed into their monochrome version and be stripped from redundant data they should be as lean as possible and should contain only `path`s and `shape`s.
* Make sure to remove `def`, `mask` `stroke`, `fill`, `transform`, `mirror`, `border thickness` and any other similar attributes that doesn't make the component flat. https://jakearchibald.github.io/svgomg/ can be used for SVG optimization.
* the `id` attribute should be removed as well.
* Make sure SVGs are correctly exported from Illustrator/Sketch/Figma, meaning they should merge all layers into one, and apply the masks, which will result in an SVG with a single path.
* Use a descriptive name since it'll be used as the React component name.
* If the icon has multiple variations (small, large, outlined, filled), specify the variation at the end of the file name, e.g. `FormFieldErrorSmall.svg`.
* Add the new SVG file to the `src/default/general/raw` or `src/default/system/raw` folder according to its purpose of usage (internal or external)

* Every icon must have additional metadata describing the following attributes:

  * `title` - the name of the icon
  * `category` - icon type (one of: `Actions`, `General`, `Toggle`, `Communication`, `Document`, `Users`, `Date & Time`, `Arrows`, `Layout & Sorting`, `Media`, `Composer Actions`, `Composer Adjustments`, `Composer Layers & Alignment`, `Composer Shapes`, `Composer Tools`, `Composer Effects`, `Composer Ratio`, `Composer Other`, `Food`, `Brands`, `Money`, `Text`, `Wix Brands`)
  * `description` - a short summary explaining the purpose of the icon and the context where it may appear
  * `tags` - list of terms that may apply to icon, used in storybook search
  * `sizes` - maps between the icon size in pixels (`"18"`/`"24"`) to the file name
  * `aliases` - list of other filenames the icon appears as

  When adding an icon, add the icon's metadata to the following file:
  [src/general/metadata.ts](https://github.com/wix-private/wix-design-systems-utils/blob/master/packages/wix-ui-icons-common/src/general/metadata.ts) *for general icons*
  or [src/system/metadata.ts](https://github.com/wix-private/wix-design-systems-utils/blob/master/packages/wix-ui-icons-common/src/system/metadata.ts) *for system icons*

  Icons should be entered in the following format:
  ```javascript
  {
      title: "Hidden",
      category: "Toggle",
      description:
        "Static indicator- marks item an unlisted or hidden\nButton - makes item hidden or unlisted",
      tags: ["eye", "hide", "show"],
      sizes: { "18": "HiddenSmall", "24": "Hidden" },
      aliases: ["VisibleHidden", "VisibileHidden"],
  }
  ```

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