Where a hand drawn arrow works best
A clean vector arrow says "click here". A doodle arrow says "look, a person wants you to see this". That makes them good at the jobs where a little warmth helps.
Slides and presentations
Point at the one number that matters on a chart, or link two ideas across a slide. The transparent PNG drops into Keynote, PowerPoint and Google Slides without a box around it. The ink is a dark charcoal, so it reads best on light slides; for a dark deck, recolor the still SVG first.
Notes, diagrams and tutorials
Corner and curved arrows connect steps without the stiffness of a flowchart. Undo and redo arrows show a before and after, and up and down arrows mark what rose and what fell. Because every arrow shares one stroke weight, a page full of them still looks like it came from one hand.
Websites and app interfaces
Chevrons open accordions and menus, the up-right arrow marks an external link, and refresh, upload and download cover the everyday controls. In React, the free arrows come from the npm package with the same draw-on and wiggle you see here.
Social posts and thumbnails
A scribbled arrow pulls the eye to the detail you want noticed in a screenshot or thumbnail. The animated SVG plays in any browser, so you can also screen-record an arrow drawing itself for a short video.
SVG, PNG or animated SVG
Every free arrow comes in three formats. Pick the one your tool understands.
Still SVG
Plain strokes with no animation. It scales to any size; change the stroke color in any vector editor, or with one line of CSS when you inline it.
Transparent PNG
A 512-pixel image with a transparent background, for slide decks, documents, chat apps and anything else that will not take an SVG.
Animated SVG
The arrow draws itself on stroke by stroke, then keeps wiggling. The file carries its own styles and filter and needs no JavaScript, so it plays in a web page whether you inline it, load it with an <img> tag or set it as a CSS background. Many slide apps and design tools import an SVG as a still drawing, or not at all. Because the animated file keeps its strokes hidden until its animation runs, it can come out blank there, so use the still SVG or the PNG in those apps.
Turning, sizing and coloring an arrow
A hand drawn arrow can point any way you need, even when the set has no arrow at that exact angle. Rotate the still SVG in your design tool, or in CSS with transform: rotate(30deg). transform: scaleX(-1) mirrors a curved or corner arrow so it bends the other way. The wobble turns with the line, so a rotated arrow still looks drawn by hand.
Next to text, size the arrow to the line height: about 1em in CSS, or size={16} to size={20} in React for body copy. At those sizes the 3.4 stroke on the 48-unit grid comes out a little over one pixel wide, so raise stroke-width to 4 if the arrow looks faint. For a big arrow on a slide or a poster, lower it to around 2.5 and the line keeps the feel of a fine pen.
In Figma, drag the still SVG onto the canvas and it arrives as editable vector strokes, ready to recolor or rotate. On a website, set the stroke to currentColor and the hand drawn arrow takes the color of the link or button it sits in, so it follows your hover color with no extra CSS.
How the draw-on animation works
Strokes are drawn in order, and a longer stroke takes longer to draw, so the pen seems to move at one steady speed. Each stroke starts slightly before the last one finishes, which makes a multi-part arrow read as one gesture.
Once drawn, the line keeps "boiling": one SVG filter nudges the ink between six slightly different frames on a loop, the way hand-inked cartoons never redraw a line in quite the same place. It is a single filter for the whole page, so a grid of 200 arrows costs about what one does. If your system asks for reduced motion, this site shows the arrows already drawn.
How to download a hand drawn arrow
- Pick an arrow in the grid above to open its page.
- For a free arrow, choose a format. The file downloads straight away, with no sign-up.
- For a Pro arrow, get Doodle Icons Pro. Your download has animated and static SVGs plus React components for every Pro icon.
- Building in React? Install the free set from npm and render any free arrow by name.
npm i @oreo-design/doodle-icons
import { DoodleIcon, BoilFilter } from '@oreo-design/doodle-icons'
<BoilFilter id="boil" />
<DoodleIcon name="arrow-right" boilId="boil" draw size={32} />Free arrows and Pro arrows
The 16 free arrows cover the basics: up, down, left, right and the diagonal, four chevrons, external link, refresh, undo, redo, upload, download and log out. They are released under the MIT license for personal and commercial work.
Pro adds 122 more: big block arrows, corner arrows, arrows in circles and squares, move and rotate arrows, sort arrows, double chevrons, trend arrows, and expand and shrink arrows. Pro is a one-time payment of $39 for the first 100 buyers ($69 after that), covers commercial use in unlimited projects, and includes every new batch on the way to 2,000 icons.