Revert "Replace PNG icons with Habbo-style SVG pixel art icons across index, nav, and mobile nav"

This reverts commit ac16df98c3.

src/app/(site)/page.tsx

@@ -11,18 +11,6 @@ import { siteSettings } from "@/lib/services/site-settings";
 import { auth } from "@/lib/auth";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { LanguageSwitcher } from "@/components/language-switcher";
-import {
-	HabboHome,
-	HabboUser,
-	HabboCatalog,
-	HabboStar,
-	HabboCommunity,
-	HabboGames,
-	HabboEnter,
-	HabboNews,
-	HabboOnline,
-	HabboCamera,
-} from "@/components/shared/habbo-icons";
 
 export const revalidate = 120;
 
@@ -97,15 +85,24 @@ export default async function Home() {
 	} = await getHotelData();
 
 	return (
-		<div className="flex flex-col gap-12 pb-14">
+		<div className="flex flex-col gap-14 pb-14">
+			<style>{`
+				@keyframes hero-glow {
+					0%, 100% { opacity: 0.08; transform: scale(1); }
+					50% { opacity: 0.15; transform: scale(1.05); }
+				}
+				.hero-glow {
+					animation: hero-glow 6s ease-in-out infinite;
+				}
+			`}</style>
 			{/* ── Toolbar ── */}
 			<div className="relative">
 				<div
-					className="absolute -inset-6 rounded-full opacity-[0.05] blur-[40px]"
+					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
 					style={{ background: "var(--color-primary)" }}
 				/>
 				<div
-					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
+					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
 					style={{
 						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
 						backdropFilter: "blur(12px)",
@@ -123,23 +120,28 @@ export default async function Home() {
 					</div>
 				</div>
 			</div>
-
 			{/* ── 1. Hero ── */}
 			<div
-				className="relative overflow-hidden rounded-xl border"
+				className="relative overflow-hidden rounded-3xl border px-6 py-10 md:px-10 md:py-14 lg:py-16"
 				style={{
 					background: `url(/assets/images/next_header.jpg) center/cover no-repeat`,
 					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 				}}
 			>
-				<div
+		<div
-					className="absolute inset-0"
+				className="absolute inset-0 hero-glow"
-					style={{
+				style={{
-						background:
+					background: "radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 60%)",
-							"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 88%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 50%, color-mix(in srgb, var(--color-surface) 12%, transparent) 100%)",
+				}}
-					}}
+			/>
-				/>
+			<div
-				<div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14 px-6 py-10 md:px-10 md:py-14 lg:py-16">
+				className="absolute inset-0"
+				style={{
+					background:
+						"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 50%, color-mix(in srgb, var(--color-surface) 15%, transparent) 100%)",
+				}}
+			/>
+				<div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14">
 					<div className="flex-1 text-center lg:text-left">
 						<div
 							className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
@@ -157,7 +159,7 @@ export default async function Home() {
 						</div>
 						<h1
 							className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-4"
-							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
+							style={{ color: "var(--color-text-readable)" }}
 						>
 							{tp("welcome", { hotelName })}
 						</h1>
@@ -177,7 +179,7 @@ export default async function Home() {
 									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 								}}
 							>
-								<HabboEnter size={20} />
+								<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
 								{tp("register")}
 							</Link>
 							<Link
@@ -214,13 +216,13 @@ export default async function Home() {
 			{/* ── 2. Stats ── */}
 			<div className="grid grid-cols-3 gap-4">
 				{[
-					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: HabboHome },
+					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/navigation/home.png" },
-					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: HabboUser },
+					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/navigation/me.png" },
-					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: HabboCatalog },
+					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
-				].map(({ value, label, icon: Icon }) => (
+				].map((s) => (
 					<div
-						key={label}
+						key={s.label}
-						className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
+						className="relative overflow-hidden rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
 						style={{
 							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
 							backdropFilter: "blur(8px)",
@@ -229,17 +231,16 @@ export default async function Home() {
 						}}
 					>
 						<div
-							className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2"
+							className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
-							style={{ background: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}
+							style={{ background: "var(--color-primary)" }}
-						>
+						/>
-							<Icon size={22} />
-						</div>
 						<div className="relative">
+							<Image src={s.icon} alt="" width={28} height={28} className="mx-auto mb-1.5 opacity-50" unoptimized />
 							<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
-								{value}
+								{s.value}
 							</div>
 							<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
-								{label}
+								{s.label}
 							</div>
 						</div>
 					</div>
@@ -249,14 +250,14 @@ export default async function Home() {
 			{/* ── 3. Features ── */}
 			<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
 				{[
-					{ icon: HabboStar, title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
+					{ img: "/assets/images/icons/star.gif", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
-					{ icon: HabboCatalog, title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
+					{ img: "/assets/images/icons/catalog.png", title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
-					{ icon: HabboCommunity, title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
+					{ img: "/assets/images/icons/navigation/community.png", title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
-					{ icon: HabboGames, title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
+					{ img: "/assets/images/icons/navigation/bb.png", title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
-				].map(({ icon: Icon, title, desc }) => (
+				].map((f) => (
 					<div
-						key={title}
+						key={f.title}
-						className="rounded-xl border p-5 transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
+						className="rounded-2xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
 						style={{
 							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
 							backdropFilter: "blur(8px)",
@@ -266,15 +267,15 @@ export default async function Home() {
 					>
 						<div
 							className="w-11 h-11 rounded-xl flex items-center justify-center mb-3.5"
-							style={{ background: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}
+							style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
 						>
-							<Icon size={22} />
+							<Image src={f.img} alt="" width={24} height={24} unoptimized />
 						</div>
 						<h3 className="text-sm font-extrabold mb-1.5" style={{ color: "var(--color-text-readable)" }}>
-							{title}
+							{f.title}
 						</h3>
 						<p className="text-xs leading-relaxed" style={{ color: "var(--color-text-muted)" }}>
-							{desc}
+							{f.desc}
 						</p>
 					</div>
 				))}
@@ -282,163 +283,130 @@ export default async function Home() {
 
 			{/* ── 4. Newest citizens ── */}
 			{latestUsers.length > 0 && (
-				<div className="overflow-hidden rounded-xl border" style={{
+				<div>
-					background: "var(--color-surface)",
+					<h2 className="text-xl font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						{tp("latestUsers", { count: users.toLocaleString() })}
-				}}>
+					</h2>
-					<div
+					<div className="grid grid-cols-4 sm:grid-cols-8 gap-3">
-						className="flex items-center gap-2.5 px-5 py-3"
+						{latestUsers.map((u) => (
-						style={{
+							<div
-							background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+								key={u.username}
-						}}
+								className="flex flex-col items-center gap-1.5 p-3 rounded-2xl border transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
-					>
+								style={{
-						<HabboUser size={18} />
+									background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+									backdropFilter: "blur(8px)",
-							{tp("latestUsers", { count: users.toLocaleString() })}
+									WebkitBackdropFilter: "blur(8px)",
-						</h2>
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-					</div>
+								}}
-					<div className="p-4">
+							>
-						<div className="grid grid-cols-4 sm:grid-cols-8 gap-3">
+								<div className="relative">
-							{latestUsers.map((u) => (
+									<div className="absolute -inset-2 rounded-full opacity-[0.1] blur-[12px]" style={{ background: "var(--color-primary)" }} />
-								<div
+									<Image
-									key={u.username}
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "m" })}
-									className="flex flex-col items-center gap-1.5 p-2 rounded-xl border transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
+										alt={u.username}
-									style={{
+										width={40}
-										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+										height={50}
-										borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+										className="rounded-lg relative"
-									}}
+										unoptimized
-								>
+									/>
-									<div className="relative">
-										<Image
-											src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "m" })}
-											alt={u.username}
-											width={40}
-											height={50}
-											className="rounded-lg relative"
-											unoptimized
-										/>
-									</div>
-									<span className="text-[10px] font-bold truncate max-w-[64px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
-										{u.username}
-									</span>
 								</div>
-							))}
+								<span className="text-[10px] font-bold truncate max-w-[64px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
-						</div>
+									{u.username}
+								</span>
+							</div>
+						))}
 					</div>
 				</div>
 			)}
 
 			{/* ── 5. News ── */}
-			<div className="overflow-hidden rounded-xl border" style={{
+			<div className="space-y-4">
-				background: "var(--color-surface)",
+				<div className="flex items-center justify-between">
-				borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					<h2 className="text-xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
-			}}>
+						{tp("latestNews")}
-				<div
+					</h2>
-					className="flex items-center justify-between px-5 py-3"
+					<Link href="/news" className="text-sm font-bold hover:underline" style={{ color: "var(--color-primary)" }}>
-					style={{
-						background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-					}}
-				>
-					<div className="flex items-center gap-2.5">
-						<HabboNews size={18} />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
-							{tp("latestNews")}
-						</h2>
-					</div>
-					<Link href="/news" className="text-xs font-bold text-white/80 hover:text-white hover:underline" style={{ textDecorationColor: "rgba(255,255,255,0.5)" }}>
 						{tp("allNews")}
 					</Link>
 				</div>
-				<div className="p-4">
+				{articles.length > 0 ? (
-					{articles.length > 0 ? (
+					<div className="grid sm:grid-cols-2 gap-4">
-						<div className="grid sm:grid-cols-2 gap-3">
+						{articles.slice(0, 4).map((a) => (
-							{articles.slice(0, 4).map((a) => (
+							<Link
-								<Link
+								key={a.slug}
-									key={a.slug}
+								href={`/news/${a.slug}`}
-									href={`/news/${a.slug}`}
+								className="flex gap-4 items-start rounded-2xl border p-4 transition-all duration-200 hover:-translate-y-0.5"
-									className="flex gap-3 items-start rounded-lg border p-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
+								style={{
-									style={{
+									background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-										background: "color-mix(in srgb, var(--color-background) 50%, transparent)",
+									backdropFilter: "blur(8px)",
-										borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+									WebkitBackdropFilter: "blur(8px)",
-										textDecoration: "none",
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-									}}
+									textDecoration: "none",
-								>
+								}}
-									<div className="relative w-12 h-12 shrink-0 rounded-lg overflow-hidden">
+							>
-										{a.image ? (
+								<div className="relative w-14 h-14 shrink-0 rounded-xl overflow-hidden">
-											<Image src={a.image} alt="" fill className="object-cover" unoptimized />
+									{a.image ? (
-										) : (
+										<Image src={a.image} alt="" fill className="object-cover" unoptimized />
-											<div className="w-full h-full" style={{ background: `color-mix(in srgb, var(--color-primary) 15%, transparent)` }} />
+									) : (
-										)}
+										<div className="w-full h-full" style={{ background: `color-mix(in srgb, var(--color-primary) 15%, transparent)` }} />
-									</div>
+									)}
-									<div className="min-w-0">
+								</div>
-										<h3 className="text-sm font-extrabold leading-snug" style={{ color: "var(--color-text-readable)" }}>
+								<div className="min-w-0">
-											{a.title}
+									<h3 className="text-sm font-extrabold leading-snug" style={{ color: "var(--color-text-readable)" }}>
-										</h3>
+										{a.title}
-										<p className="text-xs font-semibold mt-1" style={{ color: "var(--color-text-muted)" }}>
+									</h3>
-											{formatDate(a.createdAt, "date", "")}
+									<p className="text-xs font-semibold mt-1" style={{ color: "var(--color-text-muted)" }}>
-										</p>
+										{formatDate(a.createdAt, "date", "")}
-									</div>
+									</p>
-								</Link>
+								</div>
-							))}
+							</Link>
-						</div>
+						))}
-					) : (
+					</div>
-						<p className="text-sm text-center py-4" style={{ color: "var(--color-text-muted)" }}>{tp("noArticles")}</p>
+				) : (
-					)}
+					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>{tp("noArticles")}</p>
-				</div>
+				)}
 			</div>
 
 			{/* ── 6. Online users row ── */}
 			{recentUsers.length > 0 && (
-				<div className="overflow-hidden rounded-xl border" style={{
+				<div className="text-center">
-					background: "var(--color-surface)",
+					<h3 className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center justify-center gap-2" style={{ color: "var(--color-text-muted)" }}>
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						<span className="w-2 h-2 rounded-full bg-green-500" />
-				}}>
+						{tp("recentUsers")}
-					<div
+					</h3>
-						className="flex items-center gap-2.5 px-5 py-3"
+					<div className="flex flex-wrap justify-center gap-2">
-						style={{
+						{recentUsers.slice(0, 10).map((u) => (
-							background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+							<div
-						}}
+								key={u.username}
-					>
+								className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-xl transition-all duration-200 hover:scale-110"
-						<HabboOnline size={18} />
+								style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
-						<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							>
-							{tp("recentUsers")}
+								<Image
-						</h3>
+									src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
-					</div>
+									alt={u.username}
-					<div className="p-4">
+									width={30}
-						<div className="flex flex-wrap justify-center gap-2">
+									height={36}
-							{recentUsers.slice(0, 12).map((u) => (
+									className="rounded-md"
-								<div
+									unoptimized
-									key={u.username}
+								/>
-									className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-lg transition-all duration-200 hover:scale-110 hover:shadow-md"
+								<span className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
-									style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
+									{u.username}
-								>
+								</span>
-									<Image
+							</div>
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
+						))}
-										alt={u.username}
-										width={30}
-										height={36}
-										className="rounded-md"
-										unoptimized
-									/>
-									<span className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
 					</div>
 				</div>
 			)}
 
 			{/* ── 7. Bottom CTA ── */}
 			<div
-				className="relative overflow-hidden rounded-xl border text-center px-6 py-10"
+				className="relative overflow-hidden rounded-2xl border text-center px-6 py-10"
 				style={{
 					background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 70%, transparent))`,
 					borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
 				}}
 			>
-				<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
+				<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)" }}>
 					{tp("joinNow", { hotelName })}
 				</h2>
 				<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
@@ -453,43 +421,30 @@ export default async function Home() {
 						boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 					}}
 				>
-					<HabboEnter size={20} />
+					<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
 					{tp("register")}
 				</Link>
 			</div>
 
 			{/* ── 8. Recent photos (compact) ── */}
 			{recentPhotos.length > 0 && (
-				<div className="overflow-hidden rounded-xl border" style={{
+				<div className="text-center">
-					background: "var(--color-surface)",
+					<h3 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--color-text-muted)" }}>
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						{tp("recentPhotos")}
-				}}>
+					</h3>
-					<div
+					<div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
-						className="flex items-center gap-2.5 px-5 py-3"
+						{recentPhotos.slice(0, 4).map((p) => (
-						style={{
+							<Link key={p.id} href="/photos" className="block rounded-lg overflow-hidden aspect-square">
-							background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+								<Image
-						}}
+									src={p.url}
-					>
+									alt=""
-						<HabboCamera size={18} />
+									width={200}
-						<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+									height={200}
-							{tp("recentPhotos")}
+									className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
-						</h3>
+									unoptimized
-					</div>
+								/>
-					<div className="p-4">
+							</Link>
-						<div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
+						))}
-							{recentPhotos.slice(0, 4).map((p) => (
-								<Link key={p.id} href="/photos" className="block rounded-lg overflow-hidden aspect-square border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)" }}>
-									<Image
-										src={p.url}
-										alt=""
-										width={200}
-										height={200}
-										className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
-										unoptimized
-									/>
-								</Link>
-							))}
-						</div>
 					</div>
 				</div>
 			)}

src/components/mobile-nav.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
 import { type ReactNode, useRef, useState } from "react";
 import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 import { mobileMenuVariants } from "@/lib/motion";
-import { HabboHome } from "@/components/shared/habbo-icons";
 
 interface MobileNavProps {
 	children: ReactNode;
@@ -88,7 +88,13 @@ export function MobileNav({
 										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 								}}
 							>
-								<HabboHome size={22} />
+								<Image
+									src="/assets/images/icons/navigation/home.png"
+									alt=""
+									width={22}
+									height={22}
+									className="shrink-0"
+								/>
 								<span
 									className="text-sm font-extrabold uppercase tracking-wide"
 									style={{

src/components/nav-dropdown.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { dropdownVariants } from "@/lib/motion";
 
 interface NavDropdownProps {
 	label: string;
-	icon?: ReactNode;
+	icon?: string;
 	children: ReactNode;
 }
 
@@ -44,7 +45,14 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 				aria-expanded={open}
 			>
 				{icon ? (
-					<span className="mr-1.5 flex items-center">{icon}</span>
+					<Image
+						src={icon}
+						alt=""
+						width={20}
+						height={20}
+						className="mr-1.5"
+						unoptimized
+					/>
 				) : null}
 				{label}
 				<motion.svg

src/components/navigation.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import type { Session } from "next-auth";
 import { getTranslations } from "next-intl/server";
@@ -8,17 +9,6 @@ import { NavbarColorPicker } from "@/components/navbar-color-picker";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { canAccess, getApiAdminContext, PERMS } from "@/lib/permissions";
-import {
-	HabboHome,
-	HabboCommunity,
-	HabboCatalog,
-	HabboRank,
-	HabboGames,
-	HabboHeart,
-	HabboOnline,
-	HabboChat,
-	HabboCog,
-} from "@/components/shared/habbo-icons";
 
 export async function Navigation({ session }: { session: Session | null }) {
 	const t = await getTranslations("nav");
@@ -63,8 +53,14 @@ export async function Navigation({ session }: { session: Session | null }) {
 				{/* Desktop: home link */}
 				<div className="hidden md:flex items-center gap-x-1">
 					<Link href="/" className="nav-item shrink-0">
-						<HabboHome size={18} />
+						<Image
-						<span className="ml-1.5">{t("home")}</span>
+							src="/assets/images/icons/navigation/me.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						<span>{t("home")}</span>
 					</Link>
 				</div>
 
@@ -72,7 +68,7 @@ export async function Navigation({ session }: { session: Session | null }) {
 				<div className="hidden md:flex items-center gap-x-1">
 					<NavDropdown
 						label={t("community")}
-						icon={<HabboCommunity size={18} />}
+						icon="/assets/images/icons/navigation/community.png"
 					>
 						<Link href="/news" className="dropdown-item" role="menuitem">
 							{t("articles")}
@@ -99,7 +95,7 @@ export async function Navigation({ session }: { session: Session | null }) {
 
 					<NavDropdown
 						label={t("shop")}
-						icon={<HabboCatalog size={18} />}
+						icon="/assets/images/icons/navigation/shop.png"
 					>
 						<Link href="/shop" className="dropdown-item" role="menuitem">
 							{t("shop")}
@@ -113,18 +109,30 @@ export async function Navigation({ session }: { session: Session | null }) {
 					</NavDropdown>
 
 					<Link href="/leaderboard" className="nav-item">
-						<HabboRank size={18} />
+						<Image
-						<span className="ml-1.5">{t("leaderboards")}</span>
+							src="/assets/images/icons/navigation/leaderboards.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						{t("leaderboards")}
 					</Link>
 
 					<Link href="/radio" className="nav-item">
-						<HabboGames size={18} />
+						<Image
-						<span className="ml-1.5">{t("radio")}</span>
+							src="/assets/images/icons/navigation/bb.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						{t("radio")}
 					</Link>
 
 					<NavDropdown
 						label={t("assistance")}
-						icon={<HabboHeart size={18} />}
+						icon="/assets/images/icons/navigation/rules.gif"
 					>
 						<Link href="/help" className="dropdown-item" role="menuitem">
 							{t("helpCenter")}
@@ -149,27 +157,51 @@ export async function Navigation({ session }: { session: Session | null }) {
 					{session?.user ? (
 						<>
 							<Link href="/friends" className="nav-item">
-								<HabboOnline size={18} />
+								<Image
-								<span className="ml-1.5">{t("friends")}</span>
+									src="/assets/images/icons/navigation/goody.png"
+									alt=""
+									width={20}
+									height={20}
+									className="mr-1.5"
+								/>
+								{t("friends")}
 							</Link>
 							<Link href="/messages" className="nav-item">
-								<HabboChat size={18} />
+								<Image
-								<span className="ml-1.5">{t("messages")}</span>
+									src="/assets/images/icons/navigation/bb.png"
+									alt=""
+									width={20}
+									height={20}
+									className="mr-1.5"
+								/>
+								{t("messages")}
 							</Link>
 						</>
 					) : null}
 
 					{showMod ? (
 						<Link href="/mod" className="nav-item">
-							<HabboCog size={18} />
+							<Image
-							<span className="ml-1.5">{t("mod")}</span>
+								src="/assets/images/icons/navigation/home.png"
+								alt=""
+								width={20}
+								height={20}
+								className="mr-1.5"
+							/>
+							{t("mod")}
 						</Link>
 					) : null}
 
 					{showAdmin ? (
 						<Link href="/admin" className="nav-item">
-							<HabboCog size={18} />
+							<Image
-							<span className="ml-1.5">{t("admin")}</span>
+								src="/assets/images/icons/navigation/home.png"
+								alt=""
+								width={20}
+								height={20}
+								className="mr-1.5"
+							/>
+							{t("admin")}
 						</Link>
 					) : null}
 				</div>
@@ -181,13 +213,19 @@ export async function Navigation({ session }: { session: Session | null }) {
 					brandLabel={brandLabel}
 				>
 					<Link href="/" className="nav-item">
-						<HabboHome size={18} />
+						<Image
-						<span className="ml-1.5">{t("home")}</span>
+							src="/assets/images/icons/navigation/me.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						{t("home")}
 					</Link>
 
 					<NavDropdown
 						label={t("community")}
-						icon={<HabboCommunity size={18} />}
+						icon="/assets/images/icons/navigation/community.png"
 					>
 						<Link href="/news" className="dropdown-item" role="menuitem">
 							{t("articles")}
@@ -214,7 +252,7 @@ export async function Navigation({ session }: { session: Session | null }) {
 
 					<NavDropdown
 						label={t("shop")}
-						icon={<HabboCatalog size={18} />}
+						icon="/assets/images/icons/navigation/shop.png"
 					>
 						<Link href="/shop" className="dropdown-item" role="menuitem">
 							{t("shop")}
@@ -228,18 +266,30 @@ export async function Navigation({ session }: { session: Session | null }) {
 					</NavDropdown>
 
 					<Link href="/leaderboard" className="nav-item">
-						<HabboRank size={18} />
+						<Image
-						<span className="ml-1.5">{t("leaderboards")}</span>
+							src="/assets/images/icons/navigation/leaderboards.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						{t("leaderboards")}
 					</Link>
 
 					<Link href="/radio" className="nav-item">
-						<HabboGames size={18} />
+						<Image
-						<span className="ml-1.5">{t("radio")}</span>
+							src="/assets/images/icons/navigation/bb.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						{t("radio")}
 					</Link>
 
 					<NavDropdown
 						label={t("assistance")}
-						icon={<HabboHeart size={18} />}
+						icon="/assets/images/icons/navigation/rules.gif"
 					>
 						<Link href="/help" className="dropdown-item" role="menuitem">
 							{t("helpCenter")}
@@ -264,27 +314,51 @@ export async function Navigation({ session }: { session: Session | null }) {
 					{session?.user ? (
 						<>
 							<Link href="/friends" className="nav-item">
-								<HabboOnline size={18} />
+								<Image
-								<span className="ml-1.5">{t("friends")}</span>
+									src="/assets/images/icons/navigation/goody.png"
+									alt=""
+									width={20}
+									height={20}
+									className="mr-1.5"
+								/>
+								{t("friends")}
 							</Link>
 							<Link href="/messages" className="nav-item">
-								<HabboChat size={18} />
+								<Image
-								<span className="ml-1.5">{t("messages")}</span>
+									src="/assets/images/icons/navigation/bb.png"
+									alt=""
+									width={20}
+									height={20}
+									className="mr-1.5"
+								/>
+								{t("messages")}
 							</Link>
 						</>
 					) : null}
 
 					{showMod ? (
 						<Link href="/mod" className="nav-item">
-							<HabboCog size={18} />
+							<Image
-							<span className="ml-1.5">{t("mod")}</span>
+								src="/assets/images/icons/navigation/home.png"
+								alt=""
+								width={20}
+								height={20}
+								className="mr-1.5"
+							/>
+							{t("mod")}
 						</Link>
 					) : null}
 
 					{showAdmin ? (
 						<Link href="/admin" className="nav-item">
-							<HabboCog size={18} />
+							<Image
-							<span className="ml-1.5">{t("admin")}</span>
+								src="/assets/images/icons/navigation/home.png"
+								alt=""
+								width={20}
+								height={20}
+								className="mr-1.5"
+							/>
+							{t("admin")}
 						</Link>
 					) : null}
 
@@ -307,7 +381,12 @@ export async function Navigation({ session }: { session: Session | null }) {
 					className="ml-auto flex md:hidden items-center gap-2 shrink-0"
 					aria-label="Home"
 				>
-					<HabboHome size={24} />
+					<Image
+						src="/assets/images/icons/navigation/home.png"
+						alt=""
+						width={26}
+						height={26}
+					/>
 					<span
 						className="text-base font-extrabold uppercase tracking-wide"
 						style={{

src/components/shared/habbo-icons.tsx

@@ -1,310 +0,0 @@
-import type { SVGProps } from "react";
-
-type IconProps = SVGProps<SVGSVGElement> & { size?: number };
-
-function IconSvg({
-	children,
-	size = 24,
-	viewBox = "0 0 24 24",
-	...props
-}: IconProps & { viewBox?: string }) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox={viewBox}
-			width={size}
-			height={size}
-			shapeRendering="crispEdges"
-			{...props}
-		>
-			{children}
-		</svg>
-	);
-}
-
-export function HabboHome({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="4" y="10" width="16" height="12" fill="#e8a317" rx="1" />
-			<rect x="3" y="9" width="18" height="2" fill="#d4891a" />
-			<polygon points="12,2 2,10 22,10" fill="#c0392b" />
-			<polygon points="12,2 2,10 4,10" fill="#a93226" />
-			<rect x="9" y="15" width="6" height="7" fill="#8B4513" rx="1" />
-			<rect x="10" y="16" width="4" height="3" fill="#d4a017" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboUser({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<circle cx="12" cy="6" r="4.5" fill="#f1c40f" />
-			<rect x="5" y="11" width="14" height="12" fill="#3498db" rx="2" />
-			<rect x="5" y="11" width="14" height="3" fill="#2980b9" rx="1" />
-			<rect x="2" y="20" width="20" height="3" fill="#2c3e50" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboCatalog({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="3" y="4" width="18" height="16" fill="#e74c3c" rx="2" />
-			<rect x="3" y="4" width="18" height="4" fill="#c0392b" rx="1" />
-			<rect x="10" y="8" width="4" height="12" fill="#f1c40f" />
-			<rect x="3" y="11" width="18" height="2" fill="#c0392b" />
-			<rect x="8" y="4" width="8" height="3" fill="#f1c40f" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboStar({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="10" y="1" width="4" height="6" fill="#f1c40f" rx="1" />
-			<rect x="10" y="17" width="4" height="6" fill="#f1c40f" rx="1" />
-			<rect x="1" y="10" width="6" height="4" fill="#f1c40f" rx="1" />
-			<rect x="17" y="10" width="6" height="4" fill="#f1c40f" rx="1" />
-			<rect x="6" y="5" width="4" height="4" fill="#f39c12" rx="1" />
-			<rect x="14" y="5" width="4" height="4" fill="#f39c12" rx="1" />
-			<rect x="6" y="15" width="4" height="4" fill="#f39c12" rx="1" />
-			<rect x="14" y="15" width="4" height="4" fill="#f39c12" rx="1" />
-			<rect x="9" y="9" width="6" height="6" fill="#f1c40f" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboCommunity({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<circle cx="7" cy="7" r="4" fill="#2ecc71" />
-			<circle cx="17" cy="7" r="4" fill="#3498db" />
-			<rect x="2" y="13" width="10" height="9" fill="#2ecc71" rx="2" />
-			<rect x="12" y="13" width="10" height="9" fill="#3498db" rx="2" />
-			<rect x="2" y="13" width="10" height="3" fill="#27ae60" rx="1" />
-			<rect x="12" y="13" width="10" height="3" fill="#2980b9" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboGames({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="2" y="7" width="20" height="12" fill="#9b59b6" rx="3" />
-			<rect x="2" y="7" width="20" height="3" fill="#8e44ad" rx="1" />
-			<circle cx="8" cy="14" r="2" fill="#f1c40f" />
-			<rect x="12" y="12" width="6" height="4" fill="#ecf0f1" rx="1" />
-			<circle cx="16" cy="14" r="1" fill="#e74c3c" />
-			<rect x="4" y="4" width="3" height="4" fill="#e74c3c" rx="1" />
-			<rect x="17" y="4" width="3" height="4" fill="#2ecc71" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboEnter({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="3" y="3" width="18" height="18" fill="#2ecc71" rx="2" />
-			<rect x="3" y="3" width="18" height="4" fill="#27ae60" rx="1" />
-			<polygon points="11,8 18,13 11,18" fill="#ecf0f1" />
-			<rect x="5" y="11" width="8" height="4" fill="#27ae60" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboNews({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="3" y="2" width="18" height="20" fill="#ecf0f1" rx="2" />
-			<rect x="3" y="2" width="18" height="4" fill="#e74c3c" rx="1" />
-			<rect x="5" y="8" width="14" height="2" fill="#bdc3c7" rx="1" />
-			<rect x="5" y="11" width="10" height="2" fill="#bdc3c7" rx="1" />
-			<rect x="5" y="14" width="14" height="2" fill="#bdc3c7" rx="1" />
-			<rect x="5" y="17" width="8" height="2" fill="#bdc3c7" rx="1" />
-			<rect x="3" y="2" width="18" height="4" fill="#c0392b" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboOnline({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<circle cx="8" cy="8" r="5" fill="#2ecc71" />
-			<circle cx="16" cy="8" r="5" fill="#2ecc71" />
-			<rect x="3" y="14" width="10" height="8" fill="#27ae60" rx="2" />
-			<rect x="11" y="14" width="10" height="8" fill="#27ae60" rx="2" />
-			<circle cx="8" cy="8" r="2" fill="#ecf0f1" />
-			<circle cx="16" cy="8" r="2" fill="#ecf0f1" />
-		</IconSvg>
-	);
-}
-
-export function HabboCamera({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="4" y="7" width="16" height="12" fill="#7f8c8d" rx="2" />
-			<rect x="4" y="7" width="16" height="3" fill="#6c7a7d" rx="1" />
-			<rect x="9" y="4" width="6" height="4" fill="#2c3e50" rx="1" />
-			<circle cx="12" cy="14" r="4" fill="#34495e" />
-			<circle cx="12" cy="14" r="2.5" fill="#ecf0f1" />
-			<rect x="16" y="9" width="2" height="2" fill="#e74c3c" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboChat({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="2" y="3" width="20" height="14" fill="#3498db" rx="2" />
-			<rect x="2" y="3" width="20" height="3" fill="#2980b9" rx="1" />
-			<polygon points="6,17 10,22 10,17" fill="#3498db" />
-			<rect x="5" y="7" width="5" height="2" fill="#ecf0f1" rx="1" />
-			<rect x="5" y="10" width="8" height="2" fill="#ecf0f1" rx="1" />
-			<rect x="5" y="13" width="6" height="2" fill="#ecf0f1" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboClock({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<circle cx="12" cy="12" r="10" fill="#ecf0f1" stroke="#bdc3c7" strokeWidth="1" />
-			<circle cx="12" cy="12" r="3" fill="#f1c40f" />
-			<rect x="11" y="5" width="2" height="7" fill="#2c3e50" rx="1" />
-			<rect x="11" y="11" width="5" height="2" fill="#2c3e50" rx="1" />
-			<circle cx="12" cy="12" r="1" fill="#e74c3c" />
-		</IconSvg>
-	);
-}
-
-export function HabboHeart({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="3" y="5" width="6" height="6" fill="#e74c3c" rx="1" />
-			<rect x="15" y="5" width="6" height="6" fill="#e74c3c" rx="1" />
-			<rect x="3" y="9" width="6" height="6" fill="#c0392b" rx="1" />
-			<rect x="15" y="9" width="6" height="6" fill="#c0392b" rx="1" />
-			<rect x="7" y="3" width="10" height="4" fill="#e74c3c" rx="1" />
-			<rect x="7" y="15" width="2" height="4" fill="#e74c3c" rx="1" />
-			<rect x="15" y="15" width="2" height="4" fill="#e74c3c" rx="1" />
-			<rect x="9" y="17" width="6" height="4" fill="#e74c3c" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboArrowRight({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="2" y="9" width="14" height="6" fill="#ecf0f1" rx="1" />
-			<polygon points="16,3 24,12 16,21" fill="#2ecc71" />
-		</IconSvg>
-	);
-}
-
-export function HabboCog({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<circle cx="12" cy="12" r="5" fill="#7f8c8d" />
-			<circle cx="12" cy="12" r="3" fill="#95a5a6" />
-			<rect x="10" y="1" width="4" height="5" fill="#7f8c8d" rx="1" />
-			<rect x="10" y="18" width="4" height="5" fill="#7f8c8d" rx="1" />
-			<rect x="1" y="10" width="5" height="4" fill="#7f8c8d" rx="1" />
-			<rect x="18" y="10" width="5" height="4" fill="#7f8c8d" rx="1" />
-			<rect x="4" y="4" width="3" height="3" fill="#7f8c8d" rx="1" />
-			<rect x="17" y="4" width="3" height="3" fill="#7f8c8d" rx="1" />
-			<rect x="4" y="17" width="3" height="3" fill="#7f8c8d" rx="1" />
-			<rect x="17" y="17" width="3" height="3" fill="#7f8c8d" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboFurni({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="4" y="6" width="7" height="12" fill="#e67e22" rx="1" />
-			<rect x="13" y="6" width="7" height="12" fill="#e67e22" rx="1" />
-			<rect x="2" y="4" width="11" height="3" fill="#d35400" rx="1" />
-			<rect x="11" y="4" width="11" height="3" fill="#d35400" rx="1" />
-			<rect x="6" y="14" width="3" height="4" fill="#f1c40f" rx="1" />
-			<rect x="15" y="14" width="3" height="4" fill="#f1c40f" rx="1" />
-			<rect x="2" y="16" width="20" height="4" fill="#8B4513" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboDiamond({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="8" y="3" width="8" height="4" fill="#85e0e8" rx="1" />
-			<rect x="4" y="7" width="16" height="4" fill="#6cc8d0" rx="1" />
-			<rect x="2" y="11" width="20" height="4" fill="#5bb0b8" rx="1" />
-			<rect x="4" y="15" width="16" height="4" fill="#4a98a0" rx="1" />
-			<rect x="8" y="19" width="8" height="2" fill="#398088" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboCredits({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<circle cx="12" cy="12" r="10" fill="#f1c40f" />
-			<circle cx="12" cy="12" r="8" fill="#e67e22" />
-			<rect x="10" y="5" width="4" height="14" fill="#f1c40f" rx="1" />
-			<rect x="6" y="9" width="12" height="4" fill="#f1c40f" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboDuckets({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<circle cx="12" cy="12" r="10" fill="#e67e22" />
-			<circle cx="12" cy="12" r="8" fill="#d35400" />
-			<rect x="9" y="4" width="6" height="6" fill="#f39c12" rx="1" />
-			<rect x="7" y="10" width="10" height="4" fill="#f39c12" rx="1" />
-			<rect x="9" y="14" width="6" height="6" fill="#f39c12" rx="1" />
-		</IconSvg>
-	);
-}
-
-export function HabboRank({ size, ...props }: IconProps) {
-	return (
-		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
-			<rect x="10" y="2" width="4" height="6" fill="#f1c40f" rx="1" />
-			<rect x="6" y="8" width="12" height="4" fill="#2ecc71" rx="1" />
-			<rect x="4" y="12" width="16" height="4" fill="#3498db" rx="1" />
-			<rect x="2" y="16" width="20" height="4" fill="#9b59b6" rx="1" />
-			<rect x="10" y="20" width="4" height="2" fill="#e74c3c" rx="1" />
-		</IconSvg>
-	);
-}
-
-const iconMap = {
-	home: HabboHome,
-	user: HabboUser,
-	catalog: HabboCatalog,
-	star: HabboStar,
-	community: HabboCommunity,
-	games: HabboGames,
-	enter: HabboEnter,
-	news: HabboNews,
-	online: HabboOnline,
-	camera: HabboCamera,
-	chat: HabboChat,
-	clock: HabboClock,
-	heart: HabboHeart,
-	arrowRight: HabboArrowRight,
-	cog: HabboCog,
-	furni: HabboFurni,
-	diamond: HabboDiamond,
-	credits: HabboCredits,
-	duckets: HabboDuckets,
-	rank: HabboRank,
-};
-
-export type HabboIconName = keyof typeof iconMap;
-
-export function HabboIcon({ name, size, ...props }: IconProps & { name: HabboIconName }) {
-	const Icon = iconMap[name];
-	return <Icon size={size} {...props} />;
-}