diff --git a/@types/images.d.ts b/@types/images.d.ts
index 8d735bfb799178a91fc1e99c52ddabbf3fcd50c3..902261753088a14cefecf4029b59e7d1c7cfafc6 100644
--- a/@types/images.d.ts
+++ b/@types/images.d.ts
@@ -10,12 +10,12 @@ declare module '*.png' {
   export default content;
 }
 
-declare module '*.svg' {
+declare module '*.svg?component' {
   const content: React.FC<React.SVGProps<SVGSVGElement>>;
   export default content;
 }
 
-declare module '*.svg?url' {
+declare module '*.svg' {
   const content: any;
   export default content;
 }
diff --git a/next.config.js b/next.config.js
index 44b570e13a40e0280ec9fa00ad95e3c3b054a167..966d1c5cc41373919a0b22a838dacbc185b4959b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,12 +7,12 @@ const nextConfig = {
       {
         ...fileLoaderRule,
         test: /\.svg$/i,
-        resourceQuery: /url/,
+        resourceQuery: { not: /component/ },
       },
       {
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/,
-        resourceQuery: { not: /url/ },
+        resourceQuery: /component/,
         use: ['@svgr/webpack'],
       },
     );
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index 0ba0aed97a1f49232847f4f8afe75877a6bb9f63..7f2462eb697c5bfb11d4151528a3af299d154746 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/src/shared/Icon/Icon.component.tsx
@@ -1,10 +1,10 @@
-import ChevronRightIcon from '@/assets/vectors/icons/chevron-right.svg';
-import ChevronLeftIcon from '@/assets/vectors/icons/chevron-left.svg';
-import ChevronUpIcon from '@/assets/vectors/icons/chevron-up.svg';
-import ChevronDownIcon from '@/assets/vectors/icons/chevron-down.svg';
-import PlusIcon from '@/assets/vectors/icons/plus.svg';
-import ArrowIcon from '@/assets/vectors/icons/arrow.svg';
-import DotsIcon from '@/assets/vectors/icons/dots.svg';
+import ChevronRightIcon from '@/assets/vectors/icons/chevron-right.svg?component';
+import ChevronLeftIcon from '@/assets/vectors/icons/chevron-left.svg?component';
+import ChevronUpIcon from '@/assets/vectors/icons/chevron-up.svg?component';
+import ChevronDownIcon from '@/assets/vectors/icons/chevron-down.svg?component';
+import PlusIcon from '@/assets/vectors/icons/plus.svg?component';
+import ArrowIcon from '@/assets/vectors/icons/arrow.svg?component';
+import DotsIcon from '@/assets/vectors/icons/dots.svg?component';
 
 type Name =
   | 'chevron-right'