Revisiting the iconography of Apple Maps

A few years ago we published a post examining the point of interest (POI) icons within Apple Maps titled More Than You Ever Wanted to Know About Apple’s Spotlight Location Icons. POI icons have existed in Apple Maps since Google was the maps provider. But with iOS 6, Apple took full ownership of Maps and introduced a selectable, color-coded POI system with all new iconography.

We took particular notice of the icons included with iOS 8 when Apple began using larger versions of these icons at the system level as part of their new Spotlight search feature. Apple has continued to iterate on these icons and has made several additions and refinements. With iOS 10 for example, Apple redesigned the Maps app to use the larger POI icon set directly on the map itself. This post will examine how the system has grown and evolved over the past few years.

Why go to the trouble?

Gotta catch ‘em all!

We’re also hyperaware of the fleeting nature of our work. Because of this, creating some sort of documentation/historical archive for this icon set interested us. One of the rewards of our field is that our work has the potential to reach a mass audience. The trade-off however is that the shelf life for our work is often exceedingly small.

On the print side, design work is quickly discarded, forgotten and lost to decay. Little of a designer’s work is sacred. Highlighting this fact, take something as culturally significant as the Olympic games. Ben Hulse and Greg Durrell of design firm Hulse & Durrell travelled the world researching Olympic branding for past games — pouring over old artifacts and when available, graphics standards manuals — in an attempt to create as historically accurate and authentic a representation as possible of past games for the Olympic Heritage Collection. In the process they painstakingly digitally recreated emblems, mascots, and pictograms for past games, many of which had previously been recreated inaccurately and were being used incorrectly.

Tokyo 1964 Summer Olympics logo

You might think that in the digital world it would be easier to keep track of and archive past work. Unfortunately with digital work, archiving in a way that the work can be experienced as originally intended is often even more challenging. With print, there is a physical artifact at the end of the process that is given a fighting chance at survival. However, with digital work like websites — and especially software such as the mobile applications we develop at Mercury — once a software update is pushed live or hardware becomes obsolete, previous versions all but fade away. Apps that we created just a few short years ago have long since had their backend services disabled and no longer run on newer hardware. These applications live on now only through screenshots and the occasional video.

The ephemeral nature of software can be disheartening at times. It is not unusual to see designers repeating mistakes made in similar applications that are no longer around to actively reference. In this instance, since Apple hasn’t collected these icons and presented them in a way that they can be viewed and considered as a collection, we did.

History

Apple’s icon set references almost half of the AIGA Symbol Signs in the POI system. Most of the icons are almost one-to-one, with the most signifiant changes being a Ferry with more windows and less waves, the removal of the sash and passport perspective for Immigration, and a less crowded Elevator.

Comparison of AIGA Symbol Sign iconography and Apple’s POI icons

If you are interested in learning more about the history of the AIGA Symbol Signs, Atlas Obscura wrote about the symbols in detail in 2015, noting that the original nursery symbol (a baby bottle) drew complaints from nursing mothers, prompting a change to the “Helvetica Baby” symbol in 1979.

Helvetica Baby

Additions

iOS 9 category additions (from left to right), Row 1: Bank: Pound, Car Wash, Community Centers, Community Services, Electronics, Fashion, Food, Fun Row 2: Health, Home Decor, Home Services, Hospitals: Islamic, Hospitals: Jewish, Hospitals: China, Hospitals: Nanjing China, Juice Bars & Smoothies Row 3: Landmarks, Motorcycle Repair, Music & Drama, Nightlife, Parks & Rec, Popular, Professional Sports Teams, Ramen Row 4: Real Estate, Recreation Center, Schools: Japan, Services, Surfing, Transportation, Venues & Events Row 5: Urgent Care, Wetlands, Wine Bars, Yoga, Zoos: Bejing
iOS 10 category additions (from left to right), Row 1: ATM, Bar & Lounge: Brazil, Bento Box, Bike Rental, Curry, EV Chargers, Flyover, Home Row 2: Horseback Riding, Izakaya, Marked Location, Parking Location, Pizza, Restrooms, Sushi Bars, Work Row 3: Yakiniku
iOS 11 category additions (from left to right): Airplane Departure, Bank: Shekel, Bank: Won, Driving School, Eyeglasses, Jewelry, Shoe Store
iOS 12 category additions (from left to right), Row 1: Baggage Cart, Baggage Claim, Bank: Rupee, Beauty Supplies, Bike Sharing, Book Store, Cable Cars, Check-in Row 2: Elevator, Escalator, Immigration, Information, Internet Cafe, Lost & Found, Moving Sidewalk, Eye Doctor Row 3: Playground, Pretzel, Public Transportation, Men’s Restrooms, Women’s Restrooms, Security Checkpoint, Stairs, Taxi Row 4: Temple: China, Toys, Watch Store

Consolidations

To be clear, I’m not referring to localized icon changes like Banks, Hospitals, Military Facilities, Police Stations, Post Offices or Japan’s localized set that also includes special icons to represent Castles, Schools, and more. As noted in our previous post, there is even a special Zoo icon in China that uses a panda—considered internationally as the national symbol for the country—instead of an elephant. And in Brazil, the Bars and Lounges Martini icon is replaced with a Caipirinha, their national cocktail. The remaining duplicate icons are mundane color variations.

Localized icons for Banks, Fire Departments, Military Bases, Police Departments, Hospitals, and Post Offices
China’s Zoo indicator is a panda instead of the elephant used everywhere else
Brazil uses a representation of a Caipirinha for Bars & Lounges instead of a Martini
But why?
Why do we need two colors for Landmarks, Parking, and Restrooms?

Many of the icons that were consolidated in iOS 9 were beta explorations of search category quick links that were eventually adjusted to use existing icons.

Early iOS 9 beta search quick links (left) and the final iOS 9 icon set (right)
iOS 9 category consolidations (from left to right), Row 1: Food (replaced by Dining & Restaurants), Fun (replaced by Cinemas & Movie Theaters), Hospitals: Japan (replaced by Hospitals & Urgent Care) Row 2: Landmarks: Purple (replaced by Landmarks), Music & Drama (replaced by Music Venue), Services (replaced by Banks & Credit Unions) Row 3: Transportation (replaced by Gas Stations & Service Stations), Travel (replaced by Landmarks)
iOS 10 category consolidations (from left to right): Hospitals: China (replaced by Hospitals: Nanjing, China), Urgent Care (replaced by Medical Centers)
iOS 11 category consolidations (from left to right), Row 1: Campgrounds (replaced by Campgrounds), Castles (replaced by Castles), Landmarks: Green (replaced by Landmarks) Row 2: Landmarks: Japan (replaced by Landmarks)

Subtractions

iOS 10 category subtractions: Generic
iOS 11 category consolidations (from left to right), Row 1: City Halls: Japan, Community Services, Electronics, Mountains, Real Estate, Recreation Centers, Resorts, Shinkansen Stations: Japan Row 2: Travel Services, Ward Offices: Japan
iOS 12 category subtractions (from left to right): Heliports, Toll Gates
Pour one out for the fallen.

Revisions

iOS 8 icons (top row) compared to their iOS 12 counterparts (from left to right): Amusement Parks, Art Galleries, Bars, Campgrounds, Convenience Stores, Dentists, Dining & Restaurants, Zoos
iOS 8 icons (top row) compared to their iOS 12 counterparts (from left to right): Boating & Sailing, Bowling, Ferries
Icons which saw multiple revisions from iOS 8 to iOS 10 (from left to right): Aquariums, Bakeries, Castles, Pet Stores, Ski Resorts, Toll Gates

Though we can critique the icons as designers and communicators, we are not iconographers ourselves. To get an expert’s take, we turned to Scott Dunlap to share his thoughts. In comparing the iOS 9 set to some of the revisions seen in iOS 10 and up Scott said:

“The old versions were fine, but many of the new icons reduce ambiguity or are stylistically stronger. For instance, at small sizes the Toll Gate icon could be mistaken for a gas pump. The Ski Resort icon’s meaning was slightly ambiguous. Did it signify skiing, or that a ski lift is present? And the Pet Store icon’s simplification fits better with the other icons in the set.

iOS 9 icons (top row) compared to their iOS 10 counterparts (from left to right): Toll Gates, Ski Resorts, Pet Stores

I’d say the set’s biggest shortcoming is the decreased legibility when used at small sizes. As they get smaller many of the icons don’t hold up as well as they could, and should have simplified, bolder versions. Apple does supply different size variations, but for the most part they are very similar to their larger counterparts with minimal changes.”

Examples of small icon usage on the map and in the search field

Scott’s Pixi icon set, a simplified set of almost 600 icons, is a good example of the level of simplification Apple should aspire to for smaller sizes.

Apple’s small icons in search results (left) contrasted with icons from Scott Dunlap’s Pixi collection (right)

Color updates and categorization

Color consolidation chart iOS 8 thru iOS 12
Color categorization chart iOS 8 thru iOS 12

New holding element shapes

Icon revisions chart iOS 8 thru iOS 12

Acknowledgements

Justin O’Beirne has written some incredibly in-depth articles examining other changes and refinements to Apple Maps and how it compares to Google Maps priorities and decision making.

And thanks to everyone who has reached out to share additional icons that we hadn’t discovered. Michael Giskin deserves special credit for the numerous icons he has made us aware of.

Examining the design, development, and business of software including mobile apps, connected devices, and emerging technologies. www.mercury.io