AnnotationKit

Marks that make a screenshot explain itself

A library of arrows, circles, boxes, brackets and underlines for annotating screenshots, decks and docs. Pick a color and weight, copy the SVG, drop it on top. No canvas app, no export dance.

Browse the libraryHow it works
tell them where to look

Payment method

Add the card you want future invoices billed to.

Card type

Select

Last 4 digits

1234

Expires

MM/YY

No charge today

Save card
one click, no modal
Color

  • Curve down

    Arrows

  • Curve up

    Arrows

  • Hook left

    Arrows

  • Straight shot

    Arrows

  • Straight down

    Arrows

  • Nudge right

    Arrows

  • Elbow down

    Arrows

  • Elbow right

    Arrows

  • Double ended

    Arrows

  • S curve

    Arrows

  • Loop de loop

    Arrows

  • Wavy down

    Arrows

  • U-turn

    Arrows

  • Long swoop

    Arrows

  • Zigzag

    Arrows

  • Dashed pointer

    Arrows

  • Fat head

    Arrows

  • Dashed straight

    Arrows

  • Dashed down

    Arrows

  • Dashed connector

    Arrows

  • Dashed elbow

    Arrows

  • Dotted curve

    Arrows

  • Dashed span

    Arrows

  • Dashed U-turn

    Arrows

  • Feather head

    Arrows

  • Sketched twice

    Arrows

  • Corner tap

    Arrows

  • Dashed swoop left

    Arrows

  • Rough circle

    Circles

  • Double circle

    Circles

  • Tight circle

    Circles

  • Lasso

    Circles

  • Double loop

    Circles

  • Triple loop

    Circles

  • Spiral in

    Circles

  • Crossed loop

    Circles

  • Drifting loop

    Circles

  • Lopsided loop

    Circles

  • Wide oval

    Circles

  • Double wide oval

    Circles

  • Looped oval

    Circles

  • Triple looped oval

    Circles

  • Phrase oval

    Circles

  • Looped phrase oval

    Circles

  • Tall oval

    Circles

  • Looped tall oval

    Circles

  • Tilted oval

    Circles

  • Squarish ring

    Circles

  • Dashed ring

    Circles

  • Dotted ring

    Circles

  • Scribble ring

    Circles

  • Circle wash

    Circles

  • Rough box

    Boxes

  • Rough square

    Boxes

  • Rounded box

    Boxes

  • Dashed box

    Boxes

  • Double box

    Boxes

  • Tall frame

    Boxes

  • Corner marks

    Boxes

  • Block wash

    Boxes

  • Scribble out

    Boxes

  • Rough underline

    Underlines

  • Double underline

    Underlines

  • Zigzag underline

    Underlines

  • Swoosh

    Underlines

  • Scallop

    Underlines

  • Squiggle divider

    Underlines

  • Strike through

    Underlines

  • Highlighter

    Underlines

  • Curly brace

    Brackets

  • Square bracket

    Brackets

  • Top bracket

    Brackets

  • Top brace

    Brackets

  • Bottom bracket

    Brackets

  • Bottom brace

    Brackets

  • Right bracket

    Brackets

  • Right brace

    Brackets

  • Dashed bracket

    Brackets

  • Dashed top bracket

    Brackets

  • Corner brackets

    Brackets

  • Bracket pair

    Brackets

  • Tick span

    Brackets

  • Tick column

    Brackets

  • Chevron bracket

    Brackets

  • Paren bracket

    Brackets

  • Sketched top bracket

    Brackets

  • Section rule

    Brackets

  • Step bracket

    Brackets

  • Check

    Marks

  • Cross out

    Marks

  • Exclamation

    Marks

  • Question

    Marks

  • Asterisk

    Marks

  • Three dots

    Marks

  • Cloud callout

    Callouts

  • Speech box

    Callouts

  • Leader line

    Callouts

  • Dashed leader

    Callouts

  • Elbow leader

    Callouts

  • Dotted leader

    Callouts

  • Straight leader

    Callouts

  • Elbow leader up

    Callouts

  • Dashed elbow leader

    Callouts

  • Ticked leader

    Callouts

  • Vertical leader

    Callouts

  • Dashed vertical leader

    Callouts

  • Curved leader

    Callouts

  • Dot-to-dot leader

    Callouts

  • Short stub

    Callouts

  • Hooked leader

    Callouts

  • Bracket leader

    Callouts

Made for annotating things fast

  1. Pick and tune

    Set the color, stroke weight and wobble in the toolbar. Every mark in the grid updates live, so what you see is what you copy.

  2. Copy SVG or JSX

    Copy SVG grabs a standalone, dependency-free file. The braces button gives you a ready-made React component instead.

  3. Drop it on top

    Place the mark absolutely over a screenshot, slide, or Notion embed. Strokes scale cleanly at any size — it is vector all the way down.

annotated-screenshot.html
<div style="position: relative">
  <img src="/screenshot.png" alt="Checkout step" />

  <!-- paste the copied mark, position it, done -->
  <svg style="position:absolute; top:12%; left:38%; width:120px"
    viewBox="0 0 100 100" fill="none" stroke="#e0453d"
    stroke-width="3" stroke-linecap="round">
    <path d="M8 18C42 10 74 24 82 68" />
    <path d="M82 68L70 55" />
    <path d="M82 68L92 53" />
  </svg>
</div>

Tip:Pair the marks with a handwriting font like Caveat for labels — that combination is what makes a screenshot feel marked up by a person.

Write a label in your own hand

Type straight onto the paper below, then paste it onto a Figma canvas. It arrives as a real text layer in the same handwriting, so you can keep editing the words and restyle them over there.

Size56px

justpaste on the canvas