diff --git a/.storybook/main.ts b/.storybook/main.ts
index 8d235f819..e802bf7fd 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -22,7 +22,12 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     // Merge custom configuration into the default config
     return mergeConfig(config, {
-      plugins: [svgr({ exportAsDefault: true })],
+      plugins: [
+        svgr({
+          svgrOptions: { exportType: 'default', ref: true, svgo: true },
+          include: '**/*.svg',
+        }),
+      ],
     });
   },
 };
diff --git a/package-lock.json b/package-lock.json
index 09b3746bc..8faf0a041 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -102,7 +102,7 @@
         "svgo": "^3.3.2",
         "terser-webpack-plugin": "^5.3.10",
         "typescript": "^5.5.3",
-        "vite-plugin-svgr": "^3.3.0",
+        "vite-plugin-svgr": "^4.2.0",
         "wcag-contrast": "^3.0.0",
         "webpack": "^5.92.1",
         "webpack-cli": "^5.1.4",
@@ -7352,9 +7352,9 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz",
-      "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -7365,7 +7365,7 @@
         "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
       },
       "peerDependenciesMeta": {
         "rollup": {
@@ -12871,9 +12871,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001639",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz",
-      "integrity": "sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==",
+      "version": "1.0.30001643",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz",
+      "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==",
       "funding": [
         {
           "type": "opencollective",
@@ -31033,17 +31033,17 @@
       }
     },
     "node_modules/vite-plugin-svgr": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-3.3.0.tgz",
-      "integrity": "sha512-vWZMCcGNdPqgziYFKQ3Y95XP0d0YGp28+MM3Dp9cTa/px5CKcHHrIoPl2Jw81rgVm6/ZUNONzjXbZQZ7Kw66og==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz",
+      "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==",
       "dev": true,
       "dependencies": {
-        "@rollup/pluginutils": "^5.0.4",
+        "@rollup/pluginutils": "^5.0.5",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0"
       },
       "peerDependencies": {
-        "vite": "^2.6.0 || 3 || 4"
+        "vite": "^2.6.0 || 3 || 4 || 5"
       }
     },
     "node_modules/w3c-xmlserializer": {
diff --git a/package.json b/package.json
index 977e5f98d..ca48340db 100644
--- a/package.json
+++ b/package.json
@@ -152,7 +152,7 @@
     "svgo": "^3.3.2",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "^5.5.3",
-    "vite-plugin-svgr": "^3.3.0",
+    "vite-plugin-svgr": "^4.2.0",
     "wcag-contrast": "^3.0.0",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",