Enable javascript in your browser for better experience. Need to know to enable it? Go here.
Blogs Banner

Grip Icon vs. Navicon

Ever since Facebook and GMail began misusing the grip icon as a navicon, countless UI frameworks and websites have started to mix the icon metaphors as well. Here are the differences, and why it’s important to be consistent…

The difference between gripping then pulling and tapping then navigating

Grip Icon    Grip Icon

The grip icon has the affordance of gripping and pulling a UI object in a direction perpendicular to the position of the lines composing this icon (see gription). Most commonly, the grip icon provides a cue for rearranging items vertically in a list:


List Icon   

Tapping the list icon should reveal a list of actions:

Incorrect use of the grip icon

Facebook and GMail incorrectly use the grip icon. You can tap the grip icon and reveal the main menu. You can also drag the left edge of the screen with your thumb and pull to the right to reveal the main menu.

Facebook's incorrect use of the Grip Icon:

Gmail's incorrect use of the Grip Icon:

2 options to correct the usage

Tap the List Icon then navigate:

Grab the Grip Icon (rotated 90 deg) then navigate:

Consistent use of the grip icon can go a long way to teach people about touch interface paradigms. It also helps your app stand out as a polished and respectable citizen on the mobile platform.

Disclaimer: The statements and opinions expressed in this article are those of the author(s) and do not necessarily reflect the positions of Thoughtworks.

Keep up to date with our latest insights