Skip to content
ImgKiloImgKiloOpen tools

Add Arrow to Image

Add an arrow to an image

Drop an image and an arrow appears, ready to aim: drag either end to point it, or the middle to move it. Add as many arrows as you need, and combine them with text labels, highlight boxes, speech bubbles and numbered steps for a complete markup. Every mark is independently editable. Download as PNG or JPG, all in your browser, with nothing uploaded.

  • Files never leave your device
  • Runs in your browser
  • Free, no signup

How it works

  1. 1

    Drop an image

    Add a JPG, PNG, WebP, GIF or AVIF. It is drawn to a canvas in your browser, with no upload.

  2. 2

    Aim it, add more

    Drag each end to point it, or the middle to move it. Add more arrows, text, boxes, bubbles and steps from the panel.

  3. 3

    Style and save

    Set the colour, thickness and outline, pick one or two heads, then download as PNG or JPG.

What this markup tool gives you

Stack arrows and more

Add as many arrows as you need, plus text labels, highlight boxes, speech bubbles and numbered steps, all on one image.

Aim and restyle each mark

Drag either end of an arrow to point it, and set the colour, thickness, one or two heads, a dashed line and opacity per mark.

Drawn locally, never uploaded

The image and every mark are composited in your browser, so screenshots and private photos never touch a server.

Where this helps

How-to

Tutorial screenshots

Point at the button, menu or field a reader needs to click in a step-by-step guide.

Work

Bug reports and feedback

Mark the exact spot that is broken or needs changing so there is no ambiguity.

Photos

Highlighting a detail

Draw the eye to one thing in a busy photo, like a face in a crowd or a sign.

Diagrams

Distances and links

Use a double-headed arrow to show a span between two points or a two-way relationship.

Tips that help

  • 1

    Travel from empty to target

    Start the tail in open space and end the head on the target, so the arrow is easy to follow.

  • 2

    Stop just short

    Leave a small gap before the target rather than covering it, so the thing you point at stays visible.

  • 3

    Keep the outline on

    The contrasting halo is the easiest way to keep a coloured arrow legible over any background.

  • 4

    Bigger on busy images

    Raise the thickness on large or cluttered photos so the arrow carries across the detail.

Adding an arrow to an image: pointing the eye where it needs to go

An arrow is the most direct way to say 'look here'. It turns a plain screenshot into an instruction, marks the one detail that matters in a busy photo, and guides a reader through a step without a word of explanation. Doing it well is about aiming it precisely and keeping it visible, which is what this guide covers.

Aim it precisely

Start the tail in a calm, empty part of the image and let the head land on the thing you are pointing at. An arrow that begins over clutter and ends in more clutter is hard to follow; one that travels from open space into the target reads instantly.

Add an arrow to an image

Leave a small gap between the head and the target rather than burying the tip in it. Pointing at a button is clearer when the arrow stops just short and lets the button stay visible, instead of covering the very thing you want someone to see.

Because the position on the canvas is exactly the position in the download, drag the ends until it looks right against the real image rather than guessing. Both ends move independently, so you can adjust the angle and length until the arrow feels deliberate.

Keep it visible over any background

Colour does most of the work. A saturated red or yellow stands out against the greys and skin tones of most screenshots and photos, while a colour that blends into the background defeats the point of an arrow.

The outline is the other half. It wraps the arrow in a thin contrasting halo, so a white arrow stays readable over a bright wall and a dark arrow over a shadow. On a genuinely busy image it is the difference between an arrow that pops and one that disappears.

Match the thickness to the image size. A thin arrow is fine on a small, clean screenshot, but a large or noisy photo needs a heavier line and a bigger head to carry across the detail.

Read more

What to pair an arrow with

An arrow shows where; a few words say what. Pair it with a short caption from the add text tool to label the thing it points at, which is the classic recipe for a tutorial screenshot.

When the note is a quote or a reaction rather than a label, a speech bubble with a tail does the same pointing job while carrying the words inside it.

If the same screenshot also contains something private, mark it up first and then hide the sensitive part by blurring the area, so the finished image both guides and protects.

Frequently asked questions

Honest answers to what people ask before using this tool.

Drop an image and an arrow appears, ready to aim. Drag either end to set where it starts and where it points, or drag the middle to move it. Set the colour, thickness and heads, turn on the outline so it stays visible, and download as PNG or JPG. You can add more arrows and other marks too. It all runs in your browser, so the image is never uploaded.

Yes. This is a full markup tool, not a single arrow. From the panel you can add as many arrows as you like, plus text labels, highlight boxes, speech bubbles and numbered step badges, all on the same image. Click any mark to select it, drag it to move, grab its handles to reshape it, and set its colour, size and opacity. Undo, duplicate and delete are all there.

Yes. The two ends are independent handles: drag the tail to where the arrow begins and the head to the exact spot it should point at. Because the preview is what-you-see-is-what-you-get, the position on screen is exactly the position in the download, so there is no guesswork.

Leave the outline on. It draws a thin contrasting halo around the arrow, so a bright red or yellow arrow still reads clearly over a light sky, a dark shadow or a cluttered screenshot. Raising the thickness a little also helps on large or noisy images.

Yes. Switch the arrowhead control to 'Both ends' to get a double-headed arrow, which is useful for showing a distance, a span or a two-way relationship between two things in the picture.

No. The arrow is drawn over the image at its native resolution and the rest of the picture is untouched. Saving as PNG keeps it lossless; JPG applies the usual photo compression, the same as any save.

No. The image is drawn to a canvas and the arrow is rendered entirely in your browser. Nothing is sent to a server, which you can confirm in the Network panel, so screenshots and private photos stay on your device.

Further reading

Independent references if you want to go deeper on the formats and tradeoffs.

Related tools