Sidebar Toggle Icon

Animated SVG icon that morphs between open and closed sidebar panel states using Motion path interpolation.

Installation

File Structure

sidebar-toggle-icon.tsx

Usage

import { SidebarToggleIcon } from "@/components/unlumen-ui/sidebar-toggle-icon";

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen((prev) => !prev)}>
  <SidebarToggleIcon isOpen={isOpen} />
</button>;

Custom stroke width

<SidebarToggleIcon isOpen={isOpen} strokeWidth={2} className="size-6" />

API Reference

SidebarToggleIcon

isOpen
boolean
—

Controls which SVG path is rendered — open (wide panel) or closed (narrow column).

strokeWidth?
number
1.5

SVG stroke width applied to the outer border path.

className?
string
—

Extra classes applied to the <svg> element.

Notes

  • The icon uses a pure SVG path morph between two d values — no opacity tricks or translate animations.
  • The outer rectangle uses fill="currentColor" so it inherits your text color.
  • The inner panel uses fill: var(--background) to adapt to your theme automatically.
  • The transition uses a 350ms cubic bezier [0.4, 0, 0.2, 1] for a smooth, natural feel.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.