How to Display SVG Icons in Storybook
Set up Storybook stories to browse, preview, and document your project's SVG icon library visually.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Creating an Icon Gallery Story
Build a Storybook story that maps over your full icon registry, rendering each icon alongside its name as a visual reference gallery, making it easy for the team to browse available icons.
- Map over your icon registry to render every icon in one story
- Display each icon's name label alongside its visual rendering
- Update automatically as new icons are added to the registry
Interactive Icon Controls
Add Storybook controls for size and color props on individual icon stories, letting designers and developers interactively test how icons look at different sizes and color values without writing code.
- Add controls (knobs) for size and color on individual icon stories
- Useful for designers to test icon appearance without code changes
- Document usage examples alongside the interactive controls
Frequently Asked Questions
Can Storybook auto-generate stories for all my icons?
Yes — write a single story that iterates over your icon registry object, automatically generating a gallery view that stays in sync as icons are added or removed.
Why document icons in Storybook instead of a styleguide doc?
Storybook provides live, interactive rendering and controls, letting team members test real icon behavior rather than just viewing static documentation images.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG