10 CSS Hamburger Menu Icons

September 05, 2019 No comments CSS Code Examples CSS Hamburger Icons Menu

The hamburger menu icon, also known as hotdog menu or three-line menu, is a name given by internet community to menu icon found on modern websites or mobile version of websites. This kind of icon makes it easier to show options on devices with smaller screens. This collection showcase free CSS and HTML hamburger menu icons with little javascript and good looking animations.

Hamburger Open Animation

Hamburger open animation
Demo Image: Hamburger Open Animation
Hamburger with animation
Made by Sarath AR on August 18, 2017
demo and code

Hamburger Animated Icon

Hamburger animated icon
Demo Image: Hamburger Animated Icon
Animated and intuitive hamburger icon.
Made by Steven Fabre on February 21, 2014
demo and code
Manu hamburger icon animations
Demo Image: Menu "Hamburger" Icon Animations
Many folks use these, and their merits can be argued, but for practical purposes, the "Hamburger" icon has familiarity going for it, at the very least. These animations add a little more transparency to what it means from a UI perspective by transforming it into another recognizable icon - the closing "x".
Made by Jesse Couch on February 21, 2014
demo and code

Hamburger Icon

Hamburger icon
Demo Image: Hamburger Icon
Responsive Hamburger icon and menu with vanilla JS.
Made by Pranjal Saxena on August 04, 2016
demo and code

Hamburger menu animation with velocity.js

Hamburger manu animation with velocity js
Demo Image: Hamburger menu animation with velocity.js
This pen is an animation of the hamburger menu button state when active on click or tap. It was done using velocity.js to make everything a lot smoother and cleaner.
Made by Filippo on May 20, 2015
demo and code

Hamburger Menu Button Interaction

Hamburger menu button interaction
Demo Image: Hamburger Menu Button Interaction
Made by Himalaya Singh on January 27, 2019
demo and code

Click highlighter on menu button using :after

Click highlighter on menu
Demo Image: Click highlighter on menu button using :after
Made by Rhys Matthew on October 19, 2018
demo and code

CSS only menu

Css only menu
Demo Image: CSS only menu
Made by Sil van Diepen on August 21, 2018
demo and code
Menu button
Demo Image: Menu Button
Made by Amli on June 30, 2018
demo and code

Hamburger menu

Hamburger menu
Demo Image: hamburger menu
Made by Gareth on June 19, 2018
demo and code
{{ message }}

{{ 'Comments are closed.' | trans }}