Openstreetmap icon

openmoji:openstreetmap

The Openstreetmap icon (openmoji:openstreetmap) is a free SVG icon from the OpenMoji set. It is drawn on a 72 × 72 grid. OpenMoji icons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: OpenMoji
Author: OpenMoji
License: CC-BY-SA-4.0
Size: 72 × 72
Category: Extras Openmoji

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 13l-2 5l5 2l2 9l-5 5l2 3l-3 2v1l5 7l4-2m5.5 11l1.5-3l3-2l7 4l5-1v-4l-2-2l1.5-3.5"/><g fill="#b1cc33"><path fill-rule="evenodd" d="m25 13l-13-1v12l.997 11.04L12 47v12l13 1l11-1l12 1l12-1V47l-.997-11.96L60 24V12l-12 1l-12-1z" clip-rule="evenodd"/><path d="m12 12l.077-.997A1 1 0 0 0 11 12zm13 1l-.077.997q.084.006.168-.001zM12 24h-1a1 1 0 0 0 .004.09zm.997 11.04l.996.083a1 1 0 0 0 0-.173zM12 47l-.996-.083L11 47zm0 12h-1a1 1 0 0 0 .923.997zm13 1l-.077.997q.084.006.168-.001zm11-1l.083-.996a1 1 0 0 0-.173 0zm12 1l-.083.996q.082.008.166 0zm12-1l.083.996A1 1 0 0 0 61 59zm0-12h1l-.004-.083zm-.997-11.96l-.996-.09a1 1 0 0 0 0 .173zM60 24l.996.09A1 1 0 0 0 61 24zm0-12h1a1 1 0 0 0-1.083-.996zm-12 1l-.083.996q.082.008.166 0zm-12-1l.083-.996a1 1 0 0 0-.173 0zm-24.077.997l13 1l.154-1.994l-13-1zM13 24V12h-2v12zm.993 10.95l-.997-11.04l-1.992.18l.997 11.04zm-.997 12.133l.997-11.96L12 34.957l-.996 11.96zM13 59V47h-2v12zm12.077.003l-13-1l-.154 1.994l13 1zm10.833-.999l-11 1l.18 1.992l11-1zm12.173 1l-12-1l-.166 1.992l12 1zm11.834-1l-12 1l.166 1.992l12-1zM59 47v12h2V47zm-.993-11.877l.997 11.96l1.992-.166L60 34.957zm.997-11.213l-.997 11.04l1.992.18l.997-11.04zM59 12v12h2V12zm-10.917 1.996l12-1l-.166-1.992l-12 1zm-12.166-1l12 1l.166-1.992l-12-1zm-10.827 1l11-1l-.18-1.992l-11 1z"/></g><path fill="none" stroke="#ea5a47" stroke-linejoin="round" stroke-width="2" d="m21 13l-2 5l5 2l2 9l-5 5l2 3l-3 2v1l5 7l4-2l4 6l-2 6l2 2l3-6l3-2l7 4l5-1v-4l-2-2l3-7l8-1"/><path fill="#5c9e31" fill-rule="evenodd" d="M16 49a3 3 0 1 0-3-3v8a5 5 0 0 0-1 1v4h8.9q.1-.485.1-1a5 5 0 0 0-5-5a2 2 0 1 1 0-4m41.25 4.9a2.55 2.55 0 1 0 2.55 2.55v-6.8c.322-.241.608-.528.85-.85v-5.1a4.25 4.25 0 1 0-3.4 6.8a1.7 1.7 0 1 1 0 3.4" clip-rule="evenodd"/><path fill="#92d3f5" fill-rule="evenodd" d="M48.868 39.867Q47.952 40 47 40c-7.18 0-13-5.82-13-13q0-.952.133-1.867A11 11 0 0 0 28 35c0 6.075 4.925 11 11 11a11 11 0 0 0 9.868-6.133" clip-rule="evenodd"/><path fill="#5c9e31" fill-rule="evenodd" d="M31.5 19a4.5 4.5 0 0 0 3.742-7h-7.484a4.5 4.5 0 0 0 3.742 7" clip-rule="evenodd"/><path fill="#b1cc33" d="M56.707 33.425c3.317-5.199 1.791-12.102-3.407-15.419s-12.1-1.792-15.418 3.407s-1.792 12.101 3.406 15.418s12.102 1.792 15.419-3.406"/><path fill="#92d3f5" fill-rule="evenodd" d="M50.973 14.618A7 7 0 0 1 44 21a4 4 0 0 0 0 8a7 7 0 0 1 5.968 10.66c-.953.222-1.947.34-2.968.34c-4.02 0-7.615-1.825-10-4.693V18.693A12.97 12.97 0 0 1 47 14c1.386 0 2.72.217 3.973.618" clip-rule="evenodd"/><path fill="#5c9e31" d="M56.764 33.79c1.46-2.29 2.284-6.515 1.698-9.167c-.401-1.817-2.655-3.84-3.899-5.159c.649 2.354 1.039 7.35-2.185 11.972c-2.736 3.92-6.69 5.635-8.948 6.057c4.25 1.283 10.831.218 13.334-3.703"/><path fill="#61b2e4" fill-rule="evenodd" d="M50.569 33.575a7.03 7.03 0 0 1 .253 4.001c-2.509.614-5.247.565-7.392-.083c1.795-.336 4.663-1.488 7.139-3.918" clip-rule="evenodd"/><path fill="#d0cfce" d="M55.101 15.185a14.43 14.43 0 0 0-10.937-1.937a14.42 14.42 0 0 0-9.104 6.365c-4.304 6.746-2.318 15.737 4.428 20.041c6.745 4.305 15.735 2.32 20.042-4.427a14.42 14.42 0 0 0 1.936-10.937a14.42 14.42 0 0 0-6.365-9.105m1.836 18.388c-2.178 3.415-5.881 5.281-9.66 5.281a11.36 11.36 0 0 1-6.135-1.792c-5.317-3.393-6.882-10.48-3.49-15.795a11.36 11.36 0 0 1 7.176-5.016a11.36 11.36 0 0 1 8.62 1.527a11.36 11.36 0 0 1 5.016 7.174a11.36 11.36 0 0 1-1.527 8.621"/><path fill="#3f3f3f" d="m34.767 41.21l-6.918 10.334l-3.711 5.816c-.478.75.38 3.21 1.13 3.688c.36.23 2.532.011 2.532.011l11.524-17.192z"/><path fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2" d="M42.5 21H52m-12 3h13m-14 3h13"/><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-miterlimit="10" d="M59.537 35.067c4.307-6.568 2.327-15.289-4.423-19.48c-6.75-4.19-15.712-2.263-20.02 4.304c-4.306 6.568-2.325 15.289 4.424 19.48c6.75 4.19 15.712 2.263 20.02-4.304"/><path stroke-miterlimit="10" d="M56.639 33.267c3.285-5.01 1.774-11.663-3.374-14.86c-5.15-3.196-11.986-1.726-15.272 3.284S36.22 33.353 41.368 36.55c5.15 3.197 11.986 1.727 15.272-3.283m-21.863 8.177l4.364 2.709l-10.396 15.853c-.743 1.133-2.322 1.444-3.526.696c-1.205-.748-1.58-2.272-.838-3.405z"/><path d="M40 12.333L36 12l-11 1l-13-1v12l.997 11.04L12 47v12l9 .692m33.266-47.214L60 12v4.5m-.625 23L60 47v12l-12 1l-12-1l-3.5.318"/></g></svg>

How to use the Openstreetmap icon

React

import { Icon } from "@iconify/react";

<Icon icon="openmoji:openstreetmap" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="openmoji:openstreetmap" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="openmoji:openstreetmap" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[openmoji--openstreetmap]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/openmoji -->
<div class="i-openmoji:openstreetmap"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="openmoji:openstreetmap"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/openmoji/openstreetmap.svg" alt="Openstreetmap icon" width="24" height="24">

Openstreetmap icon in other icon sets

Openstreetmap icon FAQ

Is the Openstreetmap icon free for commercial use?

Yes. OpenMoji icons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license.

How do I use the Openstreetmap icon in React?

Install @iconify/react and render <Icon icon="openmoji:openstreetmap" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Openstreetmap icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/openmoji/openstreetmap.svg" alt="Openstreetmap icon">, or paste the SVG code inline to style it with CSS.

Browse all OpenMoji icons →