Map Pin UI
What is a map pin component?
Map pin represents a specific point or location on a map. It is used to indicate a point of interest or to mark a particular destination.
They are most commonly represented by a dot icon.
Alternatively, some map pin design might showcase custom illustrations, logo, or brand.
Map pins are used in: Location-based services, Geotagging.
Examples of map pin
What is the anatomy of a map pin?
Examples of a map pin
What are the design variants of a map pin?
We studied over 1,000+ map pin UI components on Mobbin, from real-world examples and found the following variants.
1. Map pins might be represented by a dot, icon, logo, or text
Map pins can be represented by many shapes or forms.
The most common way to represent map pins are pins with a dot icon in the middle.
Examples of dot map pins
Alternatively, one can use a custom shape icon if it helps to highlight a location property better. For example, on parking apps, it is common to use a 'P' icon to represent parking spaces on a map interface.
Apps like Waze have a more complex design system for map pins - they use illustrations to indicate different points of interest on a map.
Red stacked cars icons indicate traffic jam.
Helmet icon indicates construction sites.
Police car icon indicates police cars spotted in an area.
Examples of custom shape icons as map pins
It is also common to see logos being used as map pins. In this case, a brand might showcase the real estate or stores it has throughout a certain geography. Here are some examples from Taco Bell, Sprouts, Zara, and Dunkin Donuts.
Examples of logo being used as map pins
Finally, text can also be used as a map pin if it better communicates to the end users.
Customers on hotel and traveling apps might be price conscious, and you'll see apps like Hotel Tonight, Airbnb, and Booking.com prominently feature the price of a hotel as the map pin.
Examples of text used as map pin
2. Map pins might come with labels
In some cases, map pins might come with additional labels which can add context to a certain pin.
Examples of labels in map pin
When to use map pins?
Location-based services
Apps that provide location-based services, such as food delivery apps (e.g., Uber Eats, DoorDash), ride-hailing apps (e.g., Uber, Lyft), or hotel booking apps, often use map pins to display nearby restaurants, drivers, or hotels on the map.
Users can select a pin to view details and interact with the corresponding service.
Examples of map pin in location based services
Geotagging
Apps like Instagram, Snapchat, or Facebook allow users to attach their current location to posts or images.
The map pin is used to indicate the location where the content was captured, allowing others to see the specific place on the map.
Examples of map pin used in geotagging
Conflicting UI elements: Map icon
Map pin v.s. Map icon
Map icons (e.g a car, train, etc.) are not used to point to a specific location on a map but rather to represent an object on the map that is moving.
Examples of map icon