@storybook/icons

What is @storybook/icons?

The @storybook/icons package provides a set of icons specifically designed for use with Storybook, a popular tool for developing UI components in isolation. It includes icons that are commonly used in UI development and design systems, making it easier for developers to integrate visually consistent icons into their Storybook projects.

What are @storybook/icons's main functionalities?

Using icons in Storybook UI

This feature allows developers to easily integrate icons into their Storybook UI. The example shows how to import and use an icon from the @storybook/icons package in a React component.

import { Icons } from '@storybook/icons';

function MyComponent() {
  return <Icons icon='check' />;
}

Other packages similar to @storybook/icons

@fortawesome/fontawesome-svg-core

Like @storybook/icons, this package provides a comprehensive set of icons. FontAwesome is more extensive and widely used in various projects beyond Storybook. It offers a larger variety of icons and additional styling capabilities.

material-icons

This package offers icons from Google's Material Design system. While @storybook/icons is tailored for Storybook integration, material-icons provides a broader range of icons suitable for general use across web and mobile applications, offering style consistency with Material Design guidelines.

README

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