---
title: "Dashed pointer animated icon"
description: "Dashed pointer animated icon (Annotation arrows). A dashed arrow stitches a suggested path from its source dot to the target. Light: the dashes write on one after another along the curve, then the head opens at the tip. Strong: the dot presses as the pen lands, the dashes stitch in quickly, each sliding into place along the path and settling, 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-dashed/
---

# Dashed pointer animated icon

A dashed arrow stitches a suggested path from its source dot to the target. Light: the dashes write on one after another along the curve, then the head opens at the tip. Strong: the dot presses as the pen lands, the dashes stitch in quickly, each sliding into place along the path and settling, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the dot.

- Id: `annotation-dashed`
- Category: Annotation arrows
- Search terms: dotted arrow, dashed line arrow, broken line arrow, stitched arrow, suggested path, trajectory, path 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-dashed.lottie (dotLottie, 8481 bytes, sha256 408f47e0947f3b3b422f86f68ac9b2431b57acbed8071af132943de7706415fb)
- License: MIT

## Install

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

## React

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

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