map icon

Map: map, map view, atlas. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.829 2.606C9.04 2.711 9.264 2.764 9.5 2.764C9.736 2.764 9.96 2.711 10.171 2.606L11.276 2.053C11.547 1.917 11.834 1.851 12.137 1.854C12.486 1.858 12.81 1.951 13.107 2.135C13.405 2.319 13.633 2.567 13.793 2.878C13.931 3.147 14 3.433 14 3.736L14 10.573C14 10.952 13.9 11.302 13.701 11.624C13.502 11.947 13.233 12.192 12.894 12.362L10.618 13.5C10.266 13.676 9.893 13.764 9.5 13.764C9.107 13.764 8.734 13.676 8.382 13.5L6.171 12.394C5.96 12.289 5.736 12.236 5.5 12.236C5.264 12.236 5.04 12.289 4.829 12.394L3.724 12.947C3.453 13.083 3.166 13.149 2.863 13.146C2.514 13.142 2.19 13.049 1.893 12.865C1.595 12.681 1.367 12.433 1.207 12.122C1.069 11.853 1 11.567 1 11.264L1 4.427C1 4.048 1.1 3.698 1.299 3.376C1.498 3.053 1.767 2.808 2.106 2.638L4.382 1.5C4.734 1.324 5.107 1.236 5.5 1.236C5.893 1.236 6.266 1.324 6.618 1.5L8.829 2.606ZM4.829 2.394L2.553 3.533C2.383 3.617 2.249 3.74 2.149 3.901C2.05 4.062 2 4.238 2 4.427L2 11.264C2 11.406 2.032 11.54 2.097 11.666C2.172 11.812 2.279 11.928 2.418 12.014C2.558 12.1 2.709 12.144 2.873 12.146C3.015 12.147 3.15 12.116 3.276 12.053L4.382 11.5C4.581 11.4 4.787 11.329 5 11.286L5 2.321C4.942 2.342 4.885 2.366 4.829 2.394ZM8.829 12.606C8.885 12.634 8.942 12.658 9 12.679L9 3.714C8.787 3.671 8.581 3.6 8.382 3.5L6.171 2.394C6.115 2.366 6.058 2.342 6 2.321L6 11.286C6.213 11.329 6.419 11.4 6.618 11.5L8.829 12.606ZM12.447 11.467C12.617 11.383 12.751 11.26 12.851 11.099C12.95 10.938 13 10.762 13 10.573L13 3.736C13 3.594 12.968 3.46 12.903 3.334C12.828 3.188 12.721 3.072 12.582 2.986C12.442 2.9 12.291 2.856 12.127 2.854C11.985 2.853 11.85 2.884 11.724 2.947L10.618 3.5C10.419 3.6 10.213 3.671 10 3.714L10 12.679C10.058 12.658 10.115 12.634 10.171 12.606L12.447 11.467Z"/></svg>

React

// Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map
import type { SVGProps } from 'react';

export function MapIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M8.829 2.606C9.04 2.711 9.264 2.764 9.5 2.764C9.736 2.764 9.96 2.711 10.171 2.606L11.276 2.053C11.547 1.917 11.834 1.851 12.137 1.854C12.486 1.858 12.81 1.951 13.107 2.135C13.405 2.319 13.633 2.567 13.793 2.878C13.931 3.147 14 3.433 14 3.736L14 10.573C14 10.952 13.9 11.302 13.701 11.624C13.502 11.947 13.233 12.192 12.894 12.362L10.618 13.5C10.266 13.676 9.893 13.764 9.5 13.764C9.107 13.764 8.734 13.676 8.382 13.5L6.171 12.394C5.96 12.289 5.736 12.236 5.5 12.236C5.264 12.236 5.04 12.289 4.829 12.394L3.724 12.947C3.453 13.083 3.166 13.149 2.863 13.146C2.514 13.142 2.19 13.049 1.893 12.865C1.595 12.681 1.367 12.433 1.207 12.122C1.069 11.853 1 11.567 1 11.264L1 4.427C1 4.048 1.1 3.698 1.299 3.376C1.498 3.053 1.767 2.808 2.106 2.638L4.382 1.5C4.734 1.324 5.107 1.236 5.5 1.236C5.893 1.236 6.266 1.324 6.618 1.5L8.829 2.606ZM4.829 2.394L2.553 3.533C2.383 3.617 2.249 3.74 2.149 3.901C2.05 4.062 2 4.238 2 4.427L2 11.264C2 11.406 2.032 11.54 2.097 11.666C2.172 11.812 2.279 11.928 2.418 12.014C2.558 12.1 2.709 12.144 2.873 12.146C3.015 12.147 3.15 12.116 3.276 12.053L4.382 11.5C4.581 11.4 4.787 11.329 5 11.286L5 2.321C4.942 2.342 4.885 2.366 4.829 2.394ZM8.829 12.606C8.885 12.634 8.942 12.658 9 12.679L9 3.714C8.787 3.671 8.581 3.6 8.382 3.5L6.171 2.394C6.115 2.366 6.058 2.342 6 2.321L6 11.286C6.213 11.329 6.419 11.4 6.618 11.5L8.829 12.606ZM12.447 11.467C12.617 11.383 12.751 11.26 12.851 11.099C12.95 10.938 13 10.762 13 10.573L13 3.736C13 3.594 12.968 3.46 12.903 3.334C12.828 3.188 12.721 3.072 12.582 2.986C12.442 2.9 12.291 2.856 12.127 2.854C11.985 2.853 11.85 2.884 11.724 2.947L10.618 3.5C10.419 3.6 10.213 3.671 10 3.714L10 12.679C10.058 12.658 10.115 12.634 10.171 12.606L12.447 11.467Z" />
    </svg>
  );
}

Vue

Vue: see /icons/map.md

Svelte

Svelte: see /icons/map.md

HTML img

HTML img: see /icons/map.md

CSS

CSS: see /icons/map.md

Data URL

Data URL: see /icons/map.md

Sprite

Sprite: see /icons/map.md

SwiftUI

SwiftUI: see /icons/map.md

Compose

Compose: see /icons/map.md

Android XML

Android XML: see /icons/map.md

Flutter

Flutter: see /icons/map.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

map, map view, atlas

Alternatives

map-pinned: show a place on the map
globe: the world or the web

Tags

map, atlas, navigation, route, directions

Category

Maps & places

Component name

MapIcon

History

2026-10-14 added

Family 3

map-arrow-down map-pinned map-plus

More maps & places icons

binoculars bridge compass crosshair flag flag-check flag-clock flag-off flag-plus flag-swallowtail footprints globe globe-arrow-up globe-check globe-gear globe-lock · all maps & places icons

For agents

Metadata: /icons/map.json · Markdown: /icons/map.md · SVG: https://gentleface.com/svg/{style}/16/map.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/map.png

map icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp