@storybook/icons
Advanced tools
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.
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' />;
}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.
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.
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/
yarn add @storybook/icons
This command will fetch all icons from Figma locally and create react components + stories automatically
yarn generate-icons
Inpired from this article.
Watch and rebuild code with tsup and runs Storybook to preview your UI during development.
yarn storybook
Build package with tsup for production.
yarn build
FAQs
Icon library from the Storybook team
The npm package @storybook/icons receives a total of 1,956,713 weekly downloads. As such, @storybook/icons popularity was classified as popular.
We found that @storybook/icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.