Choose icons beside the components that use them.
Search IconSearch from a Storybook panel and copy production-ready snippets without breaking the component development loop.
A focused IconSearch experience for Storybook.
The interface keeps discovery, inspection, and the final handoff close together while using the same live catalog as the website.
Panel-based search
Browse icons in the same workspace used to inspect stories, controls, and component states.
Framework-friendly output
Copy React, SVG, Tailwind, Vue, Svelte, or URL output from one addon.
Useful catalog filters
Choose a library, commercial-safety state, and desired snippet format.
Shared product vocabulary
Design-system contributors can discuss the same icon names while reviewing components.
From local setup to a real icon.
Build or link the addon package
Add it to .storybook/main.ts
Open the IconSearch panel
Search and copy a snippet into the component
cd storybook-addon
npm install
npm run build
npm run typecheckPackage output is ready for a host-app test.
Build and typecheck pass locally. The next steps are an end-to-end linked Storybook test and publication to the Storybook addon ecosystem.