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

• <input checked="" disabled="" type="checkbox"> Export every single icon instead of a single component
• <input checked="" disabled="" type="checkbox"> 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

v1.4.0 (Fri Mar 07 2025)

🚀 Enhancement

• Add sweep icon #40 (@ghengeveld)

Authors: 1

• Gert Hengeveld (@ghengeveld)

v1.3.2 (Thu Jan 23 2025)

🐛 Bug Fix

• Generate new icons #38 (@andrewortwein)

📝 Documentation

• Update docs to use pnpm instead of yarn #37 (@andrewortwein @JReinhold)

Authors: 2

• Andrew Ortwein (@andrewortwein)
• Jeppe Reinhold (@JReinhold)

v1.3.1 (Wed Jan 22 2025)

🐛 Bug Fix

• Fix a couple minor typos #36 (@andrewortwein)

Authors: 1

• Andrew Ortwein (@andrewortwein)

v1.3.0 (Fri Dec 06 2024)

🚀 Enhancement

• Support React 19 #35 (@yannbf)

Authors: 1

• Yann Braga (@yannbf)

v1.2.12 (Wed Sep 18 2024)

🐛 Bug Fix

• Add StopAltHollow icon #33 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.2.11 (Wed Sep 18 2024)

🐛 Bug Fix

• Add 3 new icons (PlayAll, PlayHollow, Save) #32 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.2.10 (Fri Jul 26 2024)

🐛 Bug Fix

• Add StatusFailIcon, StatusPassIcon, StatusWarnIcon #31 (@cdedreuille)
• Upgrade storybook and add icon search #30 (@yannbf)

Authors: 2

• Charles de Dreuille (@cdedreuille)
• Yann Braga (@yannbf)

v1.2.9 (Mon Mar 11 2024)

🐛 Bug Fix

• Add the X icon #28 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.2.4 (Thu Mar 07 2024)

🐛 Bug Fix

• Fix permissions auto #27 (@cdedreuille)
• Update package.json #26 (@cdedreuille)
• Added new arrows ↗️↘️↙️↖️ #25 (@cdedreuille @yannbf)
• Fix DiamondIcon color #24 (@ghengeveld)

Authors: 3

• Charles de Dreuille (@cdedreuille)
• Gert Hengeveld (@ghengeveld)
• Yann Braga (@yannbf)

v1.2.3 (Wed Nov 29 2023)

🐛 Bug Fix

• Update menu icon #23 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.2.2 (Mon Nov 13 2023)

🐛 Bug Fix

• Added new small chevron icons #22 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.2.1 (Thu Oct 19 2023)

🐛 Bug Fix

• Fix tree shaking #21 (@cdedreuille)

⚠️ Pushed to main

• Update README.md (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.2.0 (Thu Oct 12 2023)

🚀 Enhancement

• Remove wrapper + add forwardRef #20 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.1.7 (Wed Sep 20 2023)

🐛 Bug Fix

• Improve tree shaking #19 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.1.6 (Wed Aug 09 2023)

🐛 Bug Fix

• Fix export #18 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.1.5 (Sun Aug 06 2023)

🐛 Bug Fix

• Fix repo, bugs and homepage package.json fields #17 (@amitdahan)

Authors: 1

• Amit Dahan (@amitdahan)

v1.1.4 (Fri Aug 04 2023)

🐛 Bug Fix

• Fix peer dependencies to make sure it work for React 16 #16 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.1.3 (Fri Aug 04 2023)

🐛 Bug Fix

• Move all deps to dev deps #14 (@TrySound @cdedreuille)

Authors: 2

• Bogdan Chadkin (@TrySound)
• Charles de Dreuille (@cdedreuille)

v1.1.2 (Wed Aug 02 2023)

🐛 Bug Fix

• Fix logo #13 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.1.1 (Wed Aug 02 2023)

🐛 Bug Fix

• Fix icon sizes error #12 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.1.0 (Tue Aug 01 2023)

🚀 Enhancement

• Update names #11 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.8 (Mon Jul 31 2023)

🐛 Bug Fix

• Update tsup.config.ts #10 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.7 (Mon Jul 31 2023)

🐛 Bug Fix

• Add suspense with fallback #9 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.6 (Mon Jul 31 2023)

🐛 Bug Fix

• Update icons #8 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.5 (Tue Jul 18 2023)

🐛 Bug Fix

• Fix package version #7 (@cdedreuille)
• Move to storybook #5 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.5 (Tue Jul 18 2023)

🐛 Bug Fix

• Move to storybook #5 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.4 (Fri Jul 14 2023)

⚠️ Pushed to main

• Move MDX file (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.3 (Fri Jul 14 2023)

🐛 Bug Fix

• Add Cover #4 (@cdedreuille)
• Improved export + create lists #3 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.2 (Thu Jul 13 2023)

🐛 Bug Fix

• V2 #2 (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)

v1.0.1 (Wed May 24 2023)

🐛 Bug Fix

• Test Deploy #1 (@cdedreuille)

⚠️ Pushed to main

• Move @storybook/addon-a11y to devDependencies (@cdedreuille)
• Update Storybook (@cdedreuille)
• Remove Logo (@cdedreuille)
• Update README.md (@cdedreuille)
• Update icon (@cdedreuille)
• Change icon (@cdedreuille)
• Add logo component (@cdedreuille)
• Add all colored icons (@cdedreuille)
• Added ColoredIcon (@cdedreuille)
• Cleaning (@cdedreuille)
• Hello World ☀️ (@cdedreuille)

Authors: 1

• Charles de Dreuille (@cdedreuille)