Back to icons
IconLayout & MenuHas a state
Sidebar icon
The Sidebar icon is an animated React icon from ReactFrame: a 24×24 drawing with a 1.5px stroke that moves when its button or card is hovered, and switches to a “Collapsed” state with the active prop. Copy it as SVG or JSX, download the .svg file, or install it with the shadcn CLI. It's free.
Also known asleft railwireframeinterface
16
20
24
32
48
Hover to play
Install
Copied!
npx shadcn@latest add @reactframe/sidebar-iconUse it
import { useState } from "react";
import { motion } from "motion/react";
import { SidebarIcon } from "@/components/sidebar-icon";
export function Example() {
const [on, setOn] = useState(false);
// Hovering the button plays the icon; `active` switches it to its "Collapsed" state.
return (
<motion.button initial="rest" whileHover="hover" onClick={() => setOn(!on)}>
<SidebarIcon size={20} active={on} />
Sidebar
</motion.button>
);
}Details
- Component
- SidebarIcon
- Category
- Layout & Menu
- Canvas
- 24 × 24, 2px padding
- Stroke
- 1.5 (adjustable), round caps and joins
- Styles
- Stroke, duotone, static, pixel
- State
- “Collapsed” via the active prop
- Dependencies
- motion