FreeFrontend

CSS Hamburger Menu Icons

March 05, 2017 | 7 Minute Read

Free HTML and CSS hamburger menu icons. Demo and download code (*zip).

Demo Image: Click Me! Hamburger Menu
Click Me! Hamburger Menu (demo image)

Click Me! Hamburger Menu

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

download demo and code

See the Pen Click me! Hamburger menu by Alexandr Izumenko (@Izumenko) on CodePen.

Demo Image: Hamburger Icon Animations
Hamburger Icon Animations (demo image)

Hamburger Icon Animations

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

download demo and code

See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.

Demo Image: Atomic Hamburger Menu CSS
Atomic Hamburger Menu CSS (demo image)

Atomic Hamburger Menu CSS

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

download demo and code

See the Pen Atomic Hamburger Menu CSS by Alex Coven (@alcoven) on CodePen.

Demo Image: Hamburger Icon Animations
Hamburger Icon Animations (demo image)

Hamburger Icon Animations

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

download demo and code

See the Pen Hamburger Icon Animations by Carlos (@carlosriera) on CodePen.

Demo Image: Animated Burger/Menu Icon
Animated Burger/Menu Icon (demo image)

Animated Burger/Menu Icon

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

download demo and code

See the Pen Animated Burger/Menu Icon by Nicholas M. Smith (@icutpeople) on CodePen.

Demo Image: Hamburger Menu Elastic
Hamburger Menu Elastic (demo image)

Hamburger Menu Elastic

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

download demo and code

See the Pen hamburger menu elastic by Davide Cantelli (@cant89) on CodePen.

Demo Image: 20 Menu Buttons To Hamburger
20 Menu Buttons To Hamburger (demo image)

20 Menu Buttons To Hamburger

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

download demo and code
Demo Image: Animated Menu Icon
Animated Menu Icon (demo image)

Animated Menu Icon

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

download demo and code

See the Pen Animated Menu Icon by Eric Grucza (@egrucza) on CodePen.

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

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

download demo and code

See the Pen Simple Navbar Toggle to X (Vanilla JS) by Joseph Gengarella (@Wyrlor) on CodePen.

Demo Image: Menu Icon Animation
Menu Icon Animation (demo image)

Menu Icon Animation

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

download demo and code

See the Pen Menu icon animation (updated) by Marius Balaj (@mariusbalaj) on CodePen.

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

CSS(SASS) Hamburger Menu Animation

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

download demo and code

See the Pen CSS(SASS) Hamburger Menu Animation by Derek Morash (@derekmorash) on CodePen.

Demo Image: SVG Menu Icon
SVG Menu Icon (demo image)

SVG Menu Icon

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

download demo and code
Demo Image: Expanding Hamburger Navigation Icon
Expanding Hamburger Navigation Icon (demo image)

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

download demo and code

See the Pen Expanding Hamburger Navigation Icon by Ryan Canfield (@canfie1d) on CodePen.

Demo Image: Hamburger Menu Animation
Hamburger Menu Animation (demo image)

Hamburger Menu Animation

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

download demo and code

See the Pen Hamburger Menu Animation by Sebastian Popp (@sebastianpopp) on CodePen.

Demo Image: Drawn Hamburger Transition
Drawn Hamburger Transition (demo image)

Drawn Hamburger Transition

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

download demo and code

See the Pen Drawn Hamburger Transition by Jesse Couch (@designcouch) on CodePen.