Hamburger Icons

Need some distraction from the sometimes overwhelming news of the day? Don’t worry, we’re not preaching isolation or ignorance. Once you’re done with this post, you can return to reality and the news of the day. For now, we direct your attention to the simple hamburger.

Whether you’re a carnivore or a vegan, chances are you have a history with hamburgers. Take-out, eat-in, drive-thru, delivered to your door. We all have a relationship with the venerable burger.

One meat patty and a top and bottom bun. It’s that easy. Yes, you can add ketchup, mustard, pickles or pickle relish, lettuce, cheese of your choice, bacon (!), onions raw and caramelized, guacamole, and a bunch of other add-ons. At the famous California-based In-N-Out you can even order a “4x4.”

In-n-out 4x4 Burger

Dustin Downing/Thrillist

Yep, that’s one bun with four hamburger patties with four slices of cheese in between. [Note to cardiologists in California: they had to cap it at four because someone tried to order a 100x100. Advise your patients accordingly.]

But we like the simple things in life: one bun, one patty.

Maybe the plain hamburger inspired the hamburger icon, sometimes called the “collapsed menu icon.” Created in 1981 by designer Norm Cox for the Xerox Star computer, it was very popular for a time, then faded from a lot of memories.

Hamburger Icon - Animated - Mobile View

Around 2009, it was reborn as designers wrestled with the “simple-as-a-road-sign” graphic demands of mobile apps. Usually found in the upper left or upper right corner of a web page (or mobile app/page), it has become a wayfaring symbol that almost invites the user to click and see the expanded “menu” (whether it’s on another page, a slide-out menu, etc).

Norm Cox has said that he had to keep it simple: “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) . . .”

New Kebab Style Hamburger Icon - animated

The hamburger icon has morphed into the “kebab icon” of three stacked dots for a variation on a collapsed menu button. Using only three lines or dots, dozens and dozens of icons have been born, including some fun foodie ones like the “cake” icon.

IMAGEAlternative 'Hamburger' Menu Icon - the CAKE icon

Here at Text Connects, we need a distraction every once in a while, too. Yes, yes, yes! We love working on your projects, but . . .

So, here’s a few icons we came up with when we needed to take a break from exporting, importing, and matching 5,000 SKUs from an old website to your new one (!).

We want to take it to another level. So, Instead of very small icons, why not think big? And think colors! Think road and wayfaring signs and restaurant and retail signage. Who wouldn’t stop at a burger joint with just this sign over the front door?

Primary Hamburger Menu Icon - Example

Or a cigar bar sign like this:

Cigar Shop Hamburger Menu

Stop at the pub? Okay, we took some liberties with the angles on the next two..

IMAGECup Icon

Flip the angles and, voila, a road sign!

Road Sign Art

Time to take the stairs.

Stairs Icon

With apologies to Norm Cox, our simple icons veered quite a bit off course. Add in a little animation and these icons can become, well, icons of a higher order. Here’s what we came up with one day when we needed a big distraction.

Still aligning with the ideals of simplicity, “squareness,” and symbolic, we hope you enjoy our foray into what we now refer to as hashtag reimagineburgericon. #reimagineburgericon

Need a break yourself? Grab a white board, and maybe a pizza, and see what you can do with a few simple lines or circles. Use color. You can be as strict as you want on whether angled lines are allowed or how thick lines can be. We can almost guarantee that you’ll become addicted to this if you play it as a group game.

Maybe your team will come up with the next iconic “hamburger”!

Follow our instagram @textconnects to see more hamburger icon ideas over the coming months!