---
title: "Wheel picker animated icon"
description: "Wheel picker animated icon (Forms & input). A scroll wheel picker moves to the next value. Light: the wheel rolls up one row: the selected value leaves the selection band and dims, the value below rises into the band and brightens, the top value rolls away and a new value fades in at the bottom. Strong: the wheel is pulled down first, then flicked up, runs a little past the detent and springs back into it. The reverse rolls the wheel back down one row."
canonical: https://generativeicons.com/icons/wheel-picker/
---

# Wheel picker animated icon

A scroll wheel picker moves to the next value. Light: the wheel rolls up one row: the selected value leaves the selection band and dims, the value below rises into the band and brightens, the top value rolls away and a new value fades in at the bottom. Strong: the wheel is pulled down first, then flicked up, runs a little past the detent and springs back into it. The reverse rolls the wheel back down one row.

- Id: `wheel-picker`
- Category: Forms & input
- Search terms: scroll picker, scroll wheel, picker wheel, drum picker, spinner picker, ios picker, time picker, date wheel, roller, value selector
- Two states: first-value to next-value, 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/wheel-picker.lottie (dotLottie, 6314 bytes, sha256 1e041cac4d440ee7385c0502e01521db63bd86f117924fc1b953a2bd7cd27b5b)
- License: MIT

## Install

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

## React

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

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