diff --git a/src/client/components/CandidateCard.tsx b/src/client/components/CandidateCard.tsx
index fb2ea42..0cec639 100644
--- a/src/client/components/CandidateCard.tsx
+++ b/src/client/components/CandidateCard.tsx
@@ -1,4 +1,5 @@
 import { formatPrice, formatWeight } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
 
 interface CandidateCardProps {
@@ -7,7 +8,7 @@ interface CandidateCardProps {
 	weightGrams: number | null;
 	priceCents: number | null;
 	categoryName: string;
-	categoryEmoji: string;
+	categoryIcon: string;
 	imageFilename: string | null;
 	threadId: number;
 	isActive: boolean;
@@ -19,7 +20,7 @@ export function CandidateCard({
 	weightGrams,
 	priceCents,
 	categoryName,
-	categoryEmoji,
+	categoryIcon,
 	imageFilename,
 	threadId,
 	isActive,
@@ -41,7 +42,7 @@ export function CandidateCard({
 					/>
 				) : (
 					<div className="w-full h-full flex flex-col items-center justify-center">
-						<span className="text-3xl">{categoryEmoji}</span>
+						<LucideIcon name={categoryIcon} size={36} className="text-gray-400" />
 					</div>
 				)}
 			</div>
@@ -61,7 +62,7 @@ export function CandidateCard({
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-						{categoryEmoji} {categoryName}
+						<LucideIcon name={categoryIcon} size={14} className="inline-block mr-1 text-gray-500" /> {categoryName}
 					</span>
 				</div>
 				<div className="flex gap-2">
diff --git a/src/client/components/ItemCard.tsx b/src/client/components/ItemCard.tsx
index 2074e12..0115d1a 100644
--- a/src/client/components/ItemCard.tsx
+++ b/src/client/components/ItemCard.tsx
@@ -1,4 +1,5 @@
 import { formatPrice, formatWeight } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
 
 interface ItemCardProps {
@@ -7,7 +8,7 @@ interface ItemCardProps {
 	weightGrams: number | null;
 	priceCents: number | null;
 	categoryName: string;
-	categoryEmoji: string;
+	categoryIcon: string;
 	imageFilename: string | null;
 	onRemove?: () => void;
 }
@@ -18,7 +19,7 @@ export function ItemCard({
 	weightGrams,
 	priceCents,
 	categoryName,
-	categoryEmoji,
+	categoryIcon,
 	imageFilename,
 	onRemove,
 }: ItemCardProps) {
@@ -71,7 +72,7 @@ export function ItemCard({
 					/>
 				) : (
 					<div className="w-full h-full flex flex-col items-center justify-center">
-						<span className="text-3xl">{categoryEmoji}</span>
+						<LucideIcon name={categoryIcon} size={36} className="text-gray-400" />
 					</div>
 				)}
 			</div>
@@ -91,7 +92,7 @@ export function ItemCard({
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-						{categoryEmoji} {categoryName}
+						<LucideIcon name={categoryIcon} size={14} className="inline-block mr-1 text-gray-500" /> {categoryName}
 					</span>
 				</div>
 			</div>
diff --git a/src/client/components/ItemPicker.tsx b/src/client/components/ItemPicker.tsx
index 8841f10..6013d3a 100644
--- a/src/client/components/ItemPicker.tsx
+++ b/src/client/components/ItemPicker.tsx
@@ -3,6 +3,7 @@ import { SlideOutPanel } from "./SlideOutPanel";
 import { useItems } from "../hooks/useItems";
 import { useSyncSetupItems } from "../hooks/useSetups";
 import { formatWeight, formatPrice } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 
 interface ItemPickerProps {
   setupId: number;
@@ -51,7 +52,7 @@ export function ItemPicker({
     number,
     {
       categoryName: string;
-      categoryEmoji: string;
+      categoryIcon: string;
       items: NonNullable<typeof items>;
     }
   >();
@@ -64,7 +65,7 @@ export function ItemPicker({
       } else {
         grouped.set(item.categoryId, {
           categoryName: item.categoryName,
-          categoryEmoji: item.categoryEmoji,
+          categoryIcon: item.categoryIcon,
           items: [item],
         });
       }
@@ -83,10 +84,10 @@ export function ItemPicker({
             </div>
           ) : (
             Array.from(grouped.entries()).map(
-              ([categoryId, { categoryName, categoryEmoji, items: catItems }]) => (
+              ([categoryId, { categoryName, categoryIcon, items: catItems }]) => (
                 <div key={categoryId} className="mb-4">
                   <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
-                    {categoryEmoji} {categoryName}
+                    <LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}
                   </h3>
                   <div className="space-y-1">
                     {catItems.map((item) => (
diff --git a/src/client/components/ThreadCard.tsx b/src/client/components/ThreadCard.tsx
index ab40f42..7be0a17 100644
--- a/src/client/components/ThreadCard.tsx
+++ b/src/client/components/ThreadCard.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "@tanstack/react-router";
 import { formatPrice } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 
 interface ThreadCardProps {
 	id: number;
@@ -10,7 +11,7 @@ interface ThreadCardProps {
 	createdAt: string;
 	status: "active" | "resolved";
 	categoryName: string;
-	categoryEmoji: string;
+	categoryIcon: string;
 }
 
 function formatDate(iso: string): string {
@@ -36,7 +37,7 @@ export function ThreadCard({
 	createdAt,
 	status,
 	categoryName,
-	categoryEmoji,
+	categoryIcon,
 }: ThreadCardProps) {
 	const navigate = useNavigate();
 
@@ -66,7 +67,7 @@ export function ThreadCard({
 			</div>
 			<div className="flex flex-wrap gap-1.5">
 				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
-					{categoryEmoji} {categoryName}
+					<LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}
 				</span>
 				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
 					{candidateCount} {candidateCount === 1 ? "candidate" : "candidates"}
diff --git a/src/client/hooks/useCategories.ts b/src/client/hooks/useCategories.ts
index 62552b0..4a09694 100644
--- a/src/client/hooks/useCategories.ts
+++ b/src/client/hooks/useCategories.ts
@@ -29,7 +29,7 @@ export function useUpdateCategory() {
     }: {
       id: number;
       name?: string;
-      emoji?: string;
+      icon?: string;
     }) => apiPut<Category>(`/api/categories/${id}`, data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["categories"] });
diff --git a/src/client/hooks/useItems.ts b/src/client/hooks/useItems.ts
index 26fc3af..d2c6f18 100644
--- a/src/client/hooks/useItems.ts
+++ b/src/client/hooks/useItems.ts
@@ -14,7 +14,7 @@ interface ItemWithCategory {
   createdAt: string;
   updatedAt: string;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
 }
 
 export function useItems() {
diff --git a/src/client/hooks/useSetups.ts b/src/client/hooks/useSetups.ts
index cef4fa4..e15f500 100644
--- a/src/client/hooks/useSetups.ts
+++ b/src/client/hooks/useSetups.ts
@@ -23,7 +23,7 @@ interface SetupItemWithCategory {
   createdAt: string;
   updatedAt: string;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
 }
 
 interface SetupWithItems {
diff --git a/src/client/hooks/useThreads.ts b/src/client/hooks/useThreads.ts
index e33386d..c1ec41f 100644
--- a/src/client/hooks/useThreads.ts
+++ b/src/client/hooks/useThreads.ts
@@ -8,7 +8,7 @@ interface ThreadListItem {
   resolvedCandidateId: number | null;
   categoryId: number;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
   createdAt: string;
   updatedAt: string;
   candidateCount: number;
@@ -29,7 +29,7 @@ interface CandidateWithCategory {
   createdAt: string;
   updatedAt: string;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
 }
 
 interface ThreadWithCandidates {
diff --git a/src/client/hooks/useTotals.ts b/src/client/hooks/useTotals.ts
index 482b05c..f5486e7 100644
--- a/src/client/hooks/useTotals.ts
+++ b/src/client/hooks/useTotals.ts
@@ -4,7 +4,7 @@ import { apiGet } from "../lib/api";
 interface CategoryTotals {
   categoryId: number;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
   totalWeight: number;
   totalCost: number;
   itemCount: number;
diff --git a/src/client/lib/iconData.ts b/src/client/lib/iconData.tsx
similarity index 100%
rename from src/client/lib/iconData.ts
rename to src/client/lib/iconData.tsx