---
title: "Reduced motion animated icon"
description: "Reduced motion animated icon (Accessibility & reading). The ball brakes and its motion trails die down. Light: the ball lurches forward as it brakes and rocks back into place, while the three trails behind it retract to short stubs one after another, top to bottom, each snapping a little short and settling. Strong: the ball pumps the brakes twice, and the trails shrink in two steps, half way, then down to the stubs. The stubs hold; the reverse lets the trails stream out again."
canonical: https://generativeicons.com/icons/reduced-motion/
---

# Reduced motion animated icon

The ball brakes and its motion trails die down. Light: the ball lurches forward as it brakes and rocks back into place, while the three trails behind it retract to short stubs one after another, top to bottom, each snapping a little short and settling. Strong: the ball pumps the brakes twice, and the trails shrink in two steps, half way, then down to the stubs. The stubs hold; the reverse lets the trails stream out again.

- Id: `reduced-motion`
- Category: Accessibility & reading
- Search terms: reduce motion, less motion, prefers reduced motion, motion sensitivity, vestibular, motion sickness, calm mode, minimize movement, less movement, stop movement
- Two states: moving to reduced, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/reduced-motion.lottie (dotLottie, 6519 bytes, sha256 08f70423afbb042802f5f2854f30fe874035069e91923d5614a98c5858b557e9)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add reduced-motion
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/reduced-motion.mjs';

export function ReducedMotionIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/reduced-motion.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/reduced-motion/ · https://generativeicons.com/api/icons/reduced-motion