[Home](/index.md) › [Icons](/icons.md) › Google Maps

# Google Maps

Google Maps is Google's mapping service for navigation, local search, Street View and live traffic, and Google Maps Platform APIs put maps and places in apps.

## At a glance

- **Page**: https://devicons.io/icons/google-maps/
- **Website**: https://www.google.com/maps
- **License**: https://policies.google.com/terms
- **Brand guidelines**: https://www.google.com/permissions/logos-trademarks/
- **Also known as**: Maps, Google Maps Platform, Google Maps API, Maps JavaScript API
- **Tags**: [Google](/icons/tag/google/), [Maps](/icons/tag/maps/), [Navigation](/icons/tag/navigation/), [Geospatial](/icons/tag/geospatial/), [API](/icons/tag/api/)
- **Version added**: 1.3.0

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `google-maps` | `GoogleMaps` | https://devicons.io/devicons/icons/google-maps.svg | https://devicons.io/devicons/font/google-maps.svg | `devicons devicons-google-maps` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { GoogleMaps } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { GoogleMaps } from "@dev.icons/react/mono";

<GoogleMaps size={32} alt="Google Maps logo" />
```

### Vue

```vue
<script setup>
import { GoogleMaps } from "@dev.icons/vue";
</script>

<template>
  <GoogleMaps :size="32" alt="Google Maps logo" />
</template>
```

### Svelte

```svelte
<script>
  import { GoogleMaps } from "@dev.icons/svelte";
</script>

<GoogleMaps size={32} alt="Google Maps logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/google-maps.svg" alt="Google Maps logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-google-maps"></i>
```

## About the Google Maps logo

The Google Maps logo is a location pin split into Google's four colours: blue (#4285F4 and #1A73E8), red (#EA4335), yellow (#FBBC04) and green (#34A853), with a round hole near the top. Google introduced the pin in February 2020 for the service's 15th anniversary. It replaced the folded paper map icon.

The pin reads well on light and dark backgrounds.

## When to use this logo

Use Google Maps in store locators, delivery and travel app designs, "get directions" buttons and docs for the Maps JavaScript API, Places API or Routes API. It also fits geospatial stack diagrams and mapping library comparisons. It pairs naturally with Google Cloud, Mapbox, Leaflet, OpenStreetMap and Uber.

## Related icons

- [Google AI Studio](/icons/google-ai-studio.md)
- [Google Developers](/icons/google-developers.md)
- [Mapbox](/icons/mapbox.md)
- [Google Gemini](/icons/google-gemini.md)
- [Google Data Studio](/icons/google-data-studio.md)
- [Gemini Notebook](/icons/google-notebooklm.md)
- [Google AdMob](/icons/google-admob.md)
- [Google Ads](/icons/google-ads.md)

## Browse the catalog
- Previous: [Google Home](/icons/google-home.md)
- Next: [Google Meet](/icons/google-meet.md)
- [All icons](/icons.md)