Featherweight animated hamburger icon for React

Usage no npm install needed!

<script type="module">
  import reactHamburgerIcon from '';


React Hamburger Icon

NPM License

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


npm i react-hamburger-icon


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)} />;