---
title: "Numbered pointer animated icon"
description: "Numbered pointer animated icon (Annotation arrows). A numbered step badge sends an arrow to the detail it marks. Light: the leader writes out of the badge and curves down to the detail, then the head opens. Strong: the badge presses and pops as the pen leaves it, the leader writes fast while its curve swings out and back, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the badge."
canonical: https://generativeicons.com/icons/annotation-numbered/
---

# Numbered pointer animated icon

A numbered step badge sends an arrow to the detail it marks. Light: the leader writes out of the badge and curves down to the detail, then the head opens. Strong: the badge presses and pops as the pen leaves it, the leader writes fast while its curve swings out and back, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the badge.

- Id: `annotation-numbered`
- Category: Annotation arrows
- Search terms: step number, numbered step, step 1, step one, number badge, numbered callout, tutorial step, instruction step, how to, numbered marker, hand drawn arrow, sketch 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-numbered.lottie (dotLottie, 7250 bytes, sha256 99f2c748a9a59ffd0dbba7c20e3e4c5491825ec7dcfb1c3d5ae48ffa431cbf59)
- License: MIT

## Install

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

## React

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

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