Refactor: Replace emojis with Lucide React icons

src/components/homepage/ContentTabs.tsx

@@ -4,7 +4,7 @@ import { ParkCard } from '@/components/parks/ParkCard';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Star, TrendingUp, Plus, MapPin, Clock, Zap } from 'lucide-react';
+import { Star, TrendingUp, Plus, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -81,13 +81,13 @@ export function ContentTabs() {
 
   const getRideIcon = (category: string) => {
     switch (category) {
-      case 'roller_coaster': return '🎢';
+      case 'roller_coaster': return <FerrisWheel className="w-6 h-6" />;
-      case 'water_ride': return '🌊';
+      case 'water_ride': return <Waves className="w-6 h-6" />;
-      case 'dark_ride': return '🎭';
+      case 'dark_ride': return <Theater className="w-6 h-6" />;
-      case 'flat_ride': return '🎡';
+      case 'flat_ride': return <FerrisWheel className="w-6 h-6" />;
-      case 'kiddie_ride': return '🎠';
+      case 'kiddie_ride': return <FerrisWheel className="w-6 h-6" />;
-      case 'transportation': return '🚂';
+      case 'transportation': return <Train className="w-6 h-6" />;
-      default: return '🎢';
+      default: return <FerrisWheel className="w-6 h-6" />;
     }
   };
 
@@ -120,7 +120,7 @@ export function ContentTabs() {
               className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
             />
           ) : (
-            <div className="text-6xl opacity-50">
+            <div className="opacity-50 flex items-center justify-center">
               {getRideIcon(ride.category)}
             </div>
           )}
@@ -143,7 +143,7 @@ export function ContentTabs() {
               <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                 {ride.name}
               </h3>
-              <span className="text-xl">{getRideIcon(ride.category)}</span>
+              <span className="flex items-center">{getRideIcon(ride.category)}</span>
             </div>
             
             {ride.park?.name && (

src/components/homepage/FeaturedParks.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Star, TrendingUp, Award } from 'lucide-react';
+import { Star, TrendingUp, Award, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -53,10 +53,10 @@ export function FeaturedParks() {
       <div className="relative">
         {/* Gradient Background */}
         <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
-          <div className="text-6xl opacity-50">
+          <div className="opacity-50">
-            {park.park_type === 'theme_park' ? '🏰' : 
+            {park.park_type === 'theme_park' ? <Castle className="w-16 h-16" /> : 
-             park.park_type === 'amusement_park' ? '🎢' :
+             park.park_type === 'amusement_park' ? <FerrisWheel className="w-16 h-16" /> :
-             park.park_type === 'water_park' ? '🏊' : '🎪'}
+             park.park_type === 'water_park' ? <Waves className="w-16 h-16" /> : <Tent className="w-16 h-16" />}
           </div>
           <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
           
@@ -88,7 +88,10 @@ export function FeaturedParks() {
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-3">
                 <span className="text-primary font-medium">{park.ride_count} rides</span>
-                <span className="text-accent font-medium">{park.coaster_count} 🎢</span>
+                <div className="flex items-center gap-1">
+                  <span className="text-accent font-medium">{park.coaster_count}</span>
+                  <FerrisWheel className="w-3 h-3 text-accent" />
+                </div>
               </div>
               <div className="text-xs text-muted-foreground">
                 {park.review_count} reviews

src/components/layout/Header.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield } from 'lucide-react';
+import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield, FerrisWheel, Factory } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
@@ -40,10 +40,12 @@ export function Header() {
                   Parks
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => navigate('/rides')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
-                  🎢 <span className="ml-2">Rides</span>
+                  <FerrisWheel className="w-4 h-4 mr-2" />
+                  Rides
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => navigate('/manufacturers')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
-                  🏭 <span className="ml-2">Manufacturers</span>
+                  <Factory className="w-4 h-4 mr-2" />
+                  Manufacturers
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => navigate('/operators')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   <Building className="w-4 h-4 mr-2" />
@@ -96,10 +98,12 @@ export function Header() {
                   Parks
                 </Button>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}>
-                  🎢 Rides
+                  <FerrisWheel className="w-4 h-4 mr-2" />
+                  Rides
                 </Button>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
-                  🏭 Manufacturers
+                  <Factory className="w-4 h-4 mr-2" />
+                  Manufacturers
                 </Button>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/operators')}>
                   <Building className="w-4 h-4 mr-2" />

src/components/parks/ParkCard.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Star, Users, Clock } from 'lucide-react';
+import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
 
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      case 'theme_park': return '🏰';
+      case 'theme_park': return <Castle className="w-5 h-5" />;
-      case 'amusement_park': return '🎢';
+      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
-      case 'water_park': return '🏊';
+      case 'water_park': return <Waves className="w-5 h-5" />;
-      case 'family_entertainment': return '🎪';
+      case 'family_entertainment': return <Tent className="w-5 h-5" />;
-      default: return '🎡';
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -50,7 +50,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
             />
           ) : (
-            <div className="text-6xl opacity-50">
+            <div className="opacity-50 flex items-center justify-center">
               {getParkTypeIcon(park.park_type)}
             </div>
           )}
@@ -73,7 +73,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                 {park.name}
               </h3>
-              <span className="text-xl">{getParkTypeIcon(park.park_type)}</span>
+              {getParkTypeIcon(park.park_type)}
             </div>
             
             {park.location && (
@@ -105,7 +105,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               </div>
               <div className="flex items-center gap-1">
                 <span className="text-accent font-medium">{park.coaster_count}</span>
-                <span className="text-muted-foreground">🎢</span>
+                <FerrisWheel className="w-3 h-3 text-muted-foreground" />
               </div>
             </div>
             

src/components/parks/ParkGrid.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Search, Filter, MapPin, SlidersHorizontal } from 'lucide-react';
+import { Search, Filter, MapPin, SlidersHorizontal, FerrisWheel } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -240,7 +240,7 @@ export function ParkGrid() {
       {/* Parks Grid */}
       {filteredParks.length === 0 ? (
         <div className="text-center py-12">
-          <div className="text-6xl mb-4 opacity-50">🎢</div>
+          <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
           <h3 className="text-xl font-semibold mb-2">No parks found</h3>
           <p className="text-muted-foreground mb-4">
             Try adjusting your search terms or filters

src/components/parks/ParkListView.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Star, Users, Calendar, ExternalLink } from 'lucide-react';
+import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
 
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      case 'theme_park': return '🏰';
+      case 'theme_park': return <Castle className="w-5 h-5" />;
-      case 'amusement_park': return '🎢';
+      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
-      case 'water_park': return '🏊';
+      case 'water_park': return <Waves className="w-5 h-5" />;
-      case 'family_entertainment': return '🎪';
+      case 'family_entertainment': return <Tent className="w-5 h-5" />;
-      default: return '🎡';
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -55,7 +55,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                   />
                 ) : (
                   <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
-                    <span className="text-3xl opacity-50">
+                    <span className="opacity-50">
                       {getParkTypeIcon(park.park_type)}
                     </span>
                   </div>
@@ -79,7 +79,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                         <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                           {park.name}
                         </h3>
-                        <span className="text-lg">{getParkTypeIcon(park.park_type)}</span>
+                        {getParkTypeIcon(park.park_type)}
                       </div>
                       
                       {park.location && (
@@ -132,7 +132,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                     </div>
                     <div className="flex items-center gap-1">
                       <span className="text-accent font-medium">{park.coaster_count || 0}</span>
-                      <span className="text-muted-foreground">🎢</span>
+                      <FerrisWheel className="w-3 h-3 text-muted-foreground" />
                     </div>
                     {park.review_count > 0 && (
                       <div className="flex items-center gap-1">

src/components/search/AutocompleteSearch.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from 'react';
-import { Search, X, Clock, Zap } from 'lucide-react';
+import { Search, X, Clock, Zap, Castle, FerrisWheel, Factory } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -161,13 +161,13 @@ export function AutocompleteSearch({
   const getResultIcon = (result: SearchResult) => {
     switch (result.type) {
       case 'park':
-        return '🏰';
+        return <Castle className="w-5 h-5" />;
       case 'ride':
-        return '🎢';
+        return <FerrisWheel className="w-5 h-5" />;
       case 'company':
-        return '🏭';
+        return <Factory className="w-5 h-5" />;
       default:
-        return '🔍';
+        return <Search className="w-5 h-5" />;
     }
   };
 
@@ -260,7 +260,7 @@ export function AutocompleteSearch({
                   </>
                 ) : (
                   <>
-                    <div className="text-2xl">{getResultIcon(item as SearchResult)}</div>
+                    <div className="flex items-center justify-center">{getResultIcon(item as SearchResult)}</div>
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2">
                         <span className="font-medium truncate">{item.title}</span>

src/components/search/SearchResults.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { MapPin, Star, Search as SearchIcon } from 'lucide-react';
+import { MapPin, Star, Search as SearchIcon, Castle, FerrisWheel, Waves, Theater, Factory } from 'lucide-react';
 import { Park, Ride, Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useNavigate } from 'react-router-dom';
@@ -95,21 +95,21 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
       case 'park':
         const park = result.data as Park;
         switch (park.park_type) {
-          case 'theme_park': return '🏰';
+          case 'theme_park': return <Castle className="w-5 h-5" />;
-          case 'amusement_park': return '🎢';
+          case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
-          case 'water_park': return '🏊';
+          case 'water_park': return <Waves className="w-5 h-5" />;
-          default: return '🎡';
+          default: return <FerrisWheel className="w-5 h-5" />;
         }
       case 'ride':
         const ride = result.data as Ride;
         switch (ride.category) {
-          case 'roller_coaster': return '🎢';
+          case 'roller_coaster': return <FerrisWheel className="w-5 h-5" />;
-          case 'water_ride': return '🌊';
+          case 'water_ride': return <Waves className="w-5 h-5" />;
-          case 'dark_ride': return '🎭';
+          case 'dark_ride': return <Theater className="w-5 h-5" />;
-          default: return '🎡';
+          default: return <FerrisWheel className="w-5 h-5" />;
         }
       case 'company':
-        return '🏭';
+        return <Factory className="w-5 h-5" />;
     }
   };
 
@@ -189,7 +189,7 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
           >
             <CardContent className="p-3">
               <div className="flex items-center gap-3">
-                <div className="text-2xl">{getResultIcon(result)}</div>
+                <div className="flex items-center justify-center">{getResultIcon(result)}</div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
                     <h4 className="font-medium text-sm truncate">

src/pages/Manufacturers.tsx

@@ -5,7 +5,7 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Search, Filter, SlidersHorizontal, Globe, MapPin } from 'lucide-react';
+import { Search, Filter, SlidersHorizontal, Globe, MapPin, Factory, FerrisWheel, Ruler, Hammer, Building2 } from 'lucide-react';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useNavigate } from 'react-router-dom';
@@ -59,11 +59,11 @@ export default function Manufacturers() {
 
   const getCompanyIcon = (type: string) => {
     switch (type) {
-      case 'manufacturer': return '🏭';
+      case 'manufacturer': return <Factory className="w-5 h-5" />;
-      case 'operator': return '🎡';
+      case 'operator': return <FerrisWheel className="w-5 h-5" />;
-      case 'designer': return '📐';
+      case 'designer': return <Ruler className="w-5 h-5" />;
-      case 'contractor': return '🔨';
+      case 'contractor': return <Hammer className="w-5 h-5" />;
-      default: return '🏢';
+      default: return <Building2 className="w-5 h-5" />;
     }
   };
 
@@ -107,7 +107,7 @@ export default function Manufacturers() {
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
-            <div className="text-4xl">🏭</div>
+            <Factory className="w-10 h-10 text-primary" />
             <h1 className="text-4xl font-bold">Manufacturers & Companies</h1>
           </div>
           <p className="text-lg text-muted-foreground">
@@ -172,7 +172,7 @@ export default function Manufacturers() {
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-2">
-                        <span className="text-2xl">{getCompanyIcon(company.company_type)}</span>
+                        <span className="flex items-center">{getCompanyIcon(company.company_type)}</span>
                         <Badge variant="outline" className="text-xs">
                           {formatCompanyType(company.company_type)}
                         </Badge>
@@ -238,7 +238,7 @@ export default function Manufacturers() {
           </div>
         ) : (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4">🏭</div>
+            <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
             <h3 className="text-xl font-semibold mb-2">No companies found</h3>
             <p className="text-muted-foreground">
               Try adjusting your search criteria or filters

src/pages/ParkDetail.tsx

@@ -16,7 +16,13 @@ import {
   ArrowLeft,
   Users,
   Zap,
-  Camera
+  Camera,
+  Castle,
+  FerrisWheel,
+  Waves,
+  Tent,
+  Theater,
+  Train
 } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
@@ -80,11 +86,11 @@ export default function ParkDetail() {
 
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      case 'theme_park': return '🏰';
+      case 'theme_park': return <Castle className="w-20 h-20" />;
-      case 'amusement_park': return '🎢';
+      case 'amusement_park': return <FerrisWheel className="w-20 h-20" />;
-      case 'water_park': return '🏊';
+      case 'water_park': return <Waves className="w-20 h-20" />;
-      case 'family_entertainment': return '🎪';
+      case 'family_entertainment': return <Tent className="w-20 h-20" />;
-      default: return '🎡';
+      default: return <FerrisWheel className="w-20 h-20" />;
     }
   };
 
@@ -96,13 +102,13 @@ export default function ParkDetail() {
 
   const getRideIcon = (category: string) => {
     switch (category) {
-      case 'roller_coaster': return '🎢';
+      case 'roller_coaster': return <FerrisWheel className="w-5 h-5" />;
-      case 'water_ride': return '🌊';
+      case 'water_ride': return <Waves className="w-5 h-5" />;
-      case 'dark_ride': return '🎭';
+      case 'dark_ride': return <Theater className="w-5 h-5" />;
-      case 'flat_ride': return '🎡';
+      case 'flat_ride': return <FerrisWheel className="w-5 h-5" />;
-      case 'kiddie_ride': return '🎠';
+      case 'kiddie_ride': return <FerrisWheel className="w-5 h-5" />;
-      case 'transportation': return '🚂';
+      case 'transportation': return <Train className="w-5 h-5" />;
-      default: return '🎢';
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -167,7 +173,7 @@ export default function ParkDetail() {
               />
             ) : (
               <div className="flex items-center justify-center h-full">
-                <div className="text-8xl opacity-50">
+                <div className="opacity-50">
                   {getParkTypeIcon(park.park_type)}
                 </div>
               </div>
@@ -235,7 +241,7 @@ export default function ParkDetail() {
           </Card>
           <Card>
             <CardContent className="p-4 text-center">
-              <div className="text-2xl font-bold">{getParkTypeIcon(park.park_type)}</div>
+              <div className="flex items-center justify-center mb-2">{getParkTypeIcon(park.park_type)}</div>
               <div className="text-sm text-muted-foreground">{formatParkType(park.park_type)}</div>
             </CardContent>
           </Card>
@@ -280,7 +286,7 @@ export default function ParkDetail() {
                           className="flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
                           onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
                         >
-                          <div className="text-2xl">{getRideIcon(ride.category)}</div>
+                          <div className="flex items-center">{getRideIcon(ride.category)}</div>
                           <div className="flex-1">
                             <h4 className="font-medium">{ride.name}</h4>
                             <p className="text-sm text-muted-foreground">
@@ -388,7 +394,7 @@ export default function ParkDetail() {
                 >
                   <CardContent className="p-4">
                     <div className="flex items-start gap-3 mb-3">
-                      <div className="text-2xl">{getRideIcon(ride.category)}</div>
+                      <div className="flex items-center">{getRideIcon(ride.category)}</div>
                       <div className="flex-1">
                         <h3 className="font-medium">{ride.name}</h3>
                         <p className="text-sm text-muted-foreground">

src/pages/Parks.tsx

@@ -14,7 +14,8 @@ import {
   Search,
   ChevronDown,
   Sliders,
-  X
+  X,
+  FerrisWheel
 } from 'lucide-react';
 import { Park } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -364,7 +365,7 @@ export default function Parks() {
           </div>
         ) : (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4 opacity-50">🎢</div>
+            <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
             <h3 className="text-xl font-semibold mb-2">No parks found</h3>
             <p className="text-muted-foreground mb-4">
               Try adjusting your search terms or filters

src/pages/RideDetail.tsx

@@ -19,7 +19,11 @@ import {
   Camera,
   Heart,
   RotateCcw,
-  AlertTriangle
+  AlertTriangle,
+  FerrisWheel,
+  Waves,
+  Theater,
+  Train
 } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
@@ -82,13 +86,13 @@ export default function RideDetail() {
 
   const getRideIcon = (category: string) => {
     switch (category) {
-      case 'roller_coaster': return '🎢';
+      case 'roller_coaster': return <FerrisWheel className="w-20 h-20" />;
-      case 'water_ride': return '🌊';
+      case 'water_ride': return <Waves className="w-20 h-20" />;
-      case 'dark_ride': return '🎭';
+      case 'dark_ride': return <Theater className="w-20 h-20" />;
-      case 'flat_ride': return '🎡';
+      case 'flat_ride': return <FerrisWheel className="w-20 h-20" />;
-      case 'kiddie_ride': return '🎠';
+      case 'kiddie_ride': return <FerrisWheel className="w-20 h-20" />;
-      case 'transportation': return '🚂';
+      case 'transportation': return <Train className="w-20 h-20" />;
-      default: return '🎢';
+      default: return <FerrisWheel className="w-20 h-20" />;
     }
   };
 
@@ -159,7 +163,7 @@ export default function RideDetail() {
               />
             ) : (
               <div className="flex items-center justify-center h-full">
-                <div className="text-8xl opacity-50">
+                <div className="opacity-50">
                   {getRideIcon(ride.category)}
                 </div>
               </div>
@@ -273,7 +277,7 @@ export default function RideDetail() {
           {ride.drop_height_meters && (
             <Card>
               <CardContent className="p-4 text-center">
-                <div className="text-2xl mb-2">⬇️</div>
+                <TrendingDown className="w-6 h-6 mx-auto mb-2 text-destructive" />
                 <div className="text-2xl font-bold text-destructive">
                   <MeasurementDisplay value={ride.drop_height_meters} type="distance" />
                 </div>
@@ -285,7 +289,7 @@ export default function RideDetail() {
           {ride.max_g_force && (
             <Card>
               <CardContent className="p-4 text-center">
-                <div className="text-2xl mb-2">⚡</div>
+                <Zap className="w-6 h-6 mx-auto mb-2 text-warning" />
                 <div className="text-2xl font-bold text-warning">{ride.max_g_force}g</div>
                 <div className="text-sm text-muted-foreground">max G-force</div>
               </CardContent>
@@ -352,7 +356,7 @@ export default function RideDetail() {
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="flex items-center gap-3">
-                      <div className="text-2xl">{getRideIcon(ride.category)}</div>
+                      <div className="flex items-center">{getRideIcon(ride.category)}</div>
                       <div>
                         <div className="font-medium">Category</div>
                         <div className="text-sm text-muted-foreground">

src/pages/Rides.tsx

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
+import { Filter, SlidersHorizontal, Zap, Clock, Star, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Ride } from '@/types/database';
@@ -77,13 +77,13 @@ export default function Rides() {
 
   const getRideIcon = (category: string) => {
     switch (category) {
-      case 'roller_coaster': return '🎢';
+      case 'roller_coaster': return <FerrisWheel className="w-16 h-16" />;
-      case 'water_ride': return '🌊';
+      case 'water_ride': return <Waves className="w-16 h-16" />;
-      case 'dark_ride': return '🎭';
+      case 'dark_ride': return <Theater className="w-16 h-16" />;
-      case 'flat_ride': return '🎡';
+      case 'flat_ride': return <FerrisWheel className="w-16 h-16" />;
-      case 'kiddie_ride': return '🎠';
+      case 'kiddie_ride': return <FerrisWheel className="w-16 h-16" />;
-      case 'transportation': return '🚂';
+      case 'transportation': return <Train className="w-16 h-16" />;
-      default: return '🎢';
+      default: return <FerrisWheel className="w-16 h-16" />;
     }
   };
 
@@ -146,7 +146,7 @@ export default function Rides() {
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
-            <div className="text-4xl">🎢</div>
+            <FerrisWheel className="w-10 h-10 text-primary" />
             <h1 className="text-4xl font-bold">Rides & Attractions</h1>
           </div>
           <p className="text-lg text-muted-foreground">
@@ -233,7 +233,7 @@ export default function Rides() {
                         className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                       />
                     ) : (
-                      <div className="text-6xl opacity-50">
+                      <div className="opacity-50 flex items-center justify-center">
                         {getRideIcon(ride.category)}
                       </div>
                     )}
@@ -256,7 +256,7 @@ export default function Rides() {
                         <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                           {ride.name}
                         </h3>
-                        <span className="text-xl">{getRideIcon(ride.category)}</span>
+                        <span className="flex items-center">{getRideIcon(ride.category)}</span>
                       </div>
                       
                       {ride.park?.name && (
@@ -327,7 +327,7 @@ export default function Rides() {
           </div>
         ) : (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4">🎢</div>
+            <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
             <h3 className="text-xl font-semibold mb-2">No rides found</h3>
             <p className="text-muted-foreground">
               Try adjusting your search criteria or filters

src/pages/Search.tsx

@@ -5,7 +5,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Search, MapPin, Zap, Star } from 'lucide-react';
+import { Search, MapPin, Zap, Star, Castle, FerrisWheel, Factory } from 'lucide-react';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { useSearch, SearchResult } from '@/hooks/useSearch';
 
@@ -59,10 +59,10 @@ export default function SearchPage() {
 
   const getTypeIcon = (type: string) => {
     switch (type) {
-      case 'park': return '🏰';
+      case 'park': return <Castle className="w-8 h-8" />;
-      case 'ride': return '🎢';
+      case 'ride': return <FerrisWheel className="w-8 h-8" />;
-      case 'company': return '🏭';
+      case 'company': return <Factory className="w-8 h-8" />;
-      default: return '🔍';
+      default: return <Search className="w-8 h-8" />;
     }
   };
 
@@ -151,7 +151,7 @@ export default function SearchPage() {
                   >
                     <CardContent className="p-6">
                       <div className="flex items-start gap-4">
-                        <div className="text-3xl">{getTypeIcon(result.type)}</div>
+                        <div className="flex items-center justify-center">{getTypeIcon(result.type)}</div>
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2 mb-2">
                             <h3 className="font-semibold text-lg group-hover:text-primary transition-colors truncate">
@@ -198,7 +198,7 @@ export default function SearchPage() {
             {/* No Results */}
             {!loading && query && filteredResults.length === 0 && (
               <div className="text-center py-12">
-                <div className="text-6xl mb-4 opacity-50">🔍</div>
+                <Search className="w-16 h-16 mb-4 opacity-50 mx-auto" />
                 <h3 className="text-xl font-semibold mb-2">No results found</h3>
                 <p className="text-muted-foreground mb-4">
                   Try searching for something else or adjust your search terms
@@ -220,7 +220,7 @@ export default function SearchPage() {
         {/* Initial State */}
         {!query && (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4 opacity-50">🔍</div>
+            <Search className="w-16 h-16 mb-4 opacity-50 mx-auto" />
             <h3 className="text-xl font-semibold mb-2">Start your search</h3>
             <p className="text-muted-foreground">
               Search for theme parks, rides, or companies to get started