@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.

Install

yarn add @storybook/icons

To Do

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

Generating new icons from Figma

This command will fetch all icons from Figma locally and create react components + stories automatically

yarn icons

Inpired from this article.

Developing

Watch and rebuild code with tsup and runs Storybook to preview your UI during development.

yarn storybook

Building

Build package with tsup for production.

yarn build