Lucide Icons
Modern, beautiful, open-source icon set
🌈 Color Palette
Discovery-focused colors with bold red primary
Primary (Red)
Accent (Coral)
Functional
Neutrals
✍️ Typography
Aktiv Grotesk font family with clear hierarchy
Display / 48px / Extrabold
Freedom to Discover
H1 / 32px / Semibold
Explore Local Events
H2 / 24px / Semibold
Nearby Activities
H3 / 20px / Semibold
Featured This Week
Body Large / 18px / Regular
Discover hidden gems and exclusive experiences in your area
Body / 16px / Regular
Find events, activities, and places near you
Small / 14px / Regular
Updated 2 hours ago • 1.2km away
🔘 Buttons
Primary, secondary, and icon buttons with Lucide icons
Primary Buttons
Secondary Buttons
Icon Buttons (Lucide)
Buttons with Lucide Icons
🎴 Universal Item Cards
Flexible cards for events, places, and items with Lucide icons
Event
Jazz Night @ The Pavilion
Intimate jazz performance featuring local artists in a cozy atmosphere...
Trail
Riverside Nature Walk
Scenic walking route along the river with wildlife viewing spots...
Mystery Pop-Up
Something special is happening nearby. Get within 50m to reveal!
🏷️ Badges & Status Indicators
Category and status badges with Lucide icons
Category Badges
Status Badges
📝 Form Elements
Inputs, search, and filters with Lucide icons
Search Bar
Filter Chips
Text Inputs
⏳ Loading States
Skeletons and spinners
Spinner
Skeleton Card
🧭 Navigation
Mobile tab bar and top nav with Lucide icons
Bottom Tab Bar (Mobile)
Top Navigation Bar
ZappActive
🎨 Lucide Icon Examples
Clean, consistent stroke-based design
Events & Entertainment
Food & Drink
Nature & Activities
Navigation & Map
🗺️ Map Markers (Lucide)
Pin-style markers with Lucide icons
Category Markers
Clean stroke-based icons
More Variations
Consistent style
Special Items
Hidden & special
💻 Usage Example
// Install
npm install lucide-react
// Import
import { Music, MapPin, Coffee, ShoppingBag } from 'lucide-react';
// Use in React
<Music className="w-5 h-5 text-rose-600" />
<MapPin size={20} color="#E11D48" />
// React Native
import { Music } from 'lucide-react-native';
<Music size={20} color="#E11D48" />