Where to? The journey to Uber’s iconography

Vietanh Nguyen
Jun 11, 2020 · 5 min read

In early 2018, the Uber brand team started a rebranding exercise, exploring a fresh take on what it means to be a global transportation and technology company. A new logo was developed in tandem with a bespoke sans-serif typeface called Uber Move. What followed was a natural progression towards universal symbols of iconography that could scale across all products, services, and surfaces. Here’s a glimpse into the evolution and processes.

Image for post
Image for post
Our typography is as unique and easy to use as we are. Inspired by the world’s best used transportation examples, it was designed to maximize its impact across all applications while keeping it easy to read, own-able, and highly recognizable. Its name: Uber Move.” — Uber Brand Book 2018

With typography being one of the most visible parts of our identity, the next step was to figure out how to use it in our Rider and Driver apps. Almost every time we use an icon, it will be accompanied by text, reinforcing each other. It is important that they pair well.

Image for post
Image for post
We used letters such as k, g, o, etc for the icons’ building blocks.
Image for post
Image for post
Characteristics: straight lines, generous rounding, straight caps, parallel terminals.

Side by side, our types and icons reflect our original inspiration from the shape of roadway and transit signs. We developed three sets of weights for them.

Image for post
Image for post
We created 3 sets of core icons for the 3 typography weights

We iterated these core sets in order to apply to our user interfaces. A design language emerged: Simple. Having just one set would leave little room for interpretation when and where to use what icon. One icon set, for everything. We reduced three icon weights into one.

We experimented to determine that the filled version (such as the ones for the Bold weight above) worked best for glanceability. Its visual weight served well as a visual anchor. We also got rid of the Light and Bold weights. The strokes on the Medium weight gave us more pixel wiggle room in small mobile devices.

Simple

Our lines of business require icons for thousands of user scenarios. We have to redesign existing icons and design new ones in a no-nonsense way. Our ride customers and partners would not care whether we just had a rebrand or not, they need a functional user experience to move on with their lives.

Image for post
Image for post
Small visual anchors like icons made navigation instruction more scannable

To make an icon simple is not by adding details until it is unmistakably a car. An icon canvas is only 24 by 24 pixels. Its small size allows it to fit inside a button or to accompany other information to make them more scannable. Too many shapes and lines will not fit into the canvas. Therefore, every pixel we draw must be intentional and all decorations should be removed.

Image for post
Image for post
We reduced the number of details from our old icon (left)

Form follows function

Our main goal was to serve users regardless of environmental conditions. A person could hail a Uber ride while standing on a dim lit sidewalk. They could also be running down an airport escalator while looking at the screen. Aiming for clarity, we constructed our icons using basic geometry and placing points only on whole-number coordinates to avoid anti-aliasing. They must be sharp and crisp icons.

Image for post
Image for post
Icons constructed from basic shapes

No users want to learn new shapes and icons if they don’t have to. One icon should allow multiple interpretations, making it possible for other designers to reuse an icon for different purposes.

Image for post
Image for post
Our icons need to be flexible

Only after achieving the icon’s business goal, we refined its shapes to be uniform with the Uber brand. For example, our icons consistently used the 3px stroke to deliver visual weight as a set.

Image for post
Image for post
Use the 3px-thick strokes across the set

We also made a company-wide decision to shape corners and stroke terminals square. This brought our iconography and typography even closer together. We only use rounded corners on larger rounding and avoid softening shapes unless doing so makes the icon more recognizable.

Image for post
Image for post
Cap the terminals parallel to the line segment and keep the corners shape

New icon request

Oliver Lukman is the main architect of our icon library. Based in Amsterdam, he works closely with product managers and designers across Uber global offices. His process has two main steps:

  1. Break the object down to real-life parts.
  2. Find the most basic geometric shapes to draw those parts.

Take the Like icon as an example. A thumbed up hand consists of: the palm which can be a rectangle, the thumb which can be a triangle, and the remaining fingers as a trapezoid.

Here’s how these parts come together:

Image for post
Image for post
How to make a thumbs up hand

This sounds easier said than done. When a new icon designer, Vietanh Nguyen, attempted to draw a bicycle icon for the micro-mobility business, his design was immediately rejected after turning on the Show Outlines mode (Cmd+Y in Figma and Illustrator).

Image for post
Image for post
Vietanh’s icon outlines (left) resembles a dinosaur more than the frame of a bicycle.

We finalize new icon designs with all the lessons learned above:

  • The outline must speak for itself. Use the fewest shapes possible.
  • The icon must look sharp anywhere. Align vertices and lines on whole-number coordinates within the 24x24 grids.
  • A customer in hurry with 10% screen brightness can still recognize the icon. Use thick stroke as much as possible.
Image for post
Image for post
Just 4 strokes, an Uber thumbs up icon is straightforward

Iconography at Uber is constantly evolving. With so much change and cultural considerations in our business and the ride-sharing space, the evolution of our icon catalog will continue to grow with our brand and design systems.

Follow us on Uber Design.

Uber Design

We are passionate about the pursuit of ideas that put…

Vietanh Nguyen

Written by

Staff Design Engineer @ Uber Design Systems

Uber Design

We are passionate about the pursuit of ideas that put people first. Work with us: uber.com/design. Follow us on Twitter: @DesigningUber.

Vietanh Nguyen

Written by

Staff Design Engineer @ Uber Design Systems

Uber Design

We are passionate about the pursuit of ideas that put people first. Work with us: uber.com/design. Follow us on Twitter: @DesigningUber.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store