diff --git a/config/build/loaders/buildSvgrLoader.ts b/config/build/loaders/buildSvgrLoader.ts
index 71b9ad9..22a6369 100644
--- a/config/build/loaders/buildSvgrLoader.ts
+++ b/config/build/loaders/buildSvgrLoader.ts
@@ -17,7 +17,32 @@
 export function buildSvgrLoader() {
   const svgrLoader = {
     test: /\.svg$/,
-    use: ['@svgr/webpack'],
+    use: [
+      {
+        loader: '@svgr/webpack',
+        options: {
+          // Replace currentColor with props
+          replaceAttrValues: {
+            currentColor: '{props.stroke || "currentColor"}',
+          },
+          // Allow width and height to be customizable
+          dimensions: false,
+          svgoConfig: {
+            plugins: [
+              {
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    // Keep viewBox for proper scaling
+                    removeViewBox: false,
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    ],
   }
 
   return svgrLoader
diff --git a/src/app/types/declarations.d.ts b/src/app/types/declarations.d.ts
index 144c247..79c4950 100644
--- a/src/app/types/declarations.d.ts
+++ b/src/app/types/declarations.d.ts
@@ -11,4 +11,8 @@ declare module '*.scss' {
 declare module '*.png'
 declare module '*.jpg'
 declare module '*.jpeg'
-declare module '*.svg'
+declare module '*.svg' {
+  import React from 'react'
+  const SVGComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  export default SVGComponent
+}