Fork me on GitHub
The icon font especially for cartographical use.
Developed for retina displays.
Download it! Use it! For free!
Download actual version 1.0.0 as font (ttf,woff,svg) or vectors (svg) or pngs. There is also CSS toolkit for simply usage. Feel free to use it everywhere! MapkeyIcons are distributed under public domain license: CC0 1.0 Universal. Icons are made by mapshakers. Icon set has 200+ icons and constantly growing. Star us on github!

How to get started?!

  1. download CSS toolkit (it contains css file and fonts) and place them in same folder.
  2. Link stylesheet in your HTML code:
     <link rel="stylesheet" type="text/css" href="MapkeyIcons.css"/>
    • use it in html like this:
       <span class='mki mki-university'></span>
    • or use class mki in element:
      <div class="mki"> &#xe035; </div>
    • or download svg/png images and you know what to do ;)
  3. More technical information on github pages

WEB development examples

Minimal usage (link CSS & create span)


<!-- minimal usage *link CSS *create span -->
<link rel="stylesheet" type="text/css" href="MapkeyIcons.css"/>
<span class='mki mki-university'></span>
              

Button with icon


<button>
   <span class='mki-intext mki-dislike'></span> dislike
</button>

<button>
   <span class='mki-intext mki-bag'></span>
</button>
              


Mapkeyicons in text


At the zoo we saw <span class='mki-intext mki-lion'></span>,
<span class='mki-intext mki-zoo'></span> and
<span class='mki-intext mki-school'></span>.
              
At the zoo we saw , and .

Using mapkeyicons without toolkit


<style>
  @font-face {
    font-family: 'MapkeyIcons';
    src: url("MapkeyIcons.eot"); /* IE9 */
    src: url("MapkeyIcons.eot?#iefix") format('embedded-opentype')
    url('MapkeyIcons.woff') format('woff'),
    url('MapkeyIcons.ttf') format('truetype'),
    url('MapkeyIcons.svg#MapkeyIcons') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  .mySpan{
    font-size: 3em;
    font-family: 'MapkeyIcons'
  }
</style>

<span class="mySpan">
  &#57400; &#57440; &#57461; &#57508; &#57444; &#xe08e;
</span>
              
     

Application in cartography

Map symbols

mapkeyicons are ready to use in map renderers such as mapnik, geoserver, etc. It is recommended to use fonts, however you can render your symbols from SVG or PNG files. We will soon provide same examples.

leaflet-mapkey-icon

Leaflet is powerfull javascript mapping library. Now you can use mapkeyicons markers. Visit leaflet-marker-icon plugin page on github for detailed information.

// Creating MapkeyIcon object
var mki = L.icon.mapkey({icon:"school",color:'#725139',background:'#f2c357',size:30}
// Append to marker:
L.marker([50,14.4],{icon:mki}).addTo(map);

ArcMap & QGIS symbol set

Stay tuned! We are preparing for you set of symbol templates that you can use in the map project.

Missing some icon? Send a request!
Don't hesitate to contact us!
Similar great projects: FontAwesome, Maki Icons.
For more information visit project on github.
Contact Form