lots more icons to do but

apps/web/src/stores/assets-panel-store.tsx

@@ -1,17 +1,18 @@
-import {
-	CaptionsIcon,
-	ArrowLeftRightIcon,
-	SparklesIcon,
-	StickerIcon,
-	MusicIcon,
-	VideoIcon,
-	BlendIcon,
-	SlidersHorizontalIcon,
-	type LucideIcon,
-	TypeIcon,
-	SettingsIcon,
-} from "lucide-react";
+import type { ElementType } from "react";
 import { create } from "zustand";
+import {
+	ArrowRightDoubleIcon,
+	ClosedCaptionIcon,
+	Folder03Icon,
+	Happy01Icon,
+	HeadphonesIcon,
+	MagicWand05Icon,
+	TextIcon,
+	Settings01Icon,
+	SlidersHorizontalIcon,
+	ColorsIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
 
 export const TAB_KEYS = [
 	"media",
@@ -28,48 +29,57 @@ export const TAB_KEYS = [
 
 export type Tab = (typeof TAB_KEYS)[number];
 
+const createHugeiconsIcon =
+	({ icon }: { icon: IconSvgElement }) =>
+	({ className }: { className?: string }) => (
+		<HugeiconsIcon icon={icon} className={className} />
+	);
+
 export const tabs = {
 	media: {
-		icon: VideoIcon,
+		icon: createHugeiconsIcon({ icon: Folder03Icon }),
 		label: "Media",
 	},
 	sounds: {
-		icon: MusicIcon,
+		icon: createHugeiconsIcon({ icon: HeadphonesIcon }),
 		label: "Sounds",
 	},
 	text: {
-		icon: TypeIcon,
+		icon: createHugeiconsIcon({ icon: TextIcon }),
 		label: "Text",
 	},
 	stickers: {
-		icon: StickerIcon,
+		icon: createHugeiconsIcon({ icon: Happy01Icon }),
 		label: "Stickers",
 	},
 	effects: {
-		icon: SparklesIcon,
+		icon: createHugeiconsIcon({ icon: MagicWand05Icon }),
 		label: "Effects",
 	},
 	transitions: {
-		icon: ArrowLeftRightIcon,
+		icon: createHugeiconsIcon({ icon: ArrowRightDoubleIcon }),
 		label: "Transitions",
 	},
 	captions: {
-		icon: CaptionsIcon,
+		icon: createHugeiconsIcon({ icon: ClosedCaptionIcon }),
 		label: "Captions",
 	},
 	filters: {
-		icon: BlendIcon,
+		icon: createHugeiconsIcon({ icon: ColorsIcon }),
 		label: "Filters",
 	},
 	adjustment: {
-		icon: SlidersHorizontalIcon,
+		icon: createHugeiconsIcon({ icon: SlidersHorizontalIcon }),
 		label: "Adjustment",
 	},
 	settings: {
-		icon: SettingsIcon,
+		icon: createHugeiconsIcon({ icon: Settings01Icon }),
 		label: "Settings",
 	},
-} satisfies Record<Tab, { icon: LucideIcon; label: string }>;
+} satisfies Record<
+	Tab,
+	{ icon: ElementType<{ className?: string }>; label: string }
+>;
 
 type MediaViewMode = "grid" | "list";