Pause to play animated icon

Preview image. Unlock full-res

Minimalist animated icon transitioning from a pause symbol to a play button using geometric shapes and movement.

Summary

A clean, geometric animation that transforms a pause symbol (two vertical bars) into a play symbol (triangle) using smooth motion and centered composition on a light background.

Visual description

Centered composition on light gray background. Two black dots appear at the top, representing eyes. Below, two thick black horizontal rectangles sit symmetrically (pause symbol). Through animation, these bars contract and rotate to form a triangle shape (play symbol). The design uses strict geometric forms with no curves. The motion is smooth and suggests a playful transformation between the two states.

Key takeaway

The clever reuse of the same visual weight and symmetry from pause to play states — the design works as both symbols simultaneously through the animation sequence. The minimal palette and geometric constraint makes it memorable and universally readable.

Reuse notes

Works well for media players, interactive interfaces, or animated UI components. The animation principle can be extracted and applied to other state transitions. Best at small scales; keep line weights consistent. The light background is essential for the black shapes to pop.

More like this