# map icon

Map. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/map

- Category: Maps & places
- Use it for: map, map view, atlas
- Tags: map, atlas, navigation, route, directions
- Family: map-arrow-down, map-pinned, map-plus
- Component name: MapIcon
- Added: 2026-10-14

## Alternatives

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

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/map.svg · PNG https://gentleface.com/png/line-round/16/map.png · https://gentleface.com/png/line-round/32/map.png · https://gentleface.com/png/line-round/48/map.png
- line-soft: https://gentleface.com/svg/line-soft/16/map.svg · PNG https://gentleface.com/png/line-soft/16/map.png · https://gentleface.com/png/line-soft/32/map.png · https://gentleface.com/png/line-soft/48/map.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/map.svg · PNG https://gentleface.com/png/line-sharp/16/map.png · https://gentleface.com/png/line-sharp/32/map.png · https://gentleface.com/png/line-sharp/48/map.png
- solid-round: https://gentleface.com/svg/solid-round/16/map.svg · PNG https://gentleface.com/png/solid-round/16/map.png · https://gentleface.com/png/solid-round/32/map.png · https://gentleface.com/png/solid-round/48/map.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/map.svg · PNG https://gentleface.com/png/solid-soft/16/map.png · https://gentleface.com/png/solid-soft/32/map.png · https://gentleface.com/png/solid-soft/48/map.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/map.svg · PNG https://gentleface.com/png/solid-sharp/16/map.png · https://gentleface.com/png/solid-sharp/32/map.png · https://gentleface.com/png/solid-sharp/48/map.png

The SVG of every style: https://gentleface.com/icons/map.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```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

```tsx
// 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
<!-- Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map -->
<template>
  <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>
</template>
```

### Svelte

```svelte
<!-- Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map -->
<script>
  let props = $props();
</script>

<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>
```

### HTML img

```html
<!-- Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/map.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map. Takes the text color. */
.icon-map {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#map"/></svg>
```

### SwiftUI

```swift
// Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map
import SwiftUI

struct MapIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 8.829, y: 2.606))
        p.addCurve(to: CGPoint(x: 9.5, y: 2.764), control1: CGPoint(x: 9.04, y: 2.711), control2: CGPoint(x: 9.264, y: 2.764))
        p.addCurve(to: CGPoint(x: 10.171, y: 2.606), control1: CGPoint(x: 9.736, y: 2.764), control2: CGPoint(x: 9.96, y: 2.711))
        p.addLine(to: CGPoint(x: 11.276, y: 2.053))
        p.addCurve(to: CGPoint(x: 12.137, y: 1.854), control1: CGPoint(x: 11.547, y: 1.917), control2: CGPoint(x: 11.834, y: 1.851))
        p.addCurve(to: CGPoint(x: 13.107, y: 2.135), control1: CGPoint(x: 12.486, y: 1.858), control2: CGPoint(x: 12.81, y: 1.951))
        p.addCurve(to: CGPoint(x: 13.793, y: 2.878), control1: CGPoint(x: 13.405, y: 2.319), control2: CGPoint(x: 13.633, y: 2.567))
        p.addCurve(to: CGPoint(x: 14, y: 3.736), control1: CGPoint(x: 13.931, y: 3.147), control2: CGPoint(x: 14, y: 3.433))
        p.addLine(to: CGPoint(x: 14, y: 10.573))
        p.addCurve(to: CGPoint(x: 13.701, y: 11.624), control1: CGPoint(x: 14, y: 10.952), control2: CGPoint(x: 13.9, y: 11.302))
        p.addCurve(to: CGPoint(x: 12.894, y: 12.362), control1: CGPoint(x: 13.502, y: 11.947), control2: CGPoint(x: 13.233, y: 12.192))
        p.addLine(to: CGPoint(x: 10.618, y: 13.5))
        p.addCurve(to: CGPoint(x: 9.5, y: 13.764), control1: CGPoint(x: 10.266, y: 13.676), control2: CGPoint(x: 9.893, y: 13.764))
        p.addCurve(to: CGPoint(x: 8.382, y: 13.5), control1: CGPoint(x: 9.107, y: 13.764), control2: CGPoint(x: 8.734, y: 13.676))
        p.addLine(to: CGPoint(x: 6.171, y: 12.394))
        p.addCurve(to: CGPoint(x: 5.5, y: 12.236), control1: CGPoint(x: 5.96, y: 12.289), control2: CGPoint(x: 5.736, y: 12.236))
        p.addCurve(to: CGPoint(x: 4.829, y: 12.394), control1: CGPoint(x: 5.264, y: 12.236), control2: CGPoint(x: 5.04, y: 12.289))
        p.addLine(to: CGPoint(x: 3.724, y: 12.947))
        p.addCurve(to: CGPoint(x: 2.863, y: 13.146), control1: CGPoint(x: 3.453, y: 13.083), control2: CGPoint(x: 3.166, y: 13.149))
        p.addCurve(to: CGPoint(x: 1.893, y: 12.865), control1: CGPoint(x: 2.514, y: 13.142), control2: CGPoint(x: 2.19, y: 13.049))
        p.addCurve(to: CGPoint(x: 1.207, y: 12.122), control1: CGPoint(x: 1.595, y: 12.681), control2: CGPoint(x: 1.367, y: 12.433))
        p.addCurve(to: CGPoint(x: 1, y: 11.264), control1: CGPoint(x: 1.069, y: 11.853), control2: CGPoint(x: 1, y: 11.567))
        p.addLine(to: CGPoint(x: 1, y: 4.427))
        p.addCurve(to: CGPoint(x: 1.299, y: 3.376), control1: CGPoint(x: 1, y: 4.048), control2: CGPoint(x: 1.1, y: 3.698))
        p.addCurve(to: CGPoint(x: 2.106, y: 2.638), control1: CGPoint(x: 1.498, y: 3.053), control2: CGPoint(x: 1.767, y: 2.808))
        p.addLine(to: CGPoint(x: 4.382, y: 1.5))
        p.addCurve(to: CGPoint(x: 5.5, y: 1.236), control1: CGPoint(x: 4.734, y: 1.324), control2: CGPoint(x: 5.107, y: 1.236))
        p.addCurve(to: CGPoint(x: 6.618, y: 1.5), control1: CGPoint(x: 5.893, y: 1.236), control2: CGPoint(x: 6.266, y: 1.324))
        p.addLine(to: CGPoint(x: 8.829, y: 2.606))
        p.closeSubpath()
        p.move(to: CGPoint(x: 4.829, y: 2.394))
        p.addLine(to: CGPoint(x: 2.553, y: 3.533))
        p.addCurve(to: CGPoint(x: 2.149, y: 3.901), control1: CGPoint(x: 2.383, y: 3.617), control2: CGPoint(x: 2.249, y: 3.74))
        p.addCurve(to: CGPoint(x: 2, y: 4.427), control1: CGPoint(x: 2.05, y: 4.062), control2: CGPoint(x: 2, y: 4.238))
        p.addLine(to: CGPoint(x: 2, y: 11.264))
        p.addCurve(to: CGPoint(x: 2.097, y: 11.666), control1: CGPoint(x: 2, y: 11.406), control2: CGPoint(x: 2.032, y: 11.54))
        p.addCurve(to: CGPoint(x: 2.418, y: 12.014), control1: CGPoint(x: 2.172, y: 11.812), control2: CGPoint(x: 2.279, y: 11.928))
        p.addCurve(to: CGPoint(x: 2.873, y: 12.146), control1: CGPoint(x: 2.558, y: 12.1), control2: CGPoint(x: 2.709, y: 12.144))
        p.addCurve(to: CGPoint(x: 3.276, y: 12.053), control1: CGPoint(x: 3.015, y: 12.147), control2: CGPoint(x: 3.15, y: 12.116))
        p.addLine(to: CGPoint(x: 4.382, y: 11.5))
        p.addCurve(to: CGPoint(x: 5, y: 11.286), control1: CGPoint(x: 4.581, y: 11.4), control2: CGPoint(x: 4.787, y: 11.329))
        p.addLine(to: CGPoint(x: 5, y: 2.321))
        p.addCurve(to: CGPoint(x: 4.829, y: 2.394), control1: CGPoint(x: 4.942, y: 2.342), control2: CGPoint(x: 4.885, y: 2.366))
        p.closeSubpath()
        p.move(to: CGPoint(x: 8.829, y: 12.606))
        p.addCurve(to: CGPoint(x: 9, y: 12.679), control1: CGPoint(x: 8.885, y: 12.634), control2: CGPoint(x: 8.942, y: 12.658))
        p.addLine(to: CGPoint(x: 9, y: 3.714))
        p.addCurve(to: CGPoint(x: 8.382, y: 3.5), control1: CGPoint(x: 8.787, y: 3.671), control2: CGPoint(x: 8.581, y: 3.6))
        p.addLine(to: CGPoint(x: 6.171, y: 2.394))
        p.addCurve(to: CGPoint(x: 6, y: 2.321), control1: CGPoint(x: 6.115, y: 2.366), control2: CGPoint(x: 6.058, y: 2.342))
        p.addLine(to: CGPoint(x: 6, y: 11.286))
        p.addCurve(to: CGPoint(x: 6.618, y: 11.5), control1: CGPoint(x: 6.213, y: 11.329), control2: CGPoint(x: 6.419, y: 11.4))
        p.addLine(to: CGPoint(x: 8.829, y: 12.606))
        p.closeSubpath()
        p.move(to: CGPoint(x: 12.447, y: 11.467))
        p.addCurve(to: CGPoint(x: 12.851, y: 11.099), control1: CGPoint(x: 12.617, y: 11.383), control2: CGPoint(x: 12.751, y: 11.26))
        p.addCurve(to: CGPoint(x: 13, y: 10.573), control1: CGPoint(x: 12.95, y: 10.938), control2: CGPoint(x: 13, y: 10.762))
        p.addLine(to: CGPoint(x: 13, y: 3.736))
        p.addCurve(to: CGPoint(x: 12.903, y: 3.334), control1: CGPoint(x: 13, y: 3.594), control2: CGPoint(x: 12.968, y: 3.46))
        p.addCurve(to: CGPoint(x: 12.582, y: 2.986), control1: CGPoint(x: 12.828, y: 3.188), control2: CGPoint(x: 12.721, y: 3.072))
        p.addCurve(to: CGPoint(x: 12.127, y: 2.854), control1: CGPoint(x: 12.442, y: 2.9), control2: CGPoint(x: 12.291, y: 2.856))
        p.addCurve(to: CGPoint(x: 11.724, y: 2.947), control1: CGPoint(x: 11.985, y: 2.853), control2: CGPoint(x: 11.85, y: 2.884))
        p.addLine(to: CGPoint(x: 10.618, y: 3.5))
        p.addCurve(to: CGPoint(x: 10, y: 3.714), control1: CGPoint(x: 10.419, y: 3.6), control2: CGPoint(x: 10.213, y: 3.671))
        p.addLine(to: CGPoint(x: 10, y: 12.679))
        p.addCurve(to: CGPoint(x: 10.171, y: 12.606), control1: CGPoint(x: 10.058, y: 12.658), control2: CGPoint(x: 10.115, y: 12.634))
        p.addLine(to: CGPoint(x: 12.447, y: 11.467))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// MapIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val MapIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "map", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("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"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(MapIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_map.xml · Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="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"/>
</vector>
```

### Flutter

```dart
// Gentleface "map" (line-round), MIT. https://gentleface.com/icons/map
import 'package:flutter/widgets.dart';

class MapIcon extends StatelessWidget {
  const MapIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _MapIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _MapIconPainter extends CustomPainter {
  _MapIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(8.829, 2.606)
      ..cubicTo(9.04, 2.711, 9.264, 2.764, 9.5, 2.764)
      ..cubicTo(9.736, 2.764, 9.96, 2.711, 10.171, 2.606)
      ..lineTo(11.276, 2.053)
      ..cubicTo(11.547, 1.917, 11.834, 1.851, 12.137, 1.854)
      ..cubicTo(12.486, 1.858, 12.81, 1.951, 13.107, 2.135)
      ..cubicTo(13.405, 2.319, 13.633, 2.567, 13.793, 2.878)
      ..cubicTo(13.931, 3.147, 14, 3.433, 14, 3.736)
      ..lineTo(14, 10.573)
      ..cubicTo(14, 10.952, 13.9, 11.302, 13.701, 11.624)
      ..cubicTo(13.502, 11.947, 13.233, 12.192, 12.894, 12.362)
      ..lineTo(10.618, 13.5)
      ..cubicTo(10.266, 13.676, 9.893, 13.764, 9.5, 13.764)
      ..cubicTo(9.107, 13.764, 8.734, 13.676, 8.382, 13.5)
      ..lineTo(6.171, 12.394)
      ..cubicTo(5.96, 12.289, 5.736, 12.236, 5.5, 12.236)
      ..cubicTo(5.264, 12.236, 5.04, 12.289, 4.829, 12.394)
      ..lineTo(3.724, 12.947)
      ..cubicTo(3.453, 13.083, 3.166, 13.149, 2.863, 13.146)
      ..cubicTo(2.514, 13.142, 2.19, 13.049, 1.893, 12.865)
      ..cubicTo(1.595, 12.681, 1.367, 12.433, 1.207, 12.122)
      ..cubicTo(1.069, 11.853, 1, 11.567, 1, 11.264)
      ..lineTo(1, 4.427)
      ..cubicTo(1, 4.048, 1.1, 3.698, 1.299, 3.376)
      ..cubicTo(1.498, 3.053, 1.767, 2.808, 2.106, 2.638)
      ..lineTo(4.382, 1.5)
      ..cubicTo(4.734, 1.324, 5.107, 1.236, 5.5, 1.236)
      ..cubicTo(5.893, 1.236, 6.266, 1.324, 6.618, 1.5)
      ..lineTo(8.829, 2.606)
      ..close()
      ..moveTo(4.829, 2.394)
      ..lineTo(2.553, 3.533)
      ..cubicTo(2.383, 3.617, 2.249, 3.74, 2.149, 3.901)
      ..cubicTo(2.05, 4.062, 2, 4.238, 2, 4.427)
      ..lineTo(2, 11.264)
      ..cubicTo(2, 11.406, 2.032, 11.54, 2.097, 11.666)
      ..cubicTo(2.172, 11.812, 2.279, 11.928, 2.418, 12.014)
      ..cubicTo(2.558, 12.1, 2.709, 12.144, 2.873, 12.146)
      ..cubicTo(3.015, 12.147, 3.15, 12.116, 3.276, 12.053)
      ..lineTo(4.382, 11.5)
      ..cubicTo(4.581, 11.4, 4.787, 11.329, 5, 11.286)
      ..lineTo(5, 2.321)
      ..cubicTo(4.942, 2.342, 4.885, 2.366, 4.829, 2.394)
      ..close()
      ..moveTo(8.829, 12.606)
      ..cubicTo(8.885, 12.634, 8.942, 12.658, 9, 12.679)
      ..lineTo(9, 3.714)
      ..cubicTo(8.787, 3.671, 8.581, 3.6, 8.382, 3.5)
      ..lineTo(6.171, 2.394)
      ..cubicTo(6.115, 2.366, 6.058, 2.342, 6, 2.321)
      ..lineTo(6, 11.286)
      ..cubicTo(6.213, 11.329, 6.419, 11.4, 6.618, 11.5)
      ..lineTo(8.829, 12.606)
      ..close()
      ..moveTo(12.447, 11.467)
      ..cubicTo(12.617, 11.383, 12.751, 11.26, 12.851, 11.099)
      ..cubicTo(12.95, 10.938, 13, 10.762, 13, 10.573)
      ..lineTo(13, 3.736)
      ..cubicTo(13, 3.594, 12.968, 3.46, 12.903, 3.334)
      ..cubicTo(12.828, 3.188, 12.721, 3.072, 12.582, 2.986)
      ..cubicTo(12.442, 2.9, 12.291, 2.856, 12.127, 2.854)
      ..cubicTo(11.985, 2.853, 11.85, 2.884, 11.724, 2.947)
      ..lineTo(10.618, 3.5)
      ..cubicTo(10.419, 3.6, 10.213, 3.671, 10, 3.714)
      ..lineTo(10, 12.679)
      ..cubicTo(10.058, 12.658, 10.115, 12.634, 10.171, 12.606)
      ..lineTo(12.447, 11.467)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_MapIconPainter old) => old.color != color;
}
```