---
title: "Trackpad animated icon"
description: "Trackpad animated icon (Preferences). A two-finger swipe. Light: the two fingertips swipe across the pad to the right and lift off, shrinking and fading, while two fresh fingertips touch down where they started, left then right, each landing with a small pop. Strong: a longer swipe and a bouncier touch-down. The pad never moves, and there is always a pair of fingertips on it."
canonical: https://generativeicons.com/icons/trackpad/
---

# Trackpad animated icon

A two-finger swipe. Light: the two fingertips swipe across the pad to the right and lift off, shrinking and fading, while two fresh fingertips touch down where they started, left then right, each landing with a small pop. Strong: a longer swipe and a bouncier touch-down. The pad never moves, and there is always a pair of fingertips on it.

- Id: `trackpad`
- Category: Preferences
- Search terms: touchpad, touch pad, track pad, gestures, multi-touch, multitouch, two-finger swipe, two-finger scroll, laptop touchpad
- One action, back to rest
- 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/trackpad.lottie (dotLottie, 4903 bytes, sha256 1f7778e2b9031ee86f0839cdc0767b4cd9d9e7108ca33e96b216661f207f604d)
- License: MIT

## Install

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

## React

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

export function TrackpadIcon() {
  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/trackpad.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/trackpad/ · https://generativeicons.com/api/icons/trackpad