36 CSS Hamburger Menu Icons

Free Hand-Picked CSS hamburger menu icons. Find the demo and download.

SVG CSS3 Menu / Burger Button

SVG CSS3 Menu / Burger Button
Demo Image: SVG CSS3 Menu / Burger Button

A collection of svg + svg masking combined with HTML and CSS3 animations used to create a nifty button.

Demo / Tutorial

Developed By: Kyle Henwood

  • Made with HTML, CSS (SCSS), JS
  • Created JULY 03, 2014 // Updated JULY 16, 2014

Navicon Transformation

Navicon Transformation
Demo Image: Navicon Transformation

CSS3 transitions used to create a navigation icon into a close button.

Demo / Tutorial

Developed By: Wouter

  • Made with HTML, CSS, JS
  • Created FEBRUARY 20, 2015 // Updated APRIL 13, 2015

Hamburger SVG Menu + Close Button

Hamburger SVG Menu + Close Button
Demo Image: Hamburger SVG Menu + Close Button

SVG Hamburger animation using compass and jquery (coffeescript).

Demo / Tutorial

Developed By: apptension

  • Made with HTML, CSS (SCSS), JS (CoffeeScript)
  • Created MARCH 28, 2015

Animated SVG Hamburgers

Animated SVG Hamburgers
Demo Image: Animated SVG Hamburgers

Demo / Tutorial

Developed By: Jesse Couch

  • Made with HTML, CSS (SCSS), JS
  • Created MARCH 18, 2015 // Updated MARCH 19, 2015

Hamburger Obligatory Menu Button

36 CSS Hamburger Menu Icons 1
Demo Image: Hamburger Obligatory Menu Button

Just another hamburger menu animation. Hover to see the magic.

Demo / Tutorial

Developed By: Kyle Ehrlich

  • Made with HTML, CSS (SCSS), JS
  • Created MARCH 27, 2015

Hamburger Hover Menu Animation

36 CSS Hamburger Menu Icons 2
Demo Image: Hamburger Hover Menu Animation

Just another hamburger menu animation. Hover to see the magic.

Demo / Tutorial

Developed By: Sebastian Popp

  • Made with HTML, CSS (Less)
  • Created MARCH 31, 2015 // Updated APRIL 02, 2015

Open Close Hamburger Menu Animation

Open Close Hamburger Menu Animation
Demo Image: Open Close Hamburger Menu Animation

inspired from dribbble.com CSS3 open close switching transition

Demo / Tutorial

Developed By: Vineeth.TR

  • Made with HTML (Pug), CSS (SCSS)
  • Created MARCH 28, 2015 // Updated FEBRUARY 06, 2018

Beautiful Animated CSS Hamburger Menu Icon

Open Close Hamburger Menu Animation
Demo Image: Beautiful Animated CSS Hamburger Menu Icon

Demo / Tutorial

Developed By: Diego Hernandez

  • Made with HTML, CSS, JS
  • Created APRIL 12, 2015 // Updated OCTOBER 26, 2015

Animated CSS Hamburger Menu Icon

36 CSS Hamburger Menu Icons 3
Demo Image: Open Close Hamburger Menu Animation

CSS icon that animates into a close icon on click using CSS transitions.

Demo / Tutorial

Developed By: Chris Mabry

  • Made with HTML, CSS, JS
  • Created APRIL 17, 2015

Animated Hamburger Menu

36 CSS Hamburger Menu Icons 4
Demo Image: Animated Hamburger Menu

Animated hamburger menu. It transforms into a close icon when clicked.

Demo / Tutorial

Developed By: Husni Munaya

  • Made with HTML, CSS (SCSS), JS
  • Created APRIL 26, 2015 // Updated MARCH 22, 2018

Jumping Hamburger Menu Icon

36 CSS Hamburger Menu Icons 5
Demo Image: Jumping Hamburger Menu Icon

Playing around with CSS3’s nth: selector and creating the famous hamburger menu!

Demo / Tutorial

Developed By: Jack Thomson

  • Made with HTML (Slim), CSS (SCSS), JS
  • Created APRIL 28, 2015 // Updated MAY 10, 2015

Spinning Social Button

Spinning Social Button
Demo Image: Spinning Social Button

Its a spinning social button with some CSS animations. using jQuery to add classes on focus and click.

Demo / Tutorial

Developed By: Jamie Pettman

  • Made with HTML, CSS (SCSS), JS
  • Created APRIL 28, 2015

Transitioning Two Div Tasty Burger Menu

36 CSS Hamburger Menu Icons 6
Demo Image: Tasty Burger Menu

A simple way of doing a transitioning burger menu.

Demo / Tutorial

Developed By: Stephen Nelson

  • Made with HTML, CSS, JS
  • Created APRIL 29, 2015 // Updated MAY 01, 2015

Hamburger menu

Hamburger menu
Demo Image: Hamburger menu

Demo / Tutorial

Developed By: Jason Ormand

  • Made with HTML, CSS (SCSS), JS
  • Created MAY 04, 2015

Simple pulldown/hamburger menu

Simple pulldown/hamburger menu
Demo Image: Simple pulldown/hamburger menu

A really simple, reusable, pulldown menu that closes automatically with minimal code and opens with slick animations. Now also has a mobile view that just works!

Demo / Tutorial

Developed By: Gerwin van Royen

  • Made with HTML, CSS, JS
  • Created MAY 05, 2015 // Updated DECEMBER 15, 2015

Hamburger to arrow and to close

Hamburger to arrow to close
Demo Image: Hamburger to arrow to close

Demo Image: Hamburger to arrow to close

Demo / Tutorial

Developed By: Razvan Spatariu

  • Made with HTML, CSS (SCSS)
  • Created MARCH 26, 2015

Hamburger Menu to Book Menu

Hamburger Menu to Book Menu
Demo Image: Hamburger Menu to Book Menu

For Booksaying. Booksaying; Favorite Sayings Pool. So, what you have in the world of your book, add, store and share!.

Demo / Tutorial

Developed By: Halil İbrahim Nuroğlu

  • Made with HTML, CSS (Less), JS
  • Created JUNE 03, 2015

CSS full screen burger menu

Full screen burger menu
Demo Image: Full screen burger menu

A minimal full screen burger menu.

Demo / Tutorial

Developed By: Vivek Kumar Bansal

  • Made with HTML, CSS (Less), JS (Babel)
  • Created JUNE 27, 2015

Subtle Bouncy Navigation

Subtle Bouncy Navigation
Demo Image: Subtle Bouncy Navigation

Needed to kill some time so I made this simple Bouncy Navigation and playing around with Bicubic Bezier!

Demo / Tutorial

Developed By: Jack Thomson

  • Created with HTML (Haml), CSS (SCSS), JS
  • Created AUGUST 20, 2015 // Updated SEPTEMBER 03, 2015

Extra – Menu Toggle

36 CSS Hamburger Menu Icons 7
Demo Image: Extra – Menu Toggle

Demo / Tutorial

Developed By: Andy Tran

  • Created with HTML (Pug), CSS (Less), JS
  • Created SEPTEMBER 29, 2015 // Updated OCTOBER 30, 2015

Simple CSS Menu Icon Hamburger

Simple CSS Menu Icon Hamburger
Demo Image: Simple CSS Menu Icon Hamburger

Demo / Tutorial

Developed By: Quentin Morel

  • Created with HTML, CSS (SCSS), JS
  • Created FEBRUARY 21, 2015 // Updated APRIL 11, 2015

Simple CSS Hamburger Menu Icon

36 CSS Hamburger Menu Icons 8
Simple Demo Image: CSS Menu Icon Hamburger

CSS Humberger menu icon using new CSS animation-fill-mode (IE10+) feature.

Demo / Tutorial

Developed By: Quentin Morel

  • Created with HTML, CSS (SCSS), JS
  • Created NOVEMBER 07, 2015 // Updated MARCH 10, 2016

Hamburger Menu Lines Animation

Hamburger Menu Lines Animation
Demo Image: Hamburger Menu Lines Animation

Demo / Tutorial

Developed By: Nikolay Talanov

  • Created with HTML, CSS (SCSS), JS
  • Created NOVEMBER 15, 2015 // Updated NOVEMBER 22, 2015

CSS Hamburger

CSS Hamburger
Demo Image: CSS Hamburger

Demo / Tutorial

Developed By: Stix

  • Created with HTML, CSS
  • Created FEBRUARY 10, 2016 // Updated FEBRUARY 12, 2016

Hamburger Menu Buttons

36 CSS Hamburger Menu Icons 9
Demo Image: Hamburger Menu Buttons

Simple menu buttons. Only developing for chrome at the moment so support on other browsers is limited.

Demo / Tutorial

Developed By: Nuro Azhar

  • Created with HTML, CSS (SCSS), JS
  • Created DECEMBER 16, 2014 // Updated SEPTEMBER 07, 2018

Hamburger Menu Inspiration

36 CSS Hamburger Menu Icons 10
Demo Image: Hamburger Menu Inspiration

Overflow menu button which can be used with media queries on smaller sceens. Animation on hover.

Demo / Tutorial

Developed By: Aditya Bhandari

  • Created with HTML, CSS (SCSS)
  • Created MARCH 01, 2016

Colorful Flower Popup Menu

36 CSS Hamburger Menu Icons 11
Demo Image: Colorful Flower Popup Menu

This mobile inspired flower popup menu is a colourful fun project. Feel free to use it however you like.

Demo / Tutorial

Developed By: Jasper LaChance

  • Created with HTML, CSS
  • Created MARCH 12, 2016 // Updated MAY 24, 2017

POP Out Navigation

POP Out Navigation
Demo Image: POP Out Navigation

A CSS experiment with a menu icon that POPS.

Demo / Tutorial

Developed By: Ryan Mulligan

  • Created with HTML (Pug) , CSS (SCSS), JS
  • Created APRIL 05, 2016 // Updated APRIL 08, 2016

Floatting Draggable Menu (Messenger like)

36 CSS Hamburger Menu Icons 12
Demo Image: Floatting Draggable Menu (Messenger like)

the messenger menu sexy. Using anime.js & Foundation Icon Fonts 3.

Demo / Tutorial

Developed By: Andy Pagès

  • Created with HTML, CSS (SCSS), JS
  • Created AUGUST 17, 2016 // Updated APRIL 04, 2019

CSS Hamburger Menu Icon

CSS Hamburger Menu Icon
Demo Image: CSS Hamburger Menu Icon

Prototype of a navicon using CSS only.

Demo / Tutorial

Developed By: Jamison Wright

  • Created with HTML, CSS
  • Created FEBRUARY 02, 2016

Hidden Hamburger Side menu | CSS Only

36 CSS Hamburger Menu Icons 13
Demo Image: Hidden Side Menu | CSS Only

Hidden side menu and hamburger animation using CSS only.

Demo / Tutorial

Developed By: Joshua Ward

  • Created with HTML, CSS (SCSS)
  • Created JUNE 25, 2018

Menu icon with a spin

Menu icon with a spin
Demo Image: Menu icon with a spin

Demo / Tutorial

Developed By: Sean B

  • Created with HTML, CSS (SCSS)
  • Created JUNE 25, 2018

Hamburger Menu Button Interaction

36 CSS Hamburger Menu Icons 14
Demo Image: Hamburger Menu Button Interaction

Hamburger Menu Button Interaction.

Demo / Tutorial

Developed By: Himalaya Singh

  • Created with HTML, CSS
  • Created JANUARY 27, 2019 // Updated JUNE 18, 2019

Randomly generated Pure CSS menu icons w/ markup and SCSS

Randomly generated Pure CSS menu icons with markup and SCSS
Demo Image: Randomly generated Pure CSS menu icons with markup and SCSS

Demo / Tutorial

Developed By: Jamie Coulter

  • Created with HTML (Haml), CSS (SCSS), JS
  • Created FEBRUARY 13, 2019

SVG Hamburger Menu Icon Animation Collection

36 CSS Hamburger Menu Icons 15
Demo Image: css hamburger menu icons

A collection of juicy hamburger menu icon animations. SVG manipulations handled with brand spanking new AnimateAnythingJS JavaScript library.

Demo / Tutorial

Developed By: Matthew Main

  • Created with HTML, CSS, JS
  • Created SEPTEMBER 23, 2019 // Updated SEPTEMBER 30, 2019

Flipping Menu Toggle

36 CSS Hamburger Menu Icons 16
Demo Image: Flipping Menu Toggle

What the flip is this? Not ideal for prod but here’s a fun menu toggle experiment with css animations.

Demo / Tutorial

Developed By: Ryan Mulligan

  • Created with HTML (Pug), CSS (SCSS), JS
  • Created DECEMBER 20, 2017 // Updated JANUARY 10, 2018

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *