Map Pin Icon Sets & Resources

The LeafletMap component’s markerIcon prop accepts any image URL - PNG, JPG, SVG, GIF, or even data URLs. There are no restrictions.

🎯 Popular Map Pin Icon Sets

1. Mapbox Maki Icons (FREE)

URL: https://labs.mapbox.com/maki-icons/

What: 200+ map icons designed for cartography
Sizes: 11px, 15px (retina: @2x versions)
Format: PNG, SVG
License: CC0 (Public Domain)
Perfect for: Points of interest (bar, restaurant, hotel, etc.)

Example usage:

<LeafletMap
  markerIcon="https://labs.mapbox.com/maki-icons/latest/renders/bar-15@2x.png"
  markers={[[lat, lng, 'Bar']]}
/>

Popular icons:

bar-15@2x.png - Bar/club
restaurant-15@2x.png - Restaurant
lodging-15@2x.png - Hotel/accommodation
heart-15@2x.png - Favorite/romantic
marker-15@2x.png - Generic location
music-15@2x.png - Music venue

2. Google Maps Pin Icons (FREE)

URL: https://developers.google.com/maps/documentation/javascript/icons

Classic Google Maps pin colors:

// Red pin (default Google Maps style)
markerIcon="http://maps.google.com/mapfiles/ms/icons/red-dot.png"

// Blue pin
markerIcon="http://maps.google.com/mapfiles/ms/icons/blue-dot.png"

// Green pin
markerIcon="http://maps.google.com/mapfiles/ms/icons/green-dot.png"

// Yellow pin
markerIcon="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"

// Purple pin
markerIcon="http://maps.google.com/mapfiles/ms/icons/purple-dot.png"

// Pink pin
markerIcon="http://maps.google.com/mapfiles/ms/icons/pink-dot.png"

3. Map Icons Collection (FREE)

URL: https://mapicons.mapsmarker.com/

What: 1000+ categorized map markers
Format: PNG (shadow included)
License: CC BY-SA 3.0
Categories: Accommodation, Food, Shopping, Entertainment, etc.

Example:

markerIcon="https://mapicons.mapsmarker.com/markers/restaurants-bars/bars/bar/?custom_color=ff69b4"

4. Font Awesome Map Markers (FREE/Pro)

URL: https://fontawesome.com/

Use Font Awesome icons as markers via CDN or data URLs:

// Using Font Awesome CDN (requires setup)
markerIcon="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/svgs/solid/map-pin.svg"

Popular FA map icons:

map-pin.svg - Classic pin
map-marker-alt.svg - Rounded pin
map-location.svg - Location marker
flag.svg - Flag marker

5. Ionicons (You already have this!)

URL: https://ionic.io/ionicons

Your monorepo already uses Ionicons. Convert any icon to a map marker:

// Location pin
markerIcon="https://unpkg.com/ionicons@7.1.0/dist/svg/location.svg"

// Flag
markerIcon="https://unpkg.com/ionicons@7.1.0/dist/svg/flag.svg"

// Heart
markerIcon="https://unpkg.com/ionicons@7.1.0/dist/svg/heart.svg"

// Home
markerIcon="https://unpkg.com/ionicons@7.1.0/dist/svg/home.svg"

// Star
markerIcon="https://unpkg.com/ionicons@7.1.0/dist/svg/star.svg"

6. Flaticon (FREE/Premium)

URL: https://www.flaticon.com/search?word=map%20pin

What: Millions of icons, many free
Format: PNG, SVG
License: Free with attribution, or paid
Search: “map pin”, “location”, “marker”

Download, host, and use:

markerIcon="/assets/icons/custom-pin.png"

7. Lucide Icons (You already have this!)

URL: https://lucide.dev/

Your monorepo uses Lucide. Available icons:

map-pin - Standard pin
map-pin-off - Disabled pin
flag - Flag marker
circle - Simple circle
heart - Heart marker
star - Star marker

Via CDN:

markerIcon="https://unpkg.com/lucide-static@latest/icons/map-pin.svg"

8. Material Symbols (FREE)

URL: https://fonts.google.com/icons

Google’s Material Symbols for maps:

location_on - Pin
place - Location
pin_drop - Pin drop
flag - Flag
star - Star

9. Unicode Emoji (FREE, Built-in)

Convert any emoji to an image:

// Rainbow flag emoji
const rainbowFlag = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
    <text x="19" y="30" font-size="32" text-anchor="middle">🏳️‍🌈</text>
  </svg>
`)}`;

<LeafletMap markerIcon={rainbowFlag} />

Useful emojis:

📍 - Red pin
📌 - Pushpin
🏳️‍🌈 - Rainbow flag
❤️ - Heart
⭐ - Star
🎯 - Target
🏠 - House

10. The Noun Project (FREE/Premium)

URL: https://thenounproject.com/

What: 5+ million icons
Format: SVG, PNG
License: Free with attribution or paid

🎮 Joystick/Pin Icon (Like Your Screenshot)

The pin in your screenshot looks like a modern location pin. Here are options:

Option A: Use a simple circle + stick SVG

const modernPin = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
    <!-- Stick -->
    <line x1="16" y1="16" x2="16" y2="38" stroke="#333" stroke-width="2"/>
    <!-- Circle -->
    <circle cx="16" cy="16" r="14" fill="#FF6B6B" stroke="#fff" stroke-width="2"/>
    <!-- Inner circle -->
    <circle cx="16" cy="16" r="8" fill="#fff" opacity="0.3"/>
  </svg>
`)}`;

<LeafletMap markerIcon={modernPin} />

Option B: Use a pre-made icon

Find “location pin modern” or “map marker minimal” on:

Flaticon
The Noun Project
Iconfinder

Option C: Google Maps new pin style

markerIcon="http://maps.google.com/mapfiles/kml/paddle/red-circle.png"

🏳️‍🌈 Rainbow Flag Icons

Option 1: Unicode emoji (as shown above)

const rainbowFlag = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38">
    <text x="19" y="30" font-size="32" text-anchor="middle">🏳️‍🌈</text>
  </svg>
`)}`;

Option 2: SVG Rainbow flag

const prideFlag = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
    <rect x="5" y="4" width="28" height="4" fill="#E40303"/>
    <rect x="5" y="8" width="28" height="4" fill="#FF8C00"/>
    <rect x="5" y="12" width="28" height="4" fill="#FFED00"/>
    <rect x="5" y="16" width="28" height="4" fill="#008026"/>
    <rect x="5" y="20" width="28" height="4" fill="#24408E"/>
    <rect x="5" y="24" width="28" height="4" fill="#732982"/>
  </svg>
`)}`;

Option 3: Image from Pride flag icon pack

Search for “pride flag icon” on Flaticon or similar.

🔴 Traditional Red Map Pin

Google Maps classic red pin:

markerIcon="http://maps.google.com/mapfiles/ms/icons/red-dot.png"

Larger red pushpin:

markerIcon="http://maps.google.com/mapfiles/ms/icons/red-pushpin.png"

Custom red pin SVG:

const redPin = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
    <path d="M16 0 C7 0 0 7 0 16 C0 28 16 40 16 40 S32 28 32 16 C32 7 25 0 16 0 Z"
          fill="#DC143C"
          stroke="#fff"
          stroke-width="2"/>
    <circle cx="16" cy="16" r="6" fill="#fff" opacity="0.5"/>
  </svg>
`)}`;

📦 Recommended Workflow

For Production:

Choose your icon source (Mapbox Maki, Flaticon, etc.)
Download the icon (PNG or SVG)

Add to your assets:

packages/assets/icons/maps/
├── location-red.png
├── location-pink.png
├── location-purple.png
├── pride-flag.png
└── ...

Import and use:

import locationPink from '@cloudalt-frontend/assets/icons/maps/location-pink.png';

<LeafletMap markerIcon={locationPink} />

For Quick Testing:

Use CDN URLs directly:

<LeafletMap
  markerIcon="https://maps.google.com/mapfiles/ms/icons/pink-dot.png"
/>

🎨 Size & Configuration

Current default in LeafletMap:

iconSize: [38, 38]        // Width, height
iconAnchor: [19, 38]      // Where the icon "points" (bottom center)
popupAnchor: [0, -38]     // Where popup appears (above icon)

These are hardcoded. Want different sizes? Let me know and I can:

Add props for iconSize, iconAnchor, etc.
Auto-detect size from image
Provide size presets (small, medium, large)

💡 Quick Recommendation for Stay_Match

For your use case, I’d recommend:

Mapbox Maki for POI (bars, restaurants, hotels)
Google Maps pins for basic colored markers (pink, purple, etc.)
Custom pride flag for Pride City specifically
Modern circle pin (like your screenshot) as the primary brand marker

Want me to create a curated set of markers for your divisions?