diff --git a/package.json b/package.json
index 9e7ebd9..1d66ac9 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,8 @@
   "devDependencies": {
     "@biomejs/biome": "2.3.1",
     "@cloudflare/workers-types": "^4.20251014.0",
+    "@magicons/hero-icons": "^0.0.3",
+    "@magicons/react": "^0.0.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -58,6 +60,7 @@
     "@vitest/coverage-v8": "^4.0.4",
     "autoprefixer": "^10.4.21",
     "jsdom": "^27.0.1",
+    "magicons": "^0.0.3",
     "playwright": "^1.56.1",
     "rollup-plugin-visualizer": "^6.0.5",
     "tailwindcss": "^4.1.16",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 368e470..5be5a4d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,12 @@ importers:
       '@cloudflare/workers-types':
         specifier: ^4.20251014.0
         version: 4.20251014.0
+      '@magicons/hero-icons':
+        specifier: ^0.0.3
+        version: 0.0.3
+      '@magicons/react':
+        specifier: ^0.0.1
+        version: 0.0.1(react@18.3.1)
       '@testing-library/jest-dom':
         specifier: ^6.9.1
         version: 6.9.1
@@ -117,6 +123,9 @@ importers:
       jsdom:
         specifier: ^27.0.1
         version: 27.0.1(postcss@8.5.6)
+      magicons:
+        specifier: ^0.0.3
+        version: 0.0.3
       playwright:
         specifier: ^1.56.1
         version: 1.56.1
@@ -911,6 +920,17 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
+  '@magicons/hero-icons@0.0.3':
+    resolution: {integrity: sha512-2C1JFuNqj1rNzmbJLoeqOKDpqOJAafS8xo6UzuvFZgq4l0AevKj20Zl272WwgFoyC3Gt4VcstvNsbqT+Ae0bxw==}
+
+  '@magicons/react@0.0.1':
+    resolution: {integrity: sha512-+SOISf1uhObfhGI6DZ2pgHWEwPMULFum0QqVu31jw0WcKpy3CZFLn4V8xnCMNq1Jcvdrt2DgykiBPT0+L4+hGw==}
+    peerDependencies:
+      react: ^19.2.0
+
+  '@magicons/shared@0.0.1':
+    resolution: {integrity: sha512-HmX/sNyYCYlE3li354+beoRrNqqh3mG9Hs2JjlrXX2MicgbZAWAIpmS6NM4SSE5dE8oMVSskEqTFX/q2rJ3Bsw==}
+
   '@mediapipe/tasks-vision@0.10.17':
     resolution: {integrity: sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==}
 
@@ -2170,6 +2190,9 @@ packages:
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
+  magicons@0.0.3:
+    resolution: {integrity: sha512-qxRtOoit9SKS0cm0GgvKerMLe6pAVCL0rparwUnkC6r2kAXGbu1azDvH9y/p8ziv5nKQ3qWqzJp09n4h/UEnCg==}
+
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
@@ -3533,6 +3556,15 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@magicons/hero-icons@0.0.3': {}
+
+  '@magicons/react@0.0.1(react@18.3.1)':
+    dependencies:
+      '@magicons/shared': 0.0.1
+      react: 18.3.1
+
+  '@magicons/shared@0.0.1': {}
+
   '@mediapipe/tasks-vision@0.10.17': {}
 
   '@monogrid/gainmap-js@3.1.0(three@0.180.0)':
@@ -4774,6 +4806,10 @@ snapshots:
       '@babel/types': 7.28.5
       source-map-js: 1.2.1
 
+  magicons@0.0.3:
+    dependencies:
+      '@magicons/shared': 0.0.1
+
   make-dir@4.0.0:
     dependencies:
       semver: 7.7.3
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 36eac1f..9ee6d95 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,3 +1,4 @@
+import { Icon } from "@magicons/react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -61,20 +62,7 @@ export function SearchBar({
       <button
         type="submit"
         className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-r-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
-        <svg
-          className="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg">
-          <title>Search</title>
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-          />
-        </svg>
+        <Icon src="@hero-MagnifyingGlass" />
       </button>
     </form>
   );
diff --git a/src/pages/Product.tsx b/src/pages/Product.tsx
index 40019fd..fe2da83 100644
--- a/src/pages/Product.tsx
+++ b/src/pages/Product.tsx
@@ -1,4 +1,4 @@
-import { ShoppingBagIcon, UserIcon } from "@heroicons/react/24/outline";
+import { Icon } from "@magicons/react";
 import { lazy, Suspense, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import ColorPicker from "../components/ColorPicker";
@@ -55,13 +55,18 @@ export default function ProductPage() {
                   href="/profile"
                   className="p-2 text-gray-400 hover:text-gray-500 lg:ml-4">
                   <span className="sr-only">Account</span>
-                  <UserIcon aria-hidden="true" className="h-6 w-6" />
+                  <Icon
+                    src="@hero-User"
+                    aria-hidden="true"
+                    className="h-6 w-6"
+                  />
                 </a>
 
                 {/* Cart */}
                 <div className="ml-4 flow-root lg:ml-6">
                   <Link to="/cart" className="group -m-2 flex items-center p-2">
-                    <ShoppingBagIcon
+                    <Icon
+                      src="@hero-ShoppingBag"
                       aria-hidden="true"
                       className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-gray-500"
                     />
diff --git a/src/pages/SearchResults.tsx b/src/pages/SearchResults.tsx
index febddd6..dabb3a4 100644
--- a/src/pages/SearchResults.tsx
+++ b/src/pages/SearchResults.tsx
@@ -1,3 +1,4 @@
+import { Icon } from "@magicons/react";
 import { useEffect, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { BASE_URL } from "../config";
@@ -111,20 +112,7 @@ export default function SearchResults() {
         {products.length === 0 && query ? (
           <div className="text-center py-12">
             <div className="text-gray-400 mb-4">
-              <svg
-                className="w-16 h-16 mx-auto"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <title>No products found</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1}
-                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                />
-              </svg>
+              <Icon src="@hero-MagnifyingGlass" />
             </div>
             <h3 className="text-lg font-medium text-gray-900 mb-2">
               No products found
diff --git a/tsconfig.json b/tsconfig.json
index 0613f07..197108e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,9 +21,13 @@
     "noFallthroughCasesInSwitch": true,
     "types": [
       "@cloudflare/workers-types/2023-07-01",
-      "vitest"
+      "vitest",
+      "@magicons/hero-icons",
+      "@magicons/lucide-icons",
+      "@magicons/mdi-icons"
     ]
   },
+  
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 4c14608..d2c0188 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,7 @@ import tailwindcss from '@tailwindcss/vite';
 import viteReact from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import { visualizer } from "rollup-plugin-visualizer";
+import { magicons } from 'magicons'
 
 
 const isAnalyze = process.env.ANALYZE === 'true';
@@ -9,6 +10,7 @@ const isAnalyze = process.env.ANALYZE === 'true';
 
 export default defineConfig({
   plugins: [viteReact(), tailwindcss(),
+    magicons(),
     (isAnalyze) &&
       visualizer({
         filename: 'stats.html',