Map Icons makes Google Maps Markers dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple SVG Notation and CSS.

Made for Google

Plug in and play immediately with Google Maps and Google Places.

CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

Retina Ready

Vector icons look sharp on any display at any resolution.

Over 175 Icons and Counting

One font, lots and lots of icons to choose from.

Accessibility Icons

Icons for accessibility using an accessible web format, icon fonts.

Working on a project using Map Icons?

Share the link to your project through Twitter to be featured in the Map Icons expo section!

Icons

Icon Class Prefix

Please note the class prefix for Map Icons 2.1 has changed to map-icon-[icon-name] to avoid clashes with other icon font libraries

General

 map-icon-art-gallery
 map-icon-campground
 map-icon-bank
 map-icon-hair-care
 map-icon-gym
 map-icon-point-of-interest
 map-icon-post-box
 map-icon-post-office
 map-icon-university
 map-icon-beauty-salon
 map-icon-atm
 map-icon-rv-park
 map-icon-school
 map-icon-library
 map-icon-spa
 map-icon-route
 map-icon-postal-code
 map-icon-stadium
 map-icon-postal-code-prefix
 map-icon-museum
 map-icon-finance
 map-icon-natural-feature
 map-icon-funeral-home
 map-icon-cemetery
 map-icon-park
 map-icon-lodging

Toilets

 map-icon-female
 map-icon-male
 map-icon-unisex
 map-icon-toilet

Food

 map-icon-bakery
 map-icon-cafe
 map-icon-restaurant
 map-icon-food

Stores

 map-icon-liquor-store
 map-icon-bicycle-store
 map-icon-pet-store
 map-icon-hardware-store
 map-icon-book-store
 map-icon-furniture-store
 map-icon-department-store
 map-icon-electronics-store
 map-icon-jewelry-store
 map-icon-clothing-store
 map-icon-convenience-store
 map-icon-store
 map-icon-shopping-mall
 map-icon-movie-rental
 map-icon-grocery-or-supermarket
 map-icon-florist
 map-icon-laundry

Activities

Land Activities

 map-icon-abseiling
 map-icon-archery
 map-icon-baseball
 map-icon-bicycling
 map-icon-climbing
 map-icon-golf
 map-icon-hang-gliding
 map-icon-horse-riding
 map-icon-inline-skating
 map-icon-motobike-trail
 map-icon-playground
 map-icon-skateboarding
 map-icon-tennis
 map-icon-trail-walking
 map-icon-viewing
 map-icon-walking

Water Activities

 map-icon-boating
 map-icon-boat-ramp
 map-icon-boat-tour
 map-icon-canoe
 map-icon-diving
 map-icon-fishing
 map-icon-fishing-pier
 map-icon-fish-cleaning
 map-icon-jet-skiing
 map-icon-kayaking
 map-icon-marina
 map-icon-rafting
 map-icon-sailing
 map-icon-scuba-diving
 map-icon-surfing
 map-icon-swimming
 map-icon-waterskiing
 map-icon-whale-watching
 map-icon-wind-surfing

Winter Activities

 map-icon-chairlift
 map-icon-cross-country-skiing
 map-icon-ice-fishing
 map-icon-ice-skating
 map-icon-ski-jumping
 map-icon-skiing
 map-icon-sledding
 map-icon-snow-shoeing
 map-icon-snow
 map-icon-snowboarding
 map-icon-snowmobile

Transport

 map-icon-train-station
 map-icon-subway-station
 map-icon-bus-station
 map-icon-transit-station
 map-icon-parking
 map-icon-gas-station
 map-icon-car-rental
 map-icon-car-dealer
 map-icon-car-repair
 map-icon-car-wash
 map-icon-airport
 map-icon-taxi-stand

Health

 map-icon-health
 map-icon-dentist
 map-icon-doctor
 map-icon-hospital
 map-icon-pharmacy
 map-icon-physiotherapist
 map-icon-veterinary-care

Entertainment

 map-icon-bar
 map-icon-amusement-park
 map-icon-aquarium
 map-icon-casino
 map-icon-movie-theater
 map-icon-night-club
 map-icon-zoo
 map-icon-bowling-alley

Services

 map-icon-storage
 map-icon-electrician
 map-icon-moving-company
 map-icon-painter
 map-icon-plumber
 map-icon-roofing-contractor
 map-icon-general-contractor
 map-icon-locksmith

Business

 map-icon-insurance-agency
 map-icon-lawyer
 map-icon-real-estate-agency
 map-icon-travel-agency
 map-icon-accounting

Government

 map-icon-courthouse
 map-icon-political
 map-icon-local-government
 map-icon-embassy
 map-icon-city-hall
 map-icon-fire-station
 map-icon-police

Religious

 map-icon-place-of-worship
 map-icon-church
 map-icon-mosque
 map-icon-synagogue
 map-icon-hindu-temple

Accessibility

 map-icon-wheelchair
 map-icon-closed-captioning
 map-icon-open-captioning
 map-icon-sign-language
 map-icon-volume-control-telephone
 map-icon-low-vision-access
 map-icon-braille
 map-icon-audio-description
 map-icon-assistive-listening-system

User Interface

 map-icon-search
 map-icon-location-arrow
 map-icon-zoom-out
 map-icon-zoom-out-alt
 map-icon-zoom-in
 map-icon-zoom-in-alt
 map-icon-crosshairs
 map-icon-compass
 map-icon-expand
 map-icon-fullscreen

Marker Icons

 map-icon-map-pin
 map-icon-square-pin
 map-icon-route-pin
 map-icon-sheild
 map-icon-circle
 map-icon-square-rounded
 map-icon-square

Markers

MAP_PIN

var MAP-PIN = 'M0-165c-27.618 0-50 21.966-50 49.054C-50-88.849 0 0 0 0s50-88.849 50-115.946C50-143.034 27.605-165 0-165z';

SQUARE_PIN

var SQUARE-PIN = 'M 50 -119.876 -50 -119.876 -50 -19.876 -13.232 -19.876 0.199 0 13.63 -19.876 50 -19.876 Z';

SHEILD

var SHEILD = 'M42.8-72.919c0.663-7.855 3.029-15.066 7.2-21.675L34.002-110c-5.054 4.189-10.81 6.509-17.332 6.919 c-5.976 0.52-11.642-0.574-16.971-3.287c-5.478 2.626-11.121 3.723-17.002 3.287c-6.086-0.523-11.577-2.602-16.495-6.281 l-16.041 15.398c3.945 6.704 6.143 13.72 6.574 21.045c0.205 3.373-0.795 8.016-3.038 14.018c-1.175 3.327-2.061 6.213-2.667 8.627 c-0.562 2.394-0.911 4.34-1.027 5.801c-0.082 6.396 1.78 12.168 5.602 17.302c2.986 3.745 7.911 7.886 14.748 12.41 c7.482 3.665 13.272 6.045 17.326 7.06c1.163 0.521 2.301 1.025 3.363 1.506C-7.9-5.708-6.766-5.232-5.586-4.713 C-3.034-3.242-1.243-1.646-0.301 0C0.858-1.782 2.69-3.338 5.122-4.713c1.717-0.723 3.173-1.346 4.341-1.896 c1.167-0.494 2.037-0.865 2.54-1.09c0.866-0.414 2.002-0.888 3.376-1.41c1.386-0.527 3.101-1.168 5.144-1.882 c3.951-1.348 6.83-2.62 8.655-3.77c6.634-4.524 11.48-8.595 14.566-12.235c3.958-5.152 5.879-10.953 5.79-17.475 c-0.232-2.922-1.52-7.594-3.85-13.959C43.463-64.631 42.479-69.445 42.8-72.919z';

ROUTE

var ROUTE = 'M49.986-58.919c-0.51-27.631-16.538-38.612-17.195-39.049l-2.479-1.692l-2.5 1.689c-4.147 2.817-8.449 4.247-12.783 4.247 c-7.178 0-12.051-3.864-12.256-4.032L-0.023-100l-2.776 2.248c-0.203 0.165-5.074 4.028-12.253 4.028 c-4.331 0-8.63-1.429-12.788-4.253l-2.486-1.678l-2.504 1.692c-1.702 1.17-16.624 12.192-17.165 38.907 C-50.211-56.731-43.792-12.754-0.003 0C47.609-13.912 50.23-56.018 49.986-58.919z';

ROUNDED

var ROUNDED = 'M50-80c0-11-9-20-20-20h-60c-11 0-20 9-20 20v60c0 11 9 20 20 20h60c11 0 20-9 20-20V-80z';

Usage

Map Icons extends the Google Maps Marker Object to enable either an image or SVG marker to be used with the icon placed on top as a label.

Include

Include the fonts in the /font/ directory as well as the map-icons.css stylesheet, and the new Marker class in map-icons.js

Creating a Marker

var marker = new Marker({
	map: map,
	title: 'Map Icons',
	position: LatLng,
	zIndex: 9,
	icon: {
		path: MAP_PIN,
		fillColor: '#0E77E9',
		fillOpacity: 1,
		strokeColor: '',
		strokeWeight: 0,
		scale: 1/2
	},
	label: '<i class="map-icon-parking"></i>'
});

Styling the Icon

.marker-label,
.marker-icon {
	z-index: 99;
	position: absolute;
	display: block;
	margin-top: -50px;
	margin-left: -25px;
	width: 50px;
	height: 50px;
	font-size: 30px !important;
	text-align: center;
	color: #FFFFFF;
	white-space: nowrap;
}

License

Font License

Applies to all desktop and webfont files in the following directory: map-icon/font/

Map Icons licensed under SIL OFL 1.1

Code License

Applies to code inside: map-icons.css, map-icons.js and map-icons-min.js.

Code licensed under MIT License

Documentation License

Applies to all Map Icons project files that are not a part of the Font or Code licenses.

Documentation licensed under CC BY 3.0