React Hamburger Icon

A featherweight animated 'hamburger' menu icon for React. Highly configurable and stylable, with sensible defaults.

Installation

npm i react-hamburger-icon

Usage

Import the component and use it anywhere you want a hamburger icon. Pass an open prop to determine whether it shows an open state. You can configure it with animation, lineWidth, and duoLine props, as well as style things like size and color directly on the component.

See the API Docs for a full overview of props and options.

import React, { useState } from 'react';
import { HamburgerIcon } from 'react-hamburger-icon';
 
export function Menu() {
  const [open, setOpen] = useState(false);
 
  return <HamburgerIcon open={open} onClick={() => setOpen(!open)} />;
}