diff --git a/.eslintignore b/.eslintignore
index 8d871f887f7beca12060a385f3af6e6232def6ef..21cea94cae50f3d724f9198e9076cc08f4b89082 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,7 +2,7 @@ next.config.js
 tailwind.config.js
 prettier.config.js
 postcss.config.js
-jest.config.mjs
+jest.config.ts
 commitlint.config.js
 .gitignore
 next-env.d.ts
diff --git a/@types/images.d.ts b/@types/images.d.ts
index 5d4367bea3b4aad0e8a8e9f96104e3af367cca4c..8d735bfb799178a91fc1e99c52ddabbf3fcd50c3 100644
--- a/@types/images.d.ts
+++ b/@types/images.d.ts
@@ -15,6 +15,11 @@ declare module '*.svg' {
   export default content;
 }
 
+declare module '*.svg?url' {
+  const content: any;
+  export default content;
+}
+
 declare module '*.jpg' {
   const content: StaticImageData;
   export default content;
diff --git a/jest.config.ts b/jest.config.ts
index 7e7dad84baf520a554606ca827b2fbc17c5cfc68..a179ae83043584eeb6bac102e71f1a68d0c717de 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -23,6 +23,9 @@ const config = {
     '!<rootDir>/src/**/*.d.ts',
     '!**/node_modules/**',
   ],
+  moduleNameMapper: {
+    '\\.svg': '@svgr/webpack',
+  },
   coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
 };
diff --git a/next.config.js b/next.config.js
index 042ec825a3ee78ac989c33b94067b35140fc4ed4..44b570e13a40e0280ec9fa00ad95e3c3b054a167 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,11 +2,21 @@
 const nextConfig = {
   reactStrictMode: true,
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
-    });
+    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: /url/ },
+        use: ['@svgr/webpack'],
+      },
+    );
+    fileLoaderRule.exclude = /\.svg$/i;
 
     return config;
   },
diff --git a/package-lock.json b/package-lock.json
index 0e41a874a8af1e7f741efa88df7e8c5d08ab20af..25de3a12ec294dfcc4b68c65ae489c35e889b7ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,8 +20,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "tailwind-merge": "^1.14.0",
-        "tailwindcss": "3.3.3",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss": "3.3.3"
       },
       "devDependencies": {
         "@commitlint/cli": "^17.7.1",
@@ -48,6 +47,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-junit": "^16.0.0",
+        "jest-svg-transformer": "^1.0.0",
         "lint-staged": "^14.0.1",
         "prettier": "^3.0.3",
         "typescript": "^5.2.2"
@@ -10479,6 +10479,16 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/jest-svg-transformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jest-svg-transformer/-/jest-svg-transformer-1.0.0.tgz",
+      "integrity": "sha512-+kD21VthJFHIbI3DZRz+jo4sBOSR1qWEMXhVC28owRMqC5nA+zEiJrHOlj+EqQIztYMouRc1dIjE8SJfFPJUXA==",
+      "dev": true,
+      "peerDependencies": {
+        "jest": ">22",
+        "react": ">=16"
+      }
+    },
     "node_modules/jest-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -13685,14 +13695,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/tailwindcss-animate": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
-      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
index 785ec99851f53c4fa52a564690e2e590a00cebf4..104ac2ea17bd5e3ceffa702352c3c8a8f8e218e1 100644
--- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
+++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import { ChangeEvent, useState } from 'react';
-import lensIcon from '@/assets/vectors/icons/lens.svg';
+import lensIcon from '@/assets/vectors/icons/lens.svg?url';
 
 export const SearchBar = (): JSX.Element => {
   const [searchValue, setSearchValue] = useState<string>('');