Why are UX & UI people so obsessed with naming components and icons after food?

I’ve been asking myself this question since last year and finally decided to write about it. I thank Pablo Stanley’s post — it was the last nail on this coffin, his doodles are freaking hilarious.

In my search for answers — I didn’t find any particular reasoning as to why this happens…but every so often, there we have it, either a new icon or component named after some sort of food or food-related object. Well, here’s that list that no one asked for 😉.

THE LIST

Name:
Bento Box (aka Grid items, aka Apps, aka Gallery, aka Waffles, aka Pepperonis, aka Box of chocolates)

Usage:
Represents a menu with grid items
Access existing apps
There is an array of options (grid format)
Can also be found in Asian restaurants
Used as a grid template to decorate your home with a bunch of frames

Do I get one single sushi bite per box?

Name:
Fries (aka Breadsticks)

Usage:
When you’re fresh out of hamburger menus
For dippin’ in mayo-ketchup

Do you want FRIES with that?

Name:
Breadcrumbs (aka Breadcrumb trail)

Usage:
Trail of links to help users figure out where they are
Found in Hansel & Gretel’s stories

Important for when you need to phone home

Name:
Chips

Usage:
Represent an input, attribute, or action
Likely a single leftover breadstick from your Olive Garden dinner

So, a single British french fry?

Name:
Döner (aka Filter, aka Sort order, aka Cake cone)

Usage:
Another variation of the hamburger menu
A group of filters
As flower pot
Potentially hold your Kebab balls

upsidedown pancake stack?

Name:
Menu (aka List, aka, Menu, aka Hamburger, aka Pancakes)

Usage:
Represent a list menu.
Likely containing a group of navigation links
Can also be vegetarian or vegan burger

First bun, then patty, followed by ketchup, mustard, pickles, extra onions, lettuce, cheese, tomatoes, and bun, in that order. One cryin’ Johnny! Up!

Name:
Alt-burger (alt. Grilled cheese)

Usage:
Because you’re trying to be “minimal”
When you’re all out meats and only have cheese

All the carbs

Name:
Options (aka Kebab, aka Overflow, aka More vert, aka Triple scoop)

Usage:
Represents a set of grouped options
Likely found on a skewer

Grilled kebabs for lunch anyone?

Name:
Lists (aka Deconstructed Spaghetti and Meatballs)

Usage:
Inside a menu to create a list structure of some sort
Icon for bullet point list
In a hipster restaurant where every dish is “deconstructed”

hmm, looks like those dots are about to race each other

Name:
More (aka More horiz, aka Meatballs, aka Donut holes)

Usage:
Yet another member of the menu family (yay)
Likely found next to some sphagetti

3 choices, 1 is poisoned, choose wisely

Name:
Snackbar

Usage:
To provide brief messages about app processes
Where snacks are at

Designated bar-area for snack consumption only

Name:
Spaghetti (aka Bacon, aka Bacon Burger, aka Hair)

Usage:
Icon for “air”
Icon for “water”
Icon for many natury stuff

excuse me, sir, I found some hairs on my plate…

Name:
Search (aka Skillet, aka Lolipop, aka Magnifying glass, aka Nancy Drew’s weapon of choice)

Usage:
Commonly represented in an input field
Also used to cook all of the above foods!

Is this where we cook all of our other food icons?

SEE THEM IN ACTION

I hope you enjoyed this tongue-in-cheek article. Let me know, did I miss any? I never thought this profession would make me so hungry all👏the👏time.

I made all of my sketches using Invision Freehand. I thought it was a pretty slick and cool online whiteboard.

READ MORE:

32 User Interface Elements For UI Designers: Your Ultimate Glossary

If you thought the hamburger was bad, the waffle icon is worse

What the difference between the 2 menu icons: 3-dots (kebab) and 3-lines (hamburger)