GeoDirectory

How to Create Custom Map Markers (the Complete Guide)

Paolo

If you’ve ever tried to add custom map markers to a directory site, a Leaflet map, or a Mapbox dashboard, you already know the problem.

The default markers look generic.

If you’ve ever tried to add custom map markers to a directory site, a Leaflet map, or a Mapbox dashboard, you know the loop.

The defaults look generic. Existing free tools tend to cover one icon library (usually Font Awesome) and output PNGs only.

The moment you need a marker that uses a Lucide icon, matches your brand colors exactly, or comes out as clean SVG you can recolor with CSS, you’re back in Illustrator or pasting SVG paths into a CodePen..

We’ve been building GeoDirectory for over 12 years, and custom map markers come up in support tickets every single week.

So we built the tool we wish existed: MapMarker Studio.

It’s free, browser-based, requires no signup, includes 40,000+ icons, allows downloading SVG or PNG pixel-perfect map markers, and outputs paste-ready code for every major mapping platform.

This post is the complete guide to creating custom map markers.

What they are, why the defaults fall short, how to design good ones, and how to actually get them into your map.

What is a custom map marker?

A map marker is the visual indicator that pins a location on a map.

Every mapping platform ships with a default.

Google Maps has its red teardrop, Leaflet has a blue pin, and Mapbox uses a circle.

They work, but they’re forgettable.

When you have more than one type of location on a map (restaurants vs. hotels, open vs. closed, free vs. paid), you need visual differentiation that the defaults don’t give you.

A custom map marker is any marker you’ve designed or customized yourself.

Different shape, different color, an icon inside it, a label, a shadow, whatever helps users scan the map faster.

There are three categories worth knowing.

Image-based markers are PNG or SVG files dropped onto the map at specific coordinates.

Simple, universal, supported everywhere. The tradeoff is that PNG doesn’t scale crisply on retina displays unless you’re using SVG, and color changes mean re-exporting.

Symbol or icon markers are vector shapes drawn by the mapping library itself, styled with code.

Crisp at any zoom level, easy to recolor on the fly. Native to libraries like Mapbox GL and Leaflet (via plugins).

HTML markers use a full HTML element as a marker. Useful for clusters, info badges, and animated pins.

More flexible, more expensive to render at scale.

For 90% of directory and dashboard use cases, SVG image markers are the right choice. Crisp, lightweight, easy to swap colors, and works on every platform.

Why the default markers fall short

Three reasons people end up needing custom markers.

Multiple categories on one map. If your map shows restaurants, hotels, and gas stations, you need three visually distinct markers. Same shape with different icons, or same icon with different colors. Defaults give you one.

Brand consistency. A SaaS dashboard with neutral grays and a single accent color shouldn’t have a Google red pin sticking out. The marker is part of the UI.

Information density. Unless you are using a Marker Cluster extension, a map with 200 markers needs simpler, smaller markers than a map with 8. The default is sized for “moderate density” and looks wrong at both extremes.

What makes a good map marker

Years of building maps for WordPress sites taught us a few rules. None is surprising. Most existing tools ignore them anyway.

Recognizable at small sizes. Most markers display at 24 to 32 pixels. If your icon is unreadable at that size, the marker fails. Test by squinting.

High contrast against the map. Light markers on light map tiles disappear. Pick a fill color and a contrasting border so the marker reads on satellite, street, and dark themes.

One clear shape silhouette. The teardrop pin is iconic for a reason. It has a clear “tip” that points at the location. Circles, squares, and hexagons work well, but a marker without a clear anchor point can cause users to misread which point on the map it refers to.

Icon inside the marker, not next to it. Markers with the icon outside (label-style) clutter the map. Keep the meaning inside the silhouette.

Three colors maximum. Marker, icon, and one accent. Beyond that, the marker looks busy at small sizes.

The 8 marker shapes that cover 95% of use cases

We tested dozens of marker silhouettes against real GeoDirectory maps. These eight handle nearly everything.

  1. Pin (classic teardrop). The iconic Google Maps pin. The best default.
  2. Circle. Minimalist, modern. Great for dense maps.
  3. Rounded square. Material Design feel. Suits app-style UIs.
  4. Square. Sharp, technical. Suits architectural or data dashboards.
  5. Flag. Destination and finish-line vibe. Good for events and start/end points.
  6. Shield. Safety, security, official. Good for emergency services or verified listings.
  7. Hexagon. Trendy in tech and data viz. Good for modern dashboards.
  8. Speech bubble. Review and chat-like contexts. Good for testimonials or comment markers.

MapMarker Studio includes all eight as starting points.

Choosing the right icon

The icon inside the marker carries the meaning. Pick the wrong icon and even a beautifully designed marker fails. A few guidelines.

Use a single icon library across your map. Mixing Font Awesome with Lucide with custom SVGs creates visual noise. Pick one library and stick to it.

Match icon style to marker style. Outlined icons for outlined markers, filled icons for filled markers. Style consistency matters more than which library you pick.

Avoid icons with thin lines. A 1px stroke disappears at marker size. Pick icons with weights of 1.5px or higher, or libraries that offer multiple weights (Phosphor is great for this).

MapMarker Studio bundles 14 of the best icon libraries: Lucide, Phosphor, Tabler, Font Awesome, Heroicons, Material Symbols, Iconoir, Remix, Boxicons, Bootstrap Icons, Mage, Octicons, Radix, and Simple Icons (for brand logos such as Airbnb, Starbucks, and TripAdvisor).

Over 40,000 icons total. All free for commercial use.

How to add custom markers to your map

The exact code depends on your platform. Here’s how it works in the most common ones, including the part that usually trips people up.

Leaflet

const customIcon = L.icon({
  iconUrl: 'https://your-cdn.com/marker.svg',
  iconSize: [32, 40],
  iconAnchor: [16, 40],   // tip of the marker
  popupAnchor: [0, -40]
});

L.marker([40.7128, -74.0060], { icon: customIcon }).addTo(map);

The gotcha: 

iconAnchor
is the pixel offset from the top-left of the icon to the point on the map it should pin. For a teardrop pin, this is the bottom-center (the tip). Get this wrong, and your marker will point to the wrong location.

Mapbox GL JS

const el = document.createElement('div');
el.style.backgroundImage = 'url(https://your-cdn.com/marker.svg)';
el.style.width = '32px';
el.style.height = '40px';
el.style.backgroundSize = 'contain';

new mapboxgl.Marker(el)
  .setLngLat([-74.0060, 40.7128])
  .addTo(map);

The gotcha: Mapbox uses 

[lng, lat]
order, while Leaflet uses 
[lat, lng]
. Devs swap these constantly.

Google Maps

new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  icon: {
    url: 'https://your-cdn.com/marker.svg',
    scaledSize: new google.maps.Size(32, 40),
    anchor: new google.maps.Point(16, 40)
  }
});

The gotcha: Google Maps aggressively caches icon URLs. If you’re testing changes to the same SVG URL, append a 

?v=2
cache buster.

GeoDirectory

For GeoDirectory users, custom markers go in Categories → Edit Category → Default Category Icon. Upload the SVG or PNG, and GeoDirectory will use it automatically for every listing in that category.

Image URL: https://your-cdn.com/restaurant-marker.svg
Recommended size: 36×46 px

MapMarker Studio outputs a GeoDirectory-ready SVG file with the right dimensions and anchor point. Drop it in, and you’re done.

Design once, export everywhere

The reason we built MapMarker Studio is the loop above. You design a marker in Figma, export an SVG, write the Leaflet config from memory (and get the iconAnchor wrong the first time), test, fix, deploy. Then repeat for every category on your map.

The tool collapses that loop into four steps.

  1. Pick a shape (8 options).
  2. Pick an icon (40,000+ across 14 libraries).
  3. Pick colors.
  4. Copy-paste-ready code for Leaflet, Mapbox, and Google Maps. Or download SVG/PNG directly for most WOrdPress mapping and directory plugins.

Everything runs in your browser. No signup. No upload to a server. Free.

Try MapMarker Studio →

A note on file format

If you take one thing away from this guide: use SVG. PNG is acceptable as a fallback when your platform genuinely doesn’t support SVG, but that’s rare in 2026.

SVG stays sharp at every zoom level, has smaller file sizes for typical marker complexity, and supports CSS variable recoloring. PNG loses quality on retina screens unless you ship 2× and 3× variants.

The only exception is performance at extreme scale. Maps with 1,000+ simultaneous markers can paint slightly faster with PNG. For everything under that threshold, SVG is the right choice.

Wrapping up

Custom map markers are one of those tasks that look like they should take 10 minutes and end up taking two hours. Most of the friction lives in the tooling.

Every existing solution is either too restrictive, too expensive, or too generic.

We built MapMarker Studio because we’d hit this wall ourselves dozens of times across GeoDirectory installations.

It’s free, it stays free, and it works for every mapping platform we could think of.

If you find a use case it doesn’t cover, please let us know. The tool gets better when you do.

Open MapMarker Studio →