Icons

This library contains the icons used in Storybook and Chromatic apps and marketing sites. They are 14x14. To view the list of all available icons, please go to https://main--64b56e737c0aeefed9d5e675.chromatic.com/

Install

npm:

npm install @storybook/icons

yarn:

yarn add @storybook/icons

pnpm:

pnpm add @storybook/icons

To Do

• Export every single icon instead of a single component
• Add stories for each component

Generating new icons from Figma

First, set local environment variables:

FIGMA_API_TOKEN=<YOUR_FIGMA_API_TOKEN>
FIGMA_FILE_ID=<FIGMA_FILE_ID>
FIGMA_CANVAS=Icons

Then, fetch all icons from Figma locally and create React components + stories automatically:

pnpm generate-icons

Inspired by this article.

Developing

Watch and rebuild code with tsup and run Storybook to preview your UI during development:

pnpm storybook

Building

Build package with tsup for production:

pnpm build