How to use the Hamburger Menu Icons
- Hover an icon to see it open, or tick Show open state to see them all open. Click the one you like.
- Set the width, thickness, gap, color and speed. Every icon updates live.
- Copy the CSS, HTML and JS, or use Copy all for one block.
- For Webflow, press Copy to Webflow and paste into the Designer with Ctrl/⌘+V.
A menu button everyone can use
Each icon is a real <button>, not a clickable div, so it works with a keyboard and screen readers out of the box.
- aria-expanded tells assistive tech whether the menu is open, and the CSS uses the same attribute to animate. One source of truth.
- aria-label names the button, since it has no visible text.
- Touch target: the padding keeps the clickable area at least 44 pixels square.
- Reduced motion turns the animation off for visitors who ask for less movement.
Connecting it to your menu
The small script flips aria-expanded on click. To show your menu, add aria-controls="menu" and a rule such as .burger[aria-expanded="true"] ~ #menu { display: block; }, or toggle a class on the menu in the same click handler.
In Webflow, Copy to Webflow pastes an Embed with the icon, styles and script. To open a Webflow navbar with it, put the Embed inside the navbar’s Menu Button element. Related: CSS Button Styles, CSS Hover Animation Generator, CSS Loader Generator.
Also searched as: hamburger menu icon, hamburger menu animation, animated burger menu css, css hamburger menu, menu icon animation, burger icon to x, webflow hamburger menu, hamburger menu css.
Tools that pair well with the Hamburger Menu Icons
- CSS Button Generator — Design a button that looks great in every state.
- CSS Keyframes Generator — A visual editor for @keyframes.
- Select Menu Generator — Stop typing out option lists by hand.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.