fix: render lucide game icons in homepage and search page

app/(main)/page.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { GameIcon } from "@/lib/game-icons"
 import { mockGames, mockPlayers, mockShops } from "@/lib/mock-data"
 
 export default function HomePage() {
@@ -43,7 +44,7 @@ export default function HomePage() {
               href={`/search?game=${encodeURIComponent(game.name)}`}
               className="flex flex-col items-center gap-2 rounded-lg border p-3 hover:bg-accent/50 transition-colors"
             >
-              <span className="text-2xl">{game.icon}</span>
+              <GameIcon name={game.icon} className="h-6 w-6" />
               <span className="text-xs font-medium text-center">{game.name}</span>
             </Link>
           ))}

app/(main)/search/page.tsx

@@ -41,6 +41,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 import { Switch } from "@/components/ui/switch"
+import { GameIcon } from "@/lib/game-icons"
 import { mockGames, mockPlayers } from "@/lib/mock-data"
 import type { Player } from "@/lib/types"
 import { cn } from "@/lib/utils"
@@ -209,7 +210,7 @@ function FilterSection({
                 htmlFor={`game-${game.id}`}
                 className="text-sm font-normal cursor-pointer flex items-center gap-2"
               >
-                <span>{game.icon}</span>
+                <GameIcon name={game.icon} className="h-4 w-4" />
                 {game.name}
               </Label>
             </div>