diff --git a/.storybook/main.ts b/.storybook/main.ts
index b678638..b598cf6 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -16,6 +16,35 @@ const config: StorybookConfig = {
     name: "@storybook/nextjs",
     options: {},
   },
+  webpackFinal: (config: any) => {
+    // this modifies the existing image rule to exclude .svg files
+    // since we want to handle those files with @svgr/webpack
+    const svgRules = config.module.rules.filter((rule) =>
+      rule.test?.test('.svg')
+    );
+    svgRules.forEach((rule) => {
+      rule.exclude = /\.svg$/;
+    });
+
+    // configure .svg files to be loaded with @svgr/webpack and as assets
+    config.module.rules.push(
+      {
+        test: /\.svg$/i,
+        type: 'asset',
+        resourceQuery: /url/, // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: {
+          not: [/url/],
+        },
+        // exclude react component if *.svg?url
+        use: ['@svgr/webpack'],
+      }
+    );
+    return config;
+  },
 };
 
 export default config;