---
title: "Wavy pointer animated icon"
description: "Wavy pointer animated icon (Annotation arrows). A wavy arrow writes from its source dot to the target. Light: the stroke writes on crest by crest from the dot, then the head opens at the tip. Strong: the dot presses as the pen lands, the wave writes fast while its crests swell and ripple 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-wave/
---

# Wavy pointer animated icon

A wavy arrow writes from its source dot to the target. Light: the stroke writes on crest by crest from the dot, then the head opens at the tip. Strong: the dot presses as the pen lands, the wave writes fast while its crests swell and ripple back, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the dot.

- Id: `annotation-wave`
- Category: Annotation arrows
- Search terms: squiggly arrow, squiggle, snake arrow, sine wave arrow, undulating arrow, wave arrow, rippled 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-wave.lottie (dotLottie, 7236 bytes, sha256 a5b5d5027f5a713085d3be4fc8a66a6f3b1fe35cff4d29a6bed482dc5c7bb5b3)
- License: MIT

## Install

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

## React

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

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