---
title: "Spiral pointer animated icon"
description: "Spiral pointer animated icon (Annotation arrows). A spiral arrow unwinds from its source dot and shoots off to the target. Light: the stroke winds out from the dot at its heart in widening turns, runs off along the last turn, then the head opens at the tip. Strong: the dot presses as the pen lands, the spiral whips out fast while its coils swell and spring back, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the dot."
canonical: https://generativeicons.com/icons/annotation-spiral/
---

# Spiral pointer animated icon

A spiral arrow unwinds from its source dot and shoots off to the target. Light: the stroke winds out from the dot at its heart in widening turns, runs off along the last turn, then the head opens at the tip. Strong: the dot presses as the pen lands, the spiral whips out fast while its coils swell and spring back, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the dot.

- Id: `annotation-spiral`
- Category: Annotation arrows
- Search terms: swirl arrow, swirly arrow, coil arrow, coiled arrow, whirl, vortex, unwinding arrow, hand drawn arrow, sketch arrow, doodle arrow, annotate
- Two states: prepared to result, 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/annotation-spiral.lottie (dotLottie, 8270 bytes, sha256 26a8086bb6ebb14fa035b9cb57c6da6e4135fdea9b01044c0df6224c6d4e62dd)
- License: MIT

## Install

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

## React

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

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