index.html

---
title: Maki | A clean point of interest icon set from Mapbox
layout: default
description: A pixel-perfect point of interest icon set for web and mobile. Open source map icons that scale as you zoom in and out.
section: maki
options: full
---
<link href='{{site.baseurl}}/www/site.css' rel='stylesheet' />
<link href='{{site.baseurl}}/www/maki-sprite.css' rel='stylesheet' />

<div id='maki-hero' class=''>
  <div class=' row12 contain'><div id='map'></div></div>

  <div class='fill-light pad8 col5 row12 pin-right' >
      <h2 class='futura'>Maki</h2>
      <h2 class='space-bottom2'>Pixel-perfect icons for web cartography</h2>
      <script type='text-template' id='count'>
        <strong><%= setcount %></strong> different symbols at <strong>3</strong> sizes each for a total of <strong><%= totalcount %></strong> icons and growing.
      </script>
      <p class='prose'>Maki is a clean point of interest icon set made for web cartography. It includes <span class='count'></span></p>
    </div>

</div>

<div class='clearfix canvas'><div class='limiter'>
  <script type='text/template' id='icon-collection'>
    <ul class='icon-set pad2 clearfix'>
      <li class='maki-icon <%= icon%>'><%=name %> icon</li>
      <li class='title-box'>
        <span class='maki-icon full <%= icon%>'></span>
        <%= title%>
        <small><%= icon %></small>
      </li>
    </ul>
  </script>
  <div id='maki-set' class='clearfix pad4'></div>
  <script type='text/template' id='search-icons'>
    <li>
      <ul class='icon-set pad2 clearfix'>
        <li class='maki-icon <%=icon %>'><%=name %> icon</li>
      </ul>
      <span class='title-box'>
        <span class='maki-icon full <%= icon%>'></span>
        <%=name %>
        <small><%= icon %></small>
      </span>
    </li>
  </script>
  <div id='search-results' class='title clearfix'>
    <div class='empty active'>No results found.</div>
    <ul id='results'></ul>
  </div>
  <div class='canvas-controls margin3 col6 contain'>
    <form id='search' class='contain'>
      <input type='text' placeholder='e.g Sports or Bank'>
    </form>
    <a href='#' id='maki-close' class='maki-close icon close round dark quiet button' title='Press ESC to close'></a>
  </div>
    <div class='download callout margin3 col6 pad4y'>
    <a class='download-button clearfix' href='https://github.com/mapbox/maki/zipball/mb-pages' class='download'>
      <div class='label col5 pad1'>
        <small>SVG & PNG</small>
        <h3 class="label-title">Download</h3>
      </div>
      <div class='details col7 pad1'>
        <span class='big-icon-download'></span>
        <small class='filename'>Maki.zip</small>
        <h3 class='label-title'>GitHub</h3>
      </div>
    </a>
  </div>
</div></div>

<div class='pad4y info clearfix fill-purple dark'><div class='limiter'>
  <div class='col5 pad4y fr prose'>
    <h2>Designed to look great at small sizes and scale up elegantly.</h2>
    <p>We designed Maki with the goal of creating an international, comprehensive, and stylistically unified point of interest icon set. In order to maximize crispness and clarity, we've made three size variations for each symbol. Use all three sizes to scale the icons with the map as you zoom in and out.</p>
  </div>
  <div class='col6 clearfix pad4y'>
    <div id='maki-icon-preview'>
      <div class='preview-screen'>
        <img style='display: block; ' class='size-24 active' src='/maki/www/images/maki-preview-24.png' alt="">
        <img style='display: none; ' class='size-18' src='/maki/www/images/maki-preview-18.png' alt="">
        <img style='display: none; ' class='size-12' src='/maki/www/images/maki-preview-12.png' alt="">
      </div>
      <ul class='clearfix'>
        <li><a href='#size-24' class='button size-24 active'><span class='maki size-24'></span>24px</a></li>
        <li><a href='#size-18' class='button size-18'><span class='maki size-18'></span>18px</a></li>
        <li><a href='#size-12' class='button size-12'><span class='maki size-12'></span>12px</a></li>
      </ul>
    </div>
  </div>
</div></div>

<div class='pad4y info clearfix fill-purple dark'><div class='limiter'>
  <div class='col6 pad4y prose'>
    <h2>Open source</h2>
    <p>We publish Maki under a permissive <a href='http://creativecommons.org/publicdomain/zero/1.0/'>CC0</a> license, so don't hesitate to fork, modify, and use Maki however you wish. Help Maki grow by contributing or creating issues in our issue tracker on GitHub.</p>
    <a href='https://github.com/mapbox/maki' class='col6 button stroke'><span class="icon reverse github"></span>GitHub</a>
  </div>
  <div class='col6 illustration-container'>
    <div class='open-source-illustration'></div>
  </div>
</div></div>

<script src='{{site.baseurl}}/www/maki.js'></script>
<script src='{{site.baseurl}}/www/site.js'></script>