We definitely know and have seen this hamburger icon. For example, almost every day you see the icon in the upper right corner of the Google Chrome or Mozilla Firefox browser, which is a sign for the Settings menu.
hamburger menu icon
For the world of web design, we also see debates about how to use the hamburger icon well and in which position the hamburger icon is generally placed so that users don’t get confused.
This Hamburger / hamburger menu icon was first designed by Norm Cox for Xerox Star, the world’s first graphical user interface. Norm Cox is the co-founder of Cox & Hall and has been a consultant for interaction/experience design since 1982. He has also designed the icon documents for the same interface. Geoff Alday is an awesome software designer who went looking for the hamburger icon creator and managed to find this video.
hamburger menu icon history
It was created in 1990, sponsored by ACM CHI, tells the history of widgets. Source: Brad Myers on Vimeo.
From there he emailed Norm Cox, who was happy to share the origin story of 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 using Xerox Star, the hamburger icon disappeared for some time.
Hamburger Icon Revival
Newer, smaller hamburger menus, owned by smartphone interfaces, designers had to figure out how to make things fit for a screen that was only 4 inches. It’s not clear what app first used the hamburger icon on a smartphone, but what some people remember is
Voice Memos on iOS
This seems to be the oldest (outside of Xerox) to use the hamburger icon as a menu button. This happened on June 17, 2009, which is currently available on iPhone 3Gs. If you click on the menu, it will bring up a list of recordings and options.
iphone voice memo
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 app came out in 2009 and uses the hamburger icon for lists. It seems like a mere coincidence that an Apple designer uses this.
tweetie for ipad
Facebook Makes It More Trending
Facebook also seems to have been a big contributor to the spread of using the hamburger icon for menus. It started with a Grid icon like this in 2008.
And the number of rows increased with the Facebook app update in 2009
And in 2010 it became just lines, no longer in the form of a grid.
Facebook is now using a side menu for its app, this seems to be one of the most memorable first sightings of the hamburger icon.
It seems like Apple is the biggest reason for the revival of the hamburger icon. They brought the hamburger icon to their big smartphone. Apple was a fan of the Xerox idea and they started using it in the interface, from there the massive social media apps took over and others followed suit.
Currently the hamburger icon is widely used to represent the side menu / side menu on websites and applications as lists. Some of the great applications that use it are.
Path uses the hamburger menu for the navigation section.
Twitter Bootstrap and Navigation menu on the mobile version of the Starbucks website.
Here are other examples of using hamburger menus on modern websites
Example of a hamburger menu
Use of Hamburger menu
The Future of Hamburger Menu
The hamburger icon has become a staple in apps as well as on websites, and this is likely to last a very long time, and become increasingly massive in use. The hamburger menu also seems to have been warmly welcomed by the various UX / UI communities. Some say it’s a terrible thing and should be discontinued right away and replaced with a menu or with a more useful tab bar. Some hate it but some like it.
Some people also collect websites that use hamburger menus in a simple and simple way as inspiration for other designers.
So when did you first see an icon like this ?
That’s a brief history of the ha icon