How to Use SVG in Storybook

Storybook's isolated component environment needs the same SVG import setup as your main app, plus a few story-specific conventions.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Matching Your App's SVG Import Setup

Storybook builds components in isolation using its own Webpack or Vite configuration, which must mirror whatever SVG handling (SVGR, sprite imports, inline markup) your main application uses — a common gotcha is icon components rendering fine in the app but breaking in Storybook due to divergent build configs.

Storybook's build config must mirror your main app's SVG handling
Divergent configs between app and Storybook are a common breakage source
Verify the same SVGR or plugin setup is present in both configurations

Documenting Icon Components as Stories

A dedicated Icons story (often using Storybook's `argTypes` controls) lets you showcase every icon variant with interactive props — size, color, stroke width — giving designers and developers a browsable, testable reference for the full icon set without hunting through source code.

Dedicated icon stories showcase the full set with interactive controls
argTypes controls let viewers adjust size, color, and other props live
Serves as a browsable reference alternative to searching source code

Frequently Asked Questions

Why does my SVG icon render in my app but break in Storybook?

Storybook uses its own build configuration separate from your main app — verify the same SVG-handling plugin (SVGR, Vite SVG plugin, etc.) is configured in Storybook's .storybook/main.js as well.

Can Storybook show every color variant of an icon automatically?

Yes — using argTypes controls bound to a color prop on your icon component, viewers can interactively change the color directly within the Storybook UI without needing separate hardcoded story variants for each color.

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