Toggle menu
OSM IconsIcons
Browse 169 free OSM Icons SVG icons. Download SVG, copy as JSX, PNG or Base64. CC0 1.0 licensed. Designed by GMGeo.
Copy & download OSM Icons icons
Click any icon above to open the detail panel. Four export formats are available instantly, no sign-up required.
Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.
React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.
Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.
Inline data URI, embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.
Works with shadcn/ui
Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, installand use via @iconify/react, fully tree-shakeable, no icon font loading required.
About OSM Icons
Osmic is a public domain (CC0 1.0) set of 169 map icons from GMGeo, and a large part of the icons in the OpenStreetMap standard map style (openstreetmap-carto) come from it. It is also used in Overpass Turbo and JOSM map styles. Icons are flat, single color and pixel-aligned, drawn on a 14px canvas, with smaller 10px versions for some symbols; the size is part of the name, as in pub-14, atm-14 or cattle-grid-10. Coverage is built around points of interest: post offices, pubs and beer gardens, castles and fortresses, places of worship and religious variants, hunting stands, wilderness huts, charging stations and ATMs. The source project includes an export script that can recolor icons and add halos or shields, and an icon font under SIL OFL. There is no npm package; copy or download SVGs from this page. Search all Osmic icons, copy SVG or download PNG. Compared with Pinhead, Osmic is smaller but matches the standard OpenStreetMap look exactly. Ideal for OSM-styled web maps, map style projects and GIS work that needs familiar OpenStreetMap symbols.
Created By
License
How to use OSM Icons icons
License SPDX
CC0-1.0
Sample Icons
post-office-14, elevator-14, pub-14
Via Iconify · React
import { Icon } from '@iconify/react';
export default function App() {
return <Icon icon="osmic:icon-name" width={24} />;
}Via Iconify · HTML
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="osmic:icon-name" width="24"></iconify-icon>Compare OSM Icons with similar icon packs
Frequently Asked Questions
Where are Osmic icons used?
What do the -14 and -10 suffixes mean?
pub-14, atm-14), and some have a smaller 10px version (cattle-grid-10) for tight map zoom levels.