---
title: "Gear shift animated icon"
description: "Gear shift animated icon (Automotive). Shift from first into second. Light: the knob is drawn down the left slot, catches for a beat at neutral where the crossbar meets it, then clunks into second with a hit, rebounds and seats. Strong: the knob is tugged up out of first, runs down to neutral, catches, slams into second and bounces twice before it seats. The reverse runs it back up through neutral and clunks it into first. The gate never moves; the knob holds in second."
canonical: https://generativeicons.com/icons/gear-shift/
---

# Gear shift animated icon

Shift from first into second. Light: the knob is drawn down the left slot, catches for a beat at neutral where the crossbar meets it, then clunks into second with a hit, rebounds and seats. Strong: the knob is tugged up out of first, runs down to neutral, catches, slams into second and bounces twice before it seats. The reverse runs it back up through neutral and clunks it into first. The gate never moves; the knob holds in second.

- Id: `gear-shift`
- Category: Automotive
- Search terms: gearbox, gear stick, gearstick, stick shift, gear lever, shifter, gearshift, manual transmission, transmission, clutch, change gear, manual car, h-pattern
- Two states: first to second, 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/gear-shift.lottie (dotLottie, 5341 bytes, sha256 9a079071b40390b356807762937962415b10bfd7085d144bbc36bb8d9af5e26d)
- License: MIT

## Install

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

## React

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

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