Skip to content
An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels
HTML JavaScript
Branch: master
Clone or download

Latest commit

Latest commit dbf6fd7 Jul 3, 2017


Type Name Latest commit message Commit time
Failed to load latest commit information.
dist - all functions into mapIcons object to clean global namespace Jun 29, 2016
docs Docs map xsmall height Oct 7, 2015
example Example html file Oct 7, 2015
src Map icons markers Oct 7, 2015
.gitignore Ignore Mac Hidden Fiels Oct 6, 2015
CNAME CNAME Sep 30, 2015
LICENSE Update LICENSE Jan 4, 2016 Merge pull request #56 from bmauser/master Jul 3, 2017
bower.json Fix regression of bug offsetting marker icon labels #39 Dec 18, 2015
favicon.ico Favicon Oct 7, 2015
index.html Update index.html Dec 18, 2015
package.json Fix regression of bug offsetting marker icon labels #39 Dec 18, 2015

Map Icons

Map Icons is deprecated read the thread

Map Icons is an icon font for use with Google Maps API and Google Places API using SVG markers and icon labels

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.

Quick start

There are three quick start ways to download Map Icons available:



Keep track development updates by following @map_icons on Twitter.


For transparency into our release cycle and in striving to maintain backward compatibility, Map Icons is maintained under the Semantic Versioning guidelines.


Scott de Jonge


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 the fonts in the dist/font directory as well as the dist/css/map-icons.css stylesheet to use icons in markup as an icon font.

To use the icons with Google Maps include dist/js/map-icons.js


Icon class names are to be used with the map-icon class prefix.

<span class="map-icon map-icon-point-of-interest"></span>

Styling the Icon

Styles to icons can be applied with the .map-icon CSS selector.

.map-icon {

Explict styles to icons being used on a Google Map should be applied with .map-icon-label .map-icon CSS selector.

.map-icon-label .map-icon {
	font-size: 24px;
	color: #FFFFFF;
	line-height: 48px;
	text-align: center;
	white-space: nowrap;

Creating a Marker

Markers are created just like a normal Google Maps Marker, however, the class is extended for the map_icon_label property to add in markup for marker labels.

Note: You should be creating an instance of mapIcons.Marker rather than google.maps.Marker in order for the functionality added by map_icon_label to work.

var marker = new mapIcons.Marker({
	map: map,
	position: new google.maps.LatLng(-27.46577, 153.02303),
	icon: {
		path: mapIcons.shapes.SQUARE_PIN,
		fillColor: '#00CCBB',
		fillOpacity: 1,
		strokeColor: '',
		strokeWeight: 0
	map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'


Font License

Applies to font files inside: dist directory.

Map Icons licensed under SIL OFL 1.1

Code License

Applies to code inside: dist directory.

Code licensed under MIT License

Documentation License

Applies to files not a part of other licenses.

Documentation licensed under CC BY 3.0

You can’t perform that action at this time.