Hand drawn check mark icon
This hand drawn check mark icon is free to download as a still SVG, a transparent PNG or an animated check mark icon that draws itself on and keeps wiggling. The sign for done, correct and approved.
Download
check.svg · check.png (512px, transparent) · animated SVG
Free under the MIT license, for personal and commercial use.
How to use the hand drawn check mark icon
Use it in to-do lists, pricing tables, form validation, onboarding steps and "you're all set" screens. Because the check mark is a real vector stroke on a 48-unit grid, not a scanned sketch, it stays crisp from a 16-pixel button to a full-slide illustration. It also sits comfortably next to the other doodles in the set: same pen, same stroke weight, same slightly wobbly hand.
Slides and documents
Drop the transparent PNG of the check mark into Keynote, PowerPoint, Google Slides, Notion or Docs and it lands without a white box around it. The ink is a dark charcoal, so it reads best on a light background; for a dark slide, recolor the still SVG first.
Websites and apps
Load the still SVG with an <img> tag, or paste the markup inline so CSS can color it. The animated check mark SVG carries its own styles and wiggle filter and needs no JavaScript, so it plays wherever a browser shows an SVG. In React, the check mark comes from the free npm package.
Social posts and short videos
Open the animated SVG in a browser and screen-record the check mark drawing itself on for a story, a reel or a thumbnail. A hand-drawn mark next to a screenshot reads as a person pointing something out, which is usually the point.
npm i @oreo-design/doodle-icons
import { DoodleIcon, BoilFilter } from '@oreo-design/doodle-icons'
<BoilFilter id="boil" />
<DoodleIcon name="check" boilId="boil" size={32} />SVG, PNG, animated SVG or React?
Still SVG
Plain strokes, no animation. It scales to any size and every vector editor opens it, so this is the file to recolor, resize or combine with your own artwork.
Transparent PNG
A 512-pixel image of the check mark on a transparent background, for slide decks, docs, chat apps and anything else that will not take an SVG.
Animated check mark SVG
The animated check mark icon draws itself on stroke by stroke, then keeps "boiling": an SVG filter nudges the line between six slightly different frames, the way hand-inked cartoons never redraw a line in quite the same place. Many slide apps and design tools import an SVG as a still drawing, or not at all, and the animated file can come out blank there, so use the still SVG or the PNG in those apps.
React component
Install @oreo-design/doodle-icons and render <DoodleIcon name="check" />. Mount one <BoilFilter> and pass its id as boilId to get the wiggle; add draw to have the check mark draw itself on when it first appears.
Change the color, size and line weight
The check mark is drawn as strokes, not fills, on a 48 × 48 viewBox with a stroke width of 3.4. That makes three things easy to change. Color: set the stroke to any color, or to currentColor so the icon follows the text color around it. Size: change the width and height and the line stays sharp. Weight: raise or lower stroke-width for a bolder marker or a finer pen.
<!-- inline the still SVG, then: -->
<svg viewBox="0 0 48 48" width="32" height="32"
fill="none" stroke="currentColor" stroke-width="3.4"
stroke-linecap="round" stroke-linejoin="round">…</svg>
// React: the icon takes the color of its parent
<span style={{ color: 'tomato' }}>
<DoodleIcon name="check" boilId="boil" size={32} strokeWidth={3} />
</span>Accessibility
If the check mark is the only thing inside a button or link, give it a name, for example aria-label="Check mark" on the button or alt="Check mark" on the image, so a screen reader says what it does. If it sits next to a word that already says the same thing, mark it aria-hidden="true" so it is not read twice.
The animated file plays its draw-on and wiggle every time it loads. For visitors who ask their system for less motion, serve the still SVG instead: wrap the image in a <picture> element with a <source> for the still check.svg and media="(prefers-reduced-motion: reduce)". This site does the same and shows every icon already drawn.
Hand drawn check mark icon FAQ
Yes. The hand drawn check mark icon is released under the MIT license, so you can use it in personal and commercial work, including client projects, apps and products you sell. No sign-up is needed to download it.
Usually not: slide and design apps show a still frame, or nothing. Use the still SVG or the transparent PNG there, or screen-record the animation in a browser and insert it as a video.
As big as you like. The SVG is a vector, so it stays sharp at any size. The PNG is 512 × 512 pixels, enough for a slide or a document; for anything larger, export from the SVG.
Yes. Change the stroke color and stroke-width in any vector editor, set stroke to currentColor and color it with CSS, or pass size and strokeWidth to the React component.