A Brief History of the Hamburger Icon

We have all seen the hamburger icon. As a matter of fact most of us probably use it on a daily basis. It has become a staple in website and app design. I’m even looking at it now on the top right corner of Google Chrome.

Hamburguer icon on the side

Lately, there has been much debate about whether the use of the Hamburger Icon and side menus in general are really a good idea. But more people have been wondering where it came from and how it got to be so widely used.

The Creator

Cox and Hall
Source: Cox and Hall

It was designed by Norm Cox for the Xerox Star,  the world’s first graphical user interface. Norm Cox is co-founder  of Cox&Hall and has been an interaction/experience design consultant since 1982. He also happened to design the document icon for the same interface. Geoff Alday is the amazing software designer who went searching for creator of the hamburger icon and managed to find this video.

First hamburguer icon
This was made in 1990, sponsored by the ACM CHI 1990 conference, to tell the history of widgets up until then. Source: Brad Myers on Vimeo

From there he e-mailed mister Norm Cox, who was delighted to share the origin story for the hamburger icon. Here’s what he said:

Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13… can’t remember exactly).”

After the Xerox Star however, the hamburger icon disappeared for some time.

The Resurrection

With the new, much smaller, interface that smart phones had, designers had to look for a way to make everything fit onto a 4 inch screen. It is unclear what app used it first but some of the first apps that people remember using the hamburger icon are:

Voice Memos from iOS

This seems like it is the oldest occurrence (excluding Xerox) of the hamburger icon as a menu button. It came out June 17, 2009 and was available for the iPhone 3Gs. Clicking on it would bring up the list of recordings and options. Apple had already borrowed the mouse and the desktop from Xerox when it created the Macintosh, a small icon would not matter much.

hamburguer icon oldest occurence excluding xerox
Source: osxdaily.com

Tweetie for iPad

Tweetie was the first app available for Twitter, created by Loren Brichter, who happened to be working at Apple at the time. This came out in 2008 and used the hamburger icon for lists. It seems like it is no coincidence that an Apple designer used this icon.

Source: iTunes

Facebook makes it a trend

Facebook seems to have also been a huge contributor in spreading the use of the hamburger icon for menus. It started out with this grid icon in 2008.

Source: The Full Signal

It later added a row to the grid in 2009

facebook hamburguer icon
Source: Arstechnica

And lastly in 2010 that grid became bars.

Source: Apk Dad

Facebook was already using the side menu and all they did was connect that grid. This seems to be one of the most remembered first sightings of the hamburger icon.

It looks like Apple was the biggest reason for the resurgence of the hamburger icon. They brought up the smart phone and the need for a compact display. They were already fans of Xerox’s ideas and they began using it on their interface. From there, huge social media apps took it over and everyone else followed along.

Currently it is being used to represent side menus on websites and apps as well as lists. A few of the largest apps that use it are:

Reeder

Reeder uses the icon to get to your subscription lists.

reeder hamburguer icon

Path

Path was also one of the first adopters of the hamburger icon and still uses it now to show navigation.

path hamburguer icon introduction

 

You can also find it on Twitters Bootstrap and Starbucks for navigation.

twitter first hamburguer icon

 

It has been popping up in the majority of apps and has become the industry standard to show additional options.

industry standard icon
Source: lmjabreu.com

Websites recently began adopting it as well. The hidden menu works well for minimalist designs and has because extremely popular among designer websites.

web hamburguer icon
Source: http://kirichik.com/

And here is one from a construction companies website.

 

construction company web sample
Source: Siena Construction

The Future

The hamburger icon has become a staple in both web and app design and it doesn’t seem like it will be going anywhere anytime soon. It has made its comeback and it seems to be here to stay. The hamburger icon has gotten quite a bit of heat from the UX/UI design community. Some people say it is a terrible thing that must be stopped now and be replaced simply with a menu or with a handy tab bar. Some hate and some love it.

Others have compiled lists of websites that use the hamburger icon for wonderful simple designs.  So, is it really more of a matter of how and when it is used?

Aggressive hamburguer eating the world
Source: Techcrunch

Where did you first see the ☰ ?

Let us know in the comments below.