Post thumbnail: 27 CSS Hamburger Menu Icons

27 CSS Hamburger Menu Icons

Free HTML and CSS hamburger menu icons. Update of September 2017 collection. 7 new items.

Demo image: Hamburger Icons Animations

Author

  • Ahmad Emran

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Hamburger Icons Animations

CSS hamburger icons with great hover states and animations.

Demo image: Flipping Menu Toggle

Author

  • Ryan Mulligan

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript

About the code

Flipping Menu Toggle

What the flip is this? Not ideal for production but here's a fun menu toggle experiment with CSS animations.

Demo image: Cool Hamburger Toggle Effect

Author

  • Kriszta

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Cool Hamburger Toggle Effect

Creative hamburger toggle effect.

Demo image: Hamburger Button

Author

  • Rodrigo Sousa

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Button

Sexy hamburger button.

Demo Image: Hamburger Open Animation

Author

  • Sarath AR
  • 23.08.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Open Animation

HTML, CSS and JS hamburger open animation.

Demo Image: SVG Menu Animation

Author

  • thelaazyguy
  • 01.08.2017

Made with

  • HTML
  • CSS
  • JavaScript
  • SVG

About the code

SVG Menu Animation

Hamburger menu animtion with svg element.

Demo Image: Hamburger Icon Animation

Author

  • Ajay
  • 29.06.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Icon Animation

Simple CSS hamburger icon animation with little jQuery.

Demo image: Menu Animation

Author

  • Valery Alikin

Made with

  • HTML
  • CSS/Less
  • JavaScript (jquery.js)

About the code

Menu Animation

Hamburger menu animation.

Demo Image: Hamburger Menu Button

Author

  • Jose Rosario
  • 29.03.2017

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Hamburger Menu Button

HTML, CSS and JavaScript hamburger menu button.

Demo Image: 3D Hamburger Transformicon

Author

  • Bennett Feely
  • 13.03.2017

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

3D Hamburger Transformicon

3D hamburger transformation with HTML, CSS and JS.

Demo Image: Click Me! Hamburger Menu
Demo Image: Click Me! Hamburger Menu

Click Me! Hamburger Menu

Original shot https://dribbble.com/shots/3323188-Experimental-Hamburger-Menue
Made by Alexandr Izumenko
March 2, 2017

Demo image: Half Second Hamburger Helper

Author

  • Kurt Petrek

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Half Second Hamburger Helper

A showcase of hamburger menus.

Demo Image: Hamburger Icon Animations
Demo Image: Hamburger Icon Animations

Hamburger Icon Animations

12 hamburger icon animations.
Made by Rosa
November 6, 2016

Demo Image: Atomic Hamburger Menu CSS
Demo Image: Atomic Hamburger Menu CSS

Atomic Hamburger Menu CSS

HTML and CSS atomic hamburger menu.
Made by Alex Coven
October 10, 2016

Demo Image: Hamburger Icon Animations
Demo Image: Hamburger Icon Animations

Hamburger Icon Animations

Hamburger icon animations in HTML, CSS and JavaScript.
Made by Carlos
August 13, 2016

Demo Image: Animated Burger/Menu Icon
Demo Image: Animated Burger/Menu Icon

Animated Burger/Menu Icon

HTML, CSS and JavaScript animated burger/menu icon.
Made by Nicholas M. Smith
July 31, 2016

Demo Image: Hamburger Menu Elastic
Demo Image: Hamburger Menu Elastic

Hamburger Menu Elastic

Hamburger menu elastic with HTML, CSS and JavaScript.
Made by Davide Cantelli
July 6, 2016

Demo Image: 20 Menu Buttons To Hamburger
Demo Image: 20 Menu Buttons To Hamburger

20 Menu Buttons To Hamburger

Menu button to hamburger. Styled & animated with pure CSS.
Made by Yinxi Chen
June 5, 2016

Demo Image: Animated Menu Icon
Demo Image: Animated Menu Icon

Animated Menu Icon

Animated menu icon toggling between hamburger for open and X for exit.
Made by Eric Grucza
May 27, 2016

Demo Image: Simple Navbar Toggle To X (Vanilla JS)
Demo Image: Simple Navbar Toggle To X (Vanilla JS)

Simple Navbar Toggle To X (Vanilla JS)

A simple CSS and JS solution to make a standard Navbar “hamburger” into an X on click, and then back to a hamburger when clicked. Requires no dependencies, written with vanilla JS.
Made by Joseph Gengarella
April 3, 2016

Demo Image: Menu Icon Animation
Demo Image: Menu Icon Animation

Menu Icon Animation

Menu icon animation with HTML, CSS and JavaScript.
Made by Marius Balaj
March 23, 2016

Demo image: Hamburger Icon Animation To Cross Underline With CSS

Author

  • Ricardo Prieto

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Icon Animation To Cross Underline With CSS

"We animate the hamburger icon, which gives access to the responsive menu using transformations and CSS pseudo elements along with HTML, and turning the element into a new menu close icon that improves the UX in case the user wants to return to the previous view." - Ricardo Prieto

Demo Image: CSS(SASS) Hamburger Menu Animation
Demo Image: CSS(SASS) Hamburger Menu Animation

CSS(SASS) Hamburger Menu Animation

A small hover animation on a hamburger menu icon.
Made by Derek Morash
January 11, 2016

Demo Image: SVG Menu Icon
Demo Image: SVG Menu Icon

SVG Menu Icon

Codrops SVG menu icon with popmotion.
Made by Popmotion
November 12, 2015

Demo Image: Expanding Hamburger Navigation Icon
Demo Image: Expanding Hamburger Navigation Icon

Expanding Hamburger Navigation Icon

Expanding hamburger menu that displays the intent of the button more clearly than a typical hamburger menu icon.
Made by Ryan Canfield
May 11, 2015

Demo Image: Hamburger Menu Animation
Demo Image: Hamburger Menu Animation

Hamburger Menu Animation

Just another hamburger menu animation.
Made by Sebastian Popp
April 2, 2015

Demo Image: Drawn Hamburger Transition
Demo Image: Drawn Hamburger Transition

Drawn Hamburger Transition

More fun with hamburger icon transitions.
Made by Jesse Couch
September 4, 2014

back to top