---
title: "Zigzag pointer animated icon"
description: "Zigzag pointer animated icon (Annotation arrows). A zigzag arrow writes from its source dot to the target. Light: the stroke writes on zig by zig from the dot, then the head opens at the tip. Strong: the dot presses as the pen lands, the zigzag writes fast while its zigs stretch 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-zigzag/
---

# Zigzag pointer animated icon

A zigzag arrow writes from its source dot to the target. Light: the stroke writes on zig by zig from the dot, then the head opens at the tip. Strong: the dot presses as the pen lands, the zigzag writes fast while its zigs stretch 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-zigzag`
- Category: Annotation arrows
- Search terms: zig zag, zig-zag, jagged arrow, lightning arrow, sawtooth arrow, crooked arrow, erratic path, 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-zigzag.lottie (dotLottie, 7719 bytes, sha256 154457323eff20c384adcf44eac4db74a58a3306570c062737ba20ff929e4cfa)
- License: MIT

## Install

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

## React

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

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