10 CSS Hamburger Menu Icons

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

Demo Image: Hamburger Open Animation

Hamburger with animation

demo and code

Hamburger Animated Icon

Demo Image: Hamburger Animated Icon

Animated and intuitive hamburger icon.

demo and code

Menu "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".

demo and code

Hamburger Icon

Demo Image: Hamburger Icon

Responsive Hamburger icon and menu with vanilla JS.

demo and code

Hamburger menu 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.

demo and code

Hamburger Menu Button Interaction

Demo Image: Hamburger Menu Button Interaction

demo and code

Click highlighter on menu button using :after

Demo Image: Click highlighter on menu button using :after

demo and code

CSS only menu

Demo Image: CSS only menu

demo and code

Menu Button

Demo Image: Menu Button

demo and code

Hamburger menu

Demo Image: hamburger menu

demo and code