A set of commonly used icons for the Wix UI design system. Storybook
Note: This project was migrated from wix-ui. The old Git history is available here.
npm install @wix/wix-ui-icons-common
You should use the system icons for internal components and the general icons for the consumer of your project. To import and use wixStyleReact icons:
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:
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:
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';
- Uninstall
wix-ui-icons-common
- Install
@wix/wix-ui-icons-common
- Use this codemod to change all old-style imports
- Check the codemod's output before committing to avoid potential mistakes.
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 |
All icons have the same interface which you can import like so:
import { IconProps } from '@wix/wix-ui-icons-common';
Before adding a new icon, please consult with your relevant UX. Not from Wix? Please open a github issue and we'll be happy to help
-
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 andshape
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/general/raw
orsrc/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 for general icons or src/system/metadata.ts for system icons
Icons should be entered in the following format:
{ 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"], }
-