This self-directed UI concept explores how everyday product controls can feel responsive and intentional without adding visual noise. The set contains 5 interactive icons for a user-management table: favorite, email, edit, date, and cut. Each icon responds to hover and click states, while the favorite control keeps a persistent active or inactive state.

This removes the awkward “active-on and active-off” language and gives the product context faster.

5 interactive UI icons

Hover and click feedback

Persistent favorite toggle behavior

Layered Rive State Machine logic

Reusable interaction patterns for product interfaces

Small controls appear throughout product interfaces, but they are often treated as isolated animations or rebuilt separately for each screen. This system shows how Rive interactions can create a reusable behavior layer for product UI, giving controls clearer feedback while keeping the motion consistent across the experience.

The favorite icon needed 4 behaviors to work together: hover, click, activate, and deactivate.

Hover and click are temporary states, while the active state needs to persist. If every animation controls the same properties, the states can conflict, causing flicker or unpredictable transitions.

I built a deliberate animation-layer hierarchy so each behavior has a clear role. Higher layers can affect the layers below them without allowing every state to compete for the same visual properties.

Within each timeline, I keyed only the attributes needed for that specific behavior. The heart icon was also grouped into separate layers, allowing hover, click, activation, and deactivation to animate independently.

This keeps the toggle responsive while preserving a stable active state.

The icon system is designed as a reusable interaction pattern for product controls. The favorite toggle demonstrates how persistent states and temporary feedback can work together without flicker, while the same animation-layer approach can be adapted across other interface actions.

Credits Design & Animation: Omar Jabr Tools: Rive