---
title: "Shortcut key animated icon"
description: "Shortcut key animated icon (Preferences). The shortcut fires. Light: the keycap is struck down into its base with a hit, holds for a beat and springs back past rest; as it bottoms out the bolt on it fires, popping bigger and settling. Strong: a harder strike after a small lift, a longer spring back, and the charged bolt crackles with a quick shaking twist as it pops. The base never moves."
canonical: https://generativeicons.com/icons/shortcut-key/
---

# Shortcut key animated icon

The shortcut fires. Light: the keycap is struck down into its base with a hit, holds for a beat and springs back past rest; as it bottoms out the bolt on it fires, popping bigger and settling. Strong: a harder strike after a small lift, a longer spring back, and the charged bolt crackles with a quick shaking twist as it pops. The base never moves.

- Id: `shortcut-key`
- Category: Preferences
- Search terms: hotkey, hot key, keybinding, key binding, keystroke, quick action, macro, keyboard command, accelerator key
- 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/shortcut-key.lottie (dotLottie, 5191 bytes, sha256 a7212feb735b2870fd0fd95f66c54c5c743358a373de4bcf0d1bb871e464e5bb)
- License: MIT

## Install

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

## React

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

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