Orbiting Icons — Free HTML CSS JS Orbit Animation Snippet

Orbiting icons is the integration-diagram animation where service icons revolve around a central logo on concentric rings — the visual shorthand for "everything connects to your platform." This snippet builds it with pure CSS transforms and a little vanilla JavaScript, with rings spinning at different speeds and directions while each icon stays upright.

Placing icons on a ring with one transform

Each orbiting icon is positioned with a chained transform that does three things in order: rotate(var(--a)) turns its frame to the icon angle, translate(var(--rad)) pushes it out to the ring radius, and rotate(calc(var(--a) * -1)) spins it back. The first rotation places the icon at the right spot on the circle; the second, opposite rotation cancels the tilt so the icon sits flat instead of pointing outward. Each icon just sets its own angle (--a) and inherits the ring radius, so distributing icons evenly is a matter of choosing angles (0, 120, 240 for three).

Spinning rings, upright icons

The orbit itself is a single rotation animation on each ring container: oiSpin turns the ring 360°, carrying all its icons around the center. The outer ring runs slower and in reverse, so the two rings counter-rotate — which reads as a living system rather than one rigid wheel. Crucially, because each icon also counter-rotates by its own placement angle, and the magicui-style approach keeps them readable, the icons revolve around the hub while remaining legible. (For perfectly upright icons during the spin, the icon can counter-animate the ring's rotation; here the dashed rings and symmetric icons keep it clean and cheap.)

The dashed orbit rings

Each ring is a circle with a faint dashed border, so the orbital paths are visible like planetary tracks. Different ring sizes (210px and 340px) and icon radii create clear inner and outer orbits, with the glowing core hub sitting at the center above them via z-index. The dashed paths are pure CSS borders — no SVG circles needed.

Data-driven icons

The icon glyphs are filled in by JavaScript from two arrays (inner and outer ring), so swapping in your real integration set is editing a list. Each .oi-orbit keeps its placement angle from the HTML while its content comes from the data, separating layout from labels.

Pause on hover to read

Because the icons are always moving, a pointerenter/pointerleave pair pauses both rings by toggling animationPlayState, so a visitor can stop the system to read which services are shown, then let it resume. This small touch turns a decorative loop into something legible.

Customizing it

Change the ring sizes and icon radii for tighter or wider orbits, add or remove icons by editing the angles and arrays, retime or reverse the spins, and recolor the core and tiles. Swap the emoji for real logo SVGs. Pair it with an animated beam diagram or a feature tabs showcase to explain how your product connects.