Using icons
Motion and triggers
How Kineticons icons move: per-icon motion, triggers (hover, manual, loop, none), timing and reduced motion.
A motion of its own
Every icon moves the way its object does: parts move against each other around a real pivot, lines draw themselves, shapes give and spring back. Each icon’s page says what its motion shows.
Triggers
| Trigger | When it moves | Use it for |
|---|---|---|
| hover | When the icon, or a button, link, tab or .ki-trigger around it, is pointed at or focused | The default: interface controls. |
| manual | While active is true | A state that is on: recording, playing, syncing. |
| loop | On a steady beat | Something ongoing. Use sparingly. |
| none | Never | Icons in dense lists, print, screenshots. |
Loop
Timing
Motion arrives with a little spring over 460 ms and leaves smoothly over 260 ms. Parts follow each other by 40 to 80 ms, and movements stay within one or two units of the grid.
Reduced motion
When a visitor’s system asks for reduced motion, every icon stays still, whatever its trigger. Nothing to configure.
Something unclear or missing? Open an issue.