---
title: "Circled pointer animated icon"
description: "Circled pointer animated icon (Annotation arrows). An arrow points at a spot and a hand-drawn circle rings it. Light: the stroke writes from the source dot, the head opens, then one loose loop circles the spot and overlaps its start. Strong: the dot presses as the pen lands, the stroke writes fast and the head snaps open, then the loop whips round the spot, swelling past its size and settling. The preview reset fades the arrow and circle back to the dot."
canonical: https://generativeicons.com/icons/annotation-circled/
---

# Circled pointer animated icon

An arrow points at a spot and a hand-drawn circle rings it. Light: the stroke writes from the source dot, the head opens, then one loose loop circles the spot and overlaps its start. Strong: the dot presses as the pen lands, the stroke writes fast and the head snaps open, then the loop whips round the spot, swelling past its size and settling. The preview reset fades the arrow and circle back to the dot.

- Id: `annotation-circled`
- Category: Annotation arrows
- Search terms: circle it, circle this, ring around, hand drawn circle, sketch circle, marker circle, mark the spot, highlight area, red circle, encircle, 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-circled.lottie (dotLottie, 8725 bytes, sha256 a7de6590e47d70cf58db949a4ab8fe0843b005b78909995af9a6f117dc270856)
- License: MIT

## Install

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

## React

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

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