Menu icon

layoutinterfacealso known as hamburger, navigation, drawer, bars
Colors byColorchord

Tap an icon to copy its SVG · copies stay currentColor at 24px — the swatches only tint the preview.

When to use it

Three stacked lines: the hamburger, opener of navigation drawers. Decades of mobile use made it self-explanatory, but it still hides everything behind a tap — prefer visible tabs when you have four or fewer destinations. Heroicons names it bars-3, Tabler menu-2 for the classic drawing, and Phosphor reuses its list icon for the job; only context separates them.

Reach for the hamburger to open a navigation drawer or the primary menu, most often on mobile or in a compact header. Three stacked lines have become the learned signal for 'the nav lives here'. Keep it separate from the ellipsis, which opens a contextual set of actions for a specific item — the hamburger is site- or app-level navigation, the ellipsis is 'more actions for this thing'.

  • Reaching for More (ellipsis)? Reach for the ellipsis to reveal extra actions for a specific item rather than the app's main navigation.
  • Reaching for List? Reach for the list glyph to represent a list view, not to open a navigation menu.
Every set here is open-licensed for commercial use with no attribution required in your product — the notices their licenses do require live on our set pages. No accounts, no download walls.

Related icons