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

- Create 20 Habbo-style pixel-art SVG icon components (home, user, catalog, star, community, games, enter, news, online, camera, chat, clock, heart, arrow, cog, furni, diamond, credits, duckets, rank) - Update index page: replace all PNG icon references, add pixel font headings, add Habbo-style gradient section headers - Update navigation: replace all PNG nav icons with Habbo SVG icons - Update NavDropdown: accept ReactNode icon instead of string path - Update mobile-nav: replace PNG brand icon with HabboHome SVG
2026-07-23 16:36:32 +02:00
1 parent 255c09b9fd
commit ac16df98c3
@@ -11,6 +11,18 @@ 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;

@@ -85,24 +97,15 @@ export default async function Home() {
 	} = await getHotelData();

 	return (
-		<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>
+		<div className="flex flex-col gap-12 pb-14">
 			{/* ── Toolbar ── */}
 			<div className="relative">
 				<div
-					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
+					className="absolute -inset-6 rounded-full opacity-[0.05] blur-[40px]"
 					style={{ background: "var(--color-primary)" }}
 				/>
 				<div
-					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
+					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
 					style={{
 						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
 						backdropFilter: "blur(12px)",
@@ -120,28 +123,23 @@ export default async function Home() {
 					</div>
 				</div>
 			</div>
+
 			{/* ── 1. Hero ── */}
 			<div
-				className="relative overflow-hidden rounded-3xl border px-6 py-10 md:px-10 md:py-14 lg:py-16"
+				className="relative overflow-hidden rounded-xl border"
 				style={{
 					background: `url(/assets/images/next_header.jpg) center/cover no-repeat`,
 					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 				}}
 			>
-		<div
-				className="absolute inset-0 hero-glow"
-				style={{
-					background: "radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 60%)",
-				}}
-			/>
-			<div
-				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="absolute inset-0"
+					style={{
+						background:
+							"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 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">
 					<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"
@@ -159,7 +157,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)" }}
+							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
 						>
 							{tp("welcome", { hotelName })}
 						</h1>
@@ -179,7 +177,7 @@ export default async function Home() {
 									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 								}}
 							>
-								<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+								<HabboEnter size={20} />
 								{tp("register")}
 							</Link>
 							<Link
@@ -216,13 +214,13 @@ export default async function Home() {
 			{/* ── 2. Stats ── */}
 			<div className="grid grid-cols-3 gap-4">
 				{[
-					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/navigation/home.png" },
-					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/navigation/me.png" },
-					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
-				].map((s) => (
+					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: HabboHome },
+					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: HabboUser },
+					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: HabboCatalog },
+				].map(({ value, label, icon: Icon }) => (
 					<div
-						key={s.label}
-						className="relative overflow-hidden rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
+						key={label}
+						className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
 						style={{
 							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
 							backdropFilter: "blur(8px)",
@@ -231,16 +229,17 @@ export default async function Home() {
 						}}
 					>
 						<div
-							className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
-							style={{ background: "var(--color-primary)" }}
-						/>
+							className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2"
+							style={{ background: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}
+						>
+							<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)" }}>
-								{s.value}
+								{value}
 							</div>
 							<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
-								{s.label}
+								{label}
 							</div>
 						</div>
 					</div>
@@ -250,14 +249,14 @@ export default async function Home() {
 			{/* ── 3. Features ── */}
 			<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
 				{[
-					{ img: "/assets/images/icons/star.gif", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
-					{ img: "/assets/images/icons/catalog.png", title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
-					{ img: "/assets/images/icons/navigation/community.png", title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
-					{ img: "/assets/images/icons/navigation/bb.png", title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
-				].map((f) => (
+					{ icon: HabboStar, title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
+					{ icon: HabboCatalog, title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
+					{ icon: HabboCommunity, title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
+					{ icon: HabboGames, title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
+				].map(({ icon: Icon, title, desc }) => (
 					<div
-						key={f.title}
-						className="rounded-2xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
+						key={title}
+						className="rounded-xl border p-5 transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
 						style={{
 							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
 							backdropFilter: "blur(8px)",
@@ -267,15 +266,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) 12%, transparent)" }}
+							style={{ background: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}
 						>
-							<Image src={f.img} alt="" width={24} height={24} unoptimized />
+							<Icon size={22} />
 						</div>
 						<h3 className="text-sm font-extrabold mb-1.5" style={{ color: "var(--color-text-readable)" }}>
-							{f.title}
+							{title}
 						</h3>
 						<p className="text-xs leading-relaxed" style={{ color: "var(--color-text-muted)" }}>
-							{f.desc}
+							{desc}
 						</p>
 					</div>
 				))}
@@ -283,130 +282,163 @@ export default async function Home() {

 			{/* ── 4. Newest citizens ── */}
 			{latestUsers.length > 0 && (
-				<div>
-					<h2 className="text-xl font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
-						{tp("latestUsers", { count: users.toLocaleString() })}
-					</h2>
-					<div className="grid grid-cols-4 sm:grid-cols-8 gap-3">
-						{latestUsers.map((u) => (
-							<div
-								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={{
-									background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									backdropFilter: "blur(8px)",
-									WebkitBackdropFilter: "blur(8px)",
-									borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-								}}
-							>
-								<div className="relative">
-									<div className="absolute -inset-2 rounded-full opacity-[0.1] blur-[12px]" style={{ background: "var(--color-primary)" }} />
-									<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 className="overflow-hidden rounded-xl border" style={{
+					background: "var(--color-surface)",
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+				}}>
+					<div
+						className="flex items-center gap-2.5 px-5 py-3"
+						style={{
+							background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+						}}
+					>
+						<HabboUser size={18} />
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							{tp("latestUsers", { count: users.toLocaleString() })}
+						</h2>
+					</div>
+					<div className="p-4">
+						<div className="grid grid-cols-4 sm:grid-cols-8 gap-3">
+							{latestUsers.map((u) => (
+								<div
+									key={u.username}
+									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"
+									style={{
+										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+										borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+									}}
+								>
+									<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)" }}>
-									{u.username}
-								</span>
-							</div>
-						))}
+							))}
+						</div>
 					</div>
 				</div>
 			)}

 			{/* ── 5. News ── */}
-			<div className="space-y-4">
-				<div className="flex items-center justify-between">
-					<h2 className="text-xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
-						{tp("latestNews")}
-					</h2>
-					<Link href="/news" className="text-sm font-bold hover:underline" style={{ color: "var(--color-primary)" }}>
+			<div className="overflow-hidden rounded-xl border" style={{
+				background: "var(--color-surface)",
+				borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+			}}>
+				<div
+					className="flex items-center justify-between px-5 py-3"
+					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>
-				{articles.length > 0 ? (
-					<div className="grid sm:grid-cols-2 gap-4">
-						{articles.slice(0, 4).map((a) => (
-							<Link
-								key={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"
-								style={{
-									background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									backdropFilter: "blur(8px)",
-									WebkitBackdropFilter: "blur(8px)",
-									borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-									textDecoration: "none",
-								}}
-							>
-								<div className="relative w-14 h-14 shrink-0 rounded-xl overflow-hidden">
-									{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>
-								<div className="min-w-0">
-									<h3 className="text-sm font-extrabold leading-snug" style={{ color: "var(--color-text-readable)" }}>
-										{a.title}
-									</h3>
-									<p className="text-xs font-semibold mt-1" style={{ color: "var(--color-text-muted)" }}>
-										{formatDate(a.createdAt, "date", "")}
-									</p>
-								</div>
-							</Link>
-						))}
-					</div>
-				) : (
-					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>{tp("noArticles")}</p>
-				)}
+				<div className="p-4">
+					{articles.length > 0 ? (
+						<div className="grid sm:grid-cols-2 gap-3">
+							{articles.slice(0, 4).map((a) => (
+								<Link
+									key={a.slug}
+									href={`/news/${a.slug}`}
+									className="flex gap-3 items-start rounded-lg border p-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
+									style={{
+										background: "color-mix(in srgb, var(--color-background) 50%, transparent)",
+										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 ? (
+											<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>
+									<div className="min-w-0">
+										<h3 className="text-sm font-extrabold leading-snug" style={{ color: "var(--color-text-readable)" }}>
+											{a.title}
+										</h3>
+										<p className="text-xs font-semibold mt-1" style={{ color: "var(--color-text-muted)" }}>
+											{formatDate(a.createdAt, "date", "")}
+										</p>
+									</div>
+								</Link>
+							))}
+						</div>
+					) : (
+						<p className="text-sm text-center py-4" style={{ color: "var(--color-text-muted)" }}>{tp("noArticles")}</p>
+					)}
+				</div>
 			</div>

 			{/* ── 6. Online users row ── */}
 			{recentUsers.length > 0 && (
-				<div className="text-center">
-					<h3 className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center justify-center gap-2" style={{ color: "var(--color-text-muted)" }}>
-						<span className="w-2 h-2 rounded-full bg-green-500" />
-						{tp("recentUsers")}
-					</h3>
-					<div className="flex flex-wrap justify-center gap-2">
-						{recentUsers.slice(0, 10).map((u) => (
-							<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"
-								style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
-							>
-								<Image
-									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 className="overflow-hidden rounded-xl border" style={{
+					background: "var(--color-surface)",
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+				}}>
+					<div
+						className="flex items-center gap-2.5 px-5 py-3"
+						style={{
+							background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+						}}
+					>
+						<HabboOnline size={18} />
+						<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							{tp("recentUsers")}
+						</h3>
+					</div>
+					<div className="p-4">
+						<div className="flex flex-wrap justify-center gap-2">
+							{recentUsers.slice(0, 12).map((u) => (
+								<div
+									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"
+									style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
+								>
+									<Image
+										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-2xl border text-center px-6 py-10"
+				className="relative overflow-hidden rounded-xl 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)" }}>
+				<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
 					{tp("joinNow", { hotelName })}
 				</h2>
 				<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
@@ -421,30 +453,43 @@ export default async function Home() {
 						boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 					}}
 				>
-					<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+					<HabboEnter size={20} />
 					{tp("register")}
 				</Link>
 			</div>

 			{/* ── 8. Recent photos (compact) ── */}
 			{recentPhotos.length > 0 && (
-				<div className="text-center">
-					<h3 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--color-text-muted)" }}>
-						{tp("recentPhotos")}
-					</h3>
-					<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">
-								<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 className="overflow-hidden rounded-xl border" style={{
+					background: "var(--color-surface)",
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+				}}>
+					<div
+						className="flex items-center gap-2.5 px-5 py-3"
+						style={{
+							background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+						}}
+					>
+						<HabboCamera size={18} />
+						<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							{tp("recentPhotos")}
+						</h3>
+					</div>
+					<div className="p-4">
+						<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>
 			)}
@@ -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,13 +88,7 @@ export function MobileNav({
 										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 								}}
 							>
-								<Image
-									src="/assets/images/icons/navigation/home.png"
-									alt=""
-									width={22}
-									height={22}
-									className="shrink-0"
-								/>
+								<HabboHome size={22} />
 								<span
 									className="text-sm font-extrabold uppercase tracking-wide"
 									style={{
@@ -1,13 +1,12 @@
 "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?: string;
+	icon?: ReactNode;
 	children: ReactNode;
 }

@@ -45,14 +44,7 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 				aria-expanded={open}
 			>
 				{icon ? (
-					<Image
-						src={icon}
-						alt=""
-						width={20}
-						height={20}
-						className="mr-1.5"
-						unoptimized
-					/>
+					<span className="mr-1.5 flex items-center">{icon}</span>
 				) : null}
 				{label}
 				<motion.svg
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import type { Session } from "next-auth";
 import { getTranslations } from "next-intl/server";
@@ -9,6 +8,17 @@ 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");
@@ -53,14 +63,8 @@ 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">
-						<Image
-							src="/assets/images/icons/navigation/me.png"
-							alt=""
-							width={20}
-							height={20}
-							className="mr-1.5"
-						/>
-						<span>{t("home")}</span>
+						<HabboHome size={18} />
+						<span className="ml-1.5">{t("home")}</span>
 					</Link>
 				</div>

@@ -68,7 +72,7 @@ export async function Navigation({ session }: { session: Session | null }) {
 				<div className="hidden md:flex items-center gap-x-1">
 					<NavDropdown
 						label={t("community")}
-						icon="/assets/images/icons/navigation/community.png"
+						icon={<HabboCommunity size={18} />}
 					>
 						<Link href="/news" className="dropdown-item" role="menuitem">
 							{t("articles")}
@@ -95,7 +99,7 @@ export async function Navigation({ session }: { session: Session | null }) {

 					<NavDropdown
 						label={t("shop")}
-						icon="/assets/images/icons/navigation/shop.png"
+						icon={<HabboCatalog size={18} />}
 					>
 						<Link href="/shop" className="dropdown-item" role="menuitem">
 							{t("shop")}
@@ -109,30 +113,18 @@ export async function Navigation({ session }: { session: Session | null }) {
 					</NavDropdown>

 					<Link href="/leaderboard" className="nav-item">
-						<Image
-							src="/assets/images/icons/navigation/leaderboards.png"
-							alt=""
-							width={20}
-							height={20}
-							className="mr-1.5"
-						/>
-						{t("leaderboards")}
+						<HabboRank size={18} />
+						<span className="ml-1.5">{t("leaderboards")}</span>
 					</Link>

 					<Link href="/radio" className="nav-item">
-						<Image
-							src="/assets/images/icons/navigation/bb.png"
-							alt=""
-							width={20}
-							height={20}
-							className="mr-1.5"
-						/>
-						{t("radio")}
+						<HabboGames size={18} />
+						<span className="ml-1.5">{t("radio")}</span>
 					</Link>

 					<NavDropdown
 						label={t("assistance")}
-						icon="/assets/images/icons/navigation/rules.gif"
+						icon={<HabboHeart size={18} />}
 					>
 						<Link href="/help" className="dropdown-item" role="menuitem">
 							{t("helpCenter")}
@@ -157,51 +149,27 @@ export async function Navigation({ session }: { session: Session | null }) {
 					{session?.user ? (
 						<>
 							<Link href="/friends" className="nav-item">
-								<Image
-									src="/assets/images/icons/navigation/goody.png"
-									alt=""
-									width={20}
-									height={20}
-									className="mr-1.5"
-								/>
-								{t("friends")}
+								<HabboOnline size={18} />
+								<span className="ml-1.5">{t("friends")}</span>
 							</Link>
 							<Link href="/messages" className="nav-item">
-								<Image
-									src="/assets/images/icons/navigation/bb.png"
-									alt=""
-									width={20}
-									height={20}
-									className="mr-1.5"
-								/>
-								{t("messages")}
+								<HabboChat size={18} />
+								<span className="ml-1.5">{t("messages")}</span>
 							</Link>
 						</>
 					) : null}

 					{showMod ? (
 						<Link href="/mod" className="nav-item">
-							<Image
-								src="/assets/images/icons/navigation/home.png"
-								alt=""
-								width={20}
-								height={20}
-								className="mr-1.5"
-							/>
-							{t("mod")}
+							<HabboCog size={18} />
+							<span className="ml-1.5">{t("mod")}</span>
 						</Link>
 					) : null}

 					{showAdmin ? (
 						<Link href="/admin" className="nav-item">
-							<Image
-								src="/assets/images/icons/navigation/home.png"
-								alt=""
-								width={20}
-								height={20}
-								className="mr-1.5"
-							/>
-							{t("admin")}
+							<HabboCog size={18} />
+							<span className="ml-1.5">{t("admin")}</span>
 						</Link>
 					) : null}
 				</div>
@@ -213,19 +181,13 @@ export async function Navigation({ session }: { session: Session | null }) {
 					brandLabel={brandLabel}
 				>
 					<Link href="/" className="nav-item">
-						<Image
-							src="/assets/images/icons/navigation/me.png"
-							alt=""
-							width={20}
-							height={20}
-							className="mr-1.5"
-						/>
-						{t("home")}
+						<HabboHome size={18} />
+						<span className="ml-1.5">{t("home")}</span>
 					</Link>

 					<NavDropdown
 						label={t("community")}
-						icon="/assets/images/icons/navigation/community.png"
+						icon={<HabboCommunity size={18} />}
 					>
 						<Link href="/news" className="dropdown-item" role="menuitem">
 							{t("articles")}
@@ -252,7 +214,7 @@ export async function Navigation({ session }: { session: Session | null }) {

 					<NavDropdown
 						label={t("shop")}
-						icon="/assets/images/icons/navigation/shop.png"
+						icon={<HabboCatalog size={18} />}
 					>
 						<Link href="/shop" className="dropdown-item" role="menuitem">
 							{t("shop")}
@@ -266,30 +228,18 @@ export async function Navigation({ session }: { session: Session | null }) {
 					</NavDropdown>

 					<Link href="/leaderboard" className="nav-item">
-						<Image
-							src="/assets/images/icons/navigation/leaderboards.png"
-							alt=""
-							width={20}
-							height={20}
-							className="mr-1.5"
-						/>
-						{t("leaderboards")}
+						<HabboRank size={18} />
+						<span className="ml-1.5">{t("leaderboards")}</span>
 					</Link>

 					<Link href="/radio" className="nav-item">
-						<Image
-							src="/assets/images/icons/navigation/bb.png"
-							alt=""
-							width={20}
-							height={20}
-							className="mr-1.5"
-						/>
-						{t("radio")}
+						<HabboGames size={18} />
+						<span className="ml-1.5">{t("radio")}</span>
 					</Link>

 					<NavDropdown
 						label={t("assistance")}
-						icon="/assets/images/icons/navigation/rules.gif"
+						icon={<HabboHeart size={18} />}
 					>
 						<Link href="/help" className="dropdown-item" role="menuitem">
 							{t("helpCenter")}
@@ -314,51 +264,27 @@ export async function Navigation({ session }: { session: Session | null }) {
 					{session?.user ? (
 						<>
 							<Link href="/friends" className="nav-item">
-								<Image
-									src="/assets/images/icons/navigation/goody.png"
-									alt=""
-									width={20}
-									height={20}
-									className="mr-1.5"
-								/>
-								{t("friends")}
+								<HabboOnline size={18} />
+								<span className="ml-1.5">{t("friends")}</span>
 							</Link>
 							<Link href="/messages" className="nav-item">
-								<Image
-									src="/assets/images/icons/navigation/bb.png"
-									alt=""
-									width={20}
-									height={20}
-									className="mr-1.5"
-								/>
-								{t("messages")}
+								<HabboChat size={18} />
+								<span className="ml-1.5">{t("messages")}</span>
 							</Link>
 						</>
 					) : null}

 					{showMod ? (
 						<Link href="/mod" className="nav-item">
-							<Image
-								src="/assets/images/icons/navigation/home.png"
-								alt=""
-								width={20}
-								height={20}
-								className="mr-1.5"
-							/>
-							{t("mod")}
+							<HabboCog size={18} />
+							<span className="ml-1.5">{t("mod")}</span>
 						</Link>
 					) : null}

 					{showAdmin ? (
 						<Link href="/admin" className="nav-item">
-							<Image
-								src="/assets/images/icons/navigation/home.png"
-								alt=""
-								width={20}
-								height={20}
-								className="mr-1.5"
-							/>
-							{t("admin")}
+							<HabboCog size={18} />
+							<span className="ml-1.5">{t("admin")}</span>
 						</Link>
 					) : null}

@@ -381,12 +307,7 @@ export async function Navigation({ session }: { session: Session | null }) {
 					className="ml-auto flex md:hidden items-center gap-2 shrink-0"
 					aria-label="Home"
 				>
-					<Image
-						src="/assets/images/icons/navigation/home.png"
-						alt=""
-						width={26}
-						height={26}
-					/>
+					<HabboHome size={24} />
 					<span
 						className="text-base font-extrabold uppercase tracking-wide"
 						style={{
@@ -0,0 +1,310 @@
+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} />;
+}