@pacovitielloAnimated State-Based Icons
Icons that animate to mirror the action they trigger or the state they represent.
The best icons don't just label an action—they preview it. By animating in lockstep with the state they represent, they collapse the gap between intent and feedback into a single gesture.
Sidebar Toggle in Linear
The sidebar toggle icon in Linear is itself animated, opening and closing exactly like the sidebar it controls. Icon motion and panel motion share the same timing, so the control feels physically connected to the surface it manipulates.
Paperclip Pin in Obsidian
In the Velocity theme for Obsidian, the tab pin action breaks from convention by using a paperclip icon instead of the traditional pushpin. The closed paperclip represents a pinned tab; on hover, it visually opens to signal that clicking will unpin it.
The metaphor is unusually apt—paperclips temporarily hold documents together, just as pinned tabs hold their position in your workspace. The opening motion creates a clear cause-and-effect: hover makes it open, click releases it.
Why It Works
Both details treat the icon as a tiny preview of what's about to happen rather than a static label. The animation isn't decoration—it's a promise. When the icon's motion matches the outcome, users stop having to translate symbols into actions; they just see the action itself, ahead of time.
