diff --git a/examples/nextjs-app/package.json b/examples/nextjs-app/package.json
index a3f8aa2c..277cee3e 100644
--- a/examples/nextjs-app/package.json
+++ b/examples/nextjs-app/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@tailor-platform/app-shell": "workspace:*",
+    "lucide-react": "catalog:",
     "next": "16.2.6",
     "react": "catalog:",
     "react-dom": "catalog:",
diff --git a/examples/nextjs-app/src/modules/custom-module.tsx b/examples/nextjs-app/src/modules/custom-module.tsx
index a0223964..0e518b47 100644
--- a/examples/nextjs-app/src/modules/custom-module.tsx
+++ b/examples/nextjs-app/src/modules/custom-module.tsx
@@ -1,6 +1,6 @@
 import { defineModule, Link, ResourceComponentProps } from "@tailor-platform/app-shell";
 import { useT, labels } from "./i18n-labels";
-import { ZapIcon } from "./pages/metric-card-demo";
+import { Zap as ZapIcon } from "lucide-react";
 import { actionPanelDemoResource } from "./pages/action-panel-demo";
 import { metricCardDemoResource } from "./pages/metric-card-demo";
 import { activityCardDemoResource } from "./pages/activity-card-demo";
diff --git a/examples/nextjs-app/src/modules/pages/action-panel-demo.tsx b/examples/nextjs-app/src/modules/pages/action-panel-demo.tsx
index 42dd10ee..b19ca4c3 100644
--- a/examples/nextjs-app/src/modules/pages/action-panel-demo.tsx
+++ b/examples/nextjs-app/src/modules/pages/action-panel-demo.tsx
@@ -1,64 +1,9 @@
 import { defineResource, ActionPanel, useNavigate, useToast } from "@tailor-platform/app-shell";
-import type { SVGProps } from "react";
-
-export const ReceiptIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z" />
-    <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" />
-    <path d="M12 17.5v-11" />
-  </svg>
-);
-
-export const FileTextIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
-    <polyline points="14 2 14 8 20 8" />
-    <line x1="16" x2="8" y1="13" y2="13" />
-    <line x1="16" x2="8" y1="17" y2="17" />
-    <line x1="10" x2="8" y1="9" y2="9" />
-  </svg>
-);
-
-export const ExternalLinkIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-    <polyline points="15 3 21 3 21 9" />
-    <line x1="10" x2="21" y1="14" y2="3" />
-  </svg>
-);
+import {
+  Receipt as ReceiptIcon,
+  FileText as FileTextIcon,
+  ExternalLink as ExternalLinkIcon,
+} from "lucide-react";
 
 const ActionPanelDemoPage = () => {
   const navigate = useNavigate();
@@ -85,7 +30,7 @@ const ActionPanelDemoPage = () => {
           {
             key: "create-invoice",
             label: "Create new sales invoice",
-            icon: <ReceiptIcon />,
+            icon: <ReceiptIcon size={16} />,
             onClick: () => {
               toast("Create invoice clicked");
             },
@@ -93,7 +38,7 @@ const ActionPanelDemoPage = () => {
           {
             key: "delivery-note",
             label: "Create new delivery note",
-            icon: <FileTextIcon />,
+            icon: <FileTextIcon size={16} />,
             onClick: () => {
               toast("Create delivery note clicked");
             },
@@ -101,7 +46,7 @@ const ActionPanelDemoPage = () => {
           {
             key: "view-po-demo",
             label: "View Purchase Order Demo",
-            icon: <ExternalLinkIcon />,
+            icon: <ExternalLinkIcon size={16} />,
             onClick: () => navigate("/custom-page/purchase-order-demo"),
           },
         ]}
diff --git a/examples/nextjs-app/src/modules/pages/activity-card-demo.tsx b/examples/nextjs-app/src/modules/pages/activity-card-demo.tsx
index 8766f0ca..57530f9a 100644
--- a/examples/nextjs-app/src/modules/pages/activity-card-demo.tsx
+++ b/examples/nextjs-app/src/modules/pages/activity-card-demo.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   Link,
 } from "@tailor-platform/app-shell";
+import { Check, X } from "lucide-react";
 
 export const activityCardDemoActivities = [
   {
@@ -120,18 +121,7 @@ const ApprovedIcon = () => (
       justifyContent: "center",
     }}
   >
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="white"
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
+    <Check size={14} color="white" strokeWidth={3} />
   </div>
 );
 
@@ -147,19 +137,7 @@ const RejectedIcon = () => (
       justifyContent: "center",
     }}
   >
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="white"
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
+    <X size={14} color="white" strokeWidth={3} />
   </div>
 );
 
diff --git a/examples/nextjs-app/src/modules/pages/admin-only.tsx b/examples/nextjs-app/src/modules/pages/admin-only.tsx
index 1e2dcc34..a9a4225b 100644
--- a/examples/nextjs-app/src/modules/pages/admin-only.tsx
+++ b/examples/nextjs-app/src/modules/pages/admin-only.tsx
@@ -1,5 +1,5 @@
 import { defineResource, hidden, pass, type Guard } from "@tailor-platform/app-shell";
-import type { SVGProps } from "react";
+import { Shield as ShieldIcon } from "lucide-react";
 
 /**
  * Guard that checks if the user has admin role.
@@ -15,25 +15,6 @@ const adminOnlyGuard: Guard = ({ context }) => {
   return pass();
 };
 
-const ShieldIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
-    </svg>
-  );
-};
-
 export const adminOnlyResource = defineResource({
   path: "admin-only",
   meta: {
@@ -53,9 +34,8 @@ export const adminOnlyResource = defineResource({
           }}
         >
           <ShieldIcon
+            size={24}
             style={{
-              width: "24px",
-              height: "24px",
               color: "hsl(var(--primary))",
             }}
           />
diff --git a/examples/nextjs-app/src/modules/pages/layout-demos.tsx b/examples/nextjs-app/src/modules/pages/layout-demos.tsx
index ed84b70d..9005667d 100644
--- a/examples/nextjs-app/src/modules/pages/layout-demos.tsx
+++ b/examples/nextjs-app/src/modules/pages/layout-demos.tsx
@@ -10,7 +10,11 @@ import {
 import * as React from "react";
 import { mockPurchaseOrder } from "./purchase-order-demo";
 import { activityCardDemoActivities } from "./activity-card-demo";
-import { ReceiptIcon, FileTextIcon, ExternalLinkIcon } from "./action-panel-demo";
+import {
+  Receipt as ReceiptIcon,
+  FileText as FileTextIcon,
+  ExternalLink as ExternalLinkIcon,
+} from "lucide-react";
 
 /**
  * Placeholder component with subtle diagonal lines pattern for empty content areas
diff --git a/examples/nextjs-app/src/modules/pages/metric-card-demo.tsx b/examples/nextjs-app/src/modules/pages/metric-card-demo.tsx
index 7c972a78..8b9206ae 100644
--- a/examples/nextjs-app/src/modules/pages/metric-card-demo.tsx
+++ b/examples/nextjs-app/src/modules/pages/metric-card-demo.tsx
@@ -1,24 +1,5 @@
 import { defineResource, Layout, MetricCard } from "@tailor-platform/app-shell";
-import type { SVGProps } from "react";
-
-export const ZapIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M4 14a1 1 0 0 1-.8-1.6l9-11A1 1 0 0 1 14 2v7h6a1 1 0 0 1 .8 1.6l-9 11A1 1 0 0 1 10 22v-7z" />
-    </svg>
-  );
-};
+import { Zap as ZapIcon } from "lucide-react";
 
 const MetricCardDemoPage = () => (
   <Layout>
@@ -50,7 +31,7 @@ const MetricCardDemoPage = () => (
             value="42"
             trend={{ direction: "neutral", value: "0%" }}
             description="this week"
-            icon={<ZapIcon style={{ width: 14, height: 14 }} />}
+            icon={<ZapIcon size={14} />}
           />
         </div>
         <div className="astw:min-w-[200px] astw:flex-1">
diff --git a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx
index 8cef8fe2..dff62ddf 100644
--- a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx
+++ b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx
@@ -12,63 +12,13 @@ import {
   Table,
   Tabs,
 } from "@tailor-platform/app-shell";
+import {
+  LayoutDashboard as LayoutDashboardIcon,
+  FolderKanban as FolderKanbanIcon,
+  Settings as SettingsIcon,
+} from "lucide-react";
 import * as React from "react";
 
-const LayoutDashboardIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <rect width="7" height="9" x="3" y="3" rx="1" />
-    <rect width="7" height="5" x="14" y="3" rx="1" />
-    <rect width="7" height="5" x="3" y="16" rx="1" />
-    <rect width="7" height="9" x="14" y="12" rx="1" />
-  </svg>
-);
-
-const FolderKanbanIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z" />
-    <path d="M8 10v4" />
-    <path d="M12 10v2" />
-    <path d="M16 10v6" />
-  </svg>
-);
-
-const SettingsIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-    <circle cx="12" cy="12" r="3" />
-  </svg>
-);
-
 export const primitiveComponentsDemoResource = defineResource({
   path: "primitives-demo",
   meta: {
@@ -467,13 +417,13 @@ export const primitiveComponentsDemoResource = defineResource({
                     <Tabs.Root defaultValue="overview" variant="capsule">
                       <Tabs.List>
                         <Tabs.Tab value="overview">
-                          <LayoutDashboardIcon />
+                          <LayoutDashboardIcon size={16} />
                         </Tabs.Tab>
                         <Tabs.Tab value="projects">
-                          <FolderKanbanIcon />
+                          <FolderKanbanIcon size={16} />
                         </Tabs.Tab>
                         <Tabs.Tab value="settings">
-                          <SettingsIcon />
+                          <SettingsIcon size={16} />
                         </Tabs.Tab>
                       </Tabs.List>
                       <Tabs.Panel value="overview">Overview content</Tabs.Panel>
diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json
index cbddfbea..ce6e5bf1 100644
--- a/examples/vite-app/package.json
+++ b/examples/vite-app/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tailor-platform/app-shell": "workspace:*",
-    "lucide-react": "^1.8.0",
+    "lucide-react": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "tailwindcss": "catalog:"
diff --git a/packages/core/package.json b/packages/core/package.json
index ebcddb37..91f23107 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -58,7 +58,7 @@
     "encoding-japanese": "^2.2.0",
     "es-toolkit": "^1.45.1",
     "graphql": "^16.14.0",
-    "lucide-react": "^1.8.0",
+    "lucide-react": "catalog:",
     "papaparse": "^5.5.3",
     "react-hook-form": "^7.71.2",
     "react-router": "^7.14.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 20a6d092..fd268202 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ catalogs:
     '@vitejs/plugin-react':
       specifier: ^5.2.0
       version: 5.2.0
+    lucide-react:
+      specifier: ^1.8.0
+      version: 1.8.0
     oxfmt:
       specifier: ^0.47.0
       version: 0.47.0
@@ -122,6 +125,9 @@ importers:
       '@tailor-platform/app-shell':
         specifier: workspace:*
         version: link:../../packages/core
+      lucide-react:
+        specifier: 'catalog:'
+        version: 1.8.0(react@19.2.6)
       next:
         specifier: 16.2.6
         version: 16.2.6(@opentelemetry/api@1.9.1)(@playwright/test@1.51.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -169,7 +175,7 @@ importers:
         specifier: workspace:*
         version: link:../../packages/core
       lucide-react:
-        specifier: ^1.8.0
+        specifier: 'catalog:'
         version: 1.8.0(react@19.2.6)
       react:
         specifier: 'catalog:'
@@ -233,7 +239,7 @@ importers:
         specifier: ^16.14.0
         version: 16.14.0
       lucide-react:
-        specifier: ^1.8.0
+        specifier: 'catalog:'
         version: 1.8.0(react@19.2.6)
       papaparse:
         specifier: ^5.5.3
@@ -6075,7 +6081,7 @@ snapshots:
       commander: 13.1.0
       glob: 11.1.0
       ink: 6.0.1(@types/react@19.2.13)(react@19.1.1)
-      ink-gradient: 3.0.0(ink@6.0.1(@types/react@19.2.13)(react@19.2.6))
+      ink-gradient: 3.0.0(ink@6.0.1(@types/react@19.2.13)(react@19.1.1))
       inquirer: 12.6.3(@types/node@25.9.1)
       neverthrow: 8.2.0
       react: 19.1.1
@@ -8169,7 +8175,7 @@ snapshots:
 
   ini@1.3.8: {}
 
-  ink-gradient@3.0.0(ink@6.0.1(@types/react@19.2.13)(react@19.2.6)):
+  ink-gradient@3.0.0(ink@6.0.1(@types/react@19.2.13)(react@19.1.1)):
     dependencies:
       '@types/gradient-string': 1.1.6
       gradient-string: 2.0.2
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 7747deb3..212717d1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -9,6 +9,7 @@ catalog:
   "@types/react": ^19
   "@types/react-dom": ^19
   "@vitejs/plugin-react": ^5.2.0
+  lucide-react: ^1.8.0
   oxfmt: ^0.47.0
   oxlint: ^1.64.0
   react: ^19.2.6