SVG checkmark generator — animated success, error, warning and info icons

How to use the SVG checkmark generator

1. Pick the Icon: Success ✓, Error ✕, Warning ! or Info i.
2. Choose a Style: Solid (white mark on a filled circle) or Outline (coloured mark and ring).
3. Type a hex Colour, or leave it blank for the icon’s default colour.
4. Set Size (16–256 px) and Mark thickness (1–8).
5. Leave Draw animation ticked for the drawing effect, then copy the code or download the file, which is named after the icon, for example success.svg.

What it does and when to use it

Use these icons for feedback after an action: a tick when a form is sent or a payment goes through, a cross when an upload fails, a warning beside a field that needs attention, or an info mark in a help box. The short drawing animation makes a success state feel finished without a heavy animation library.

They pair naturally with the SVG spinner generator: show the spinner while something loads, then swap it for the tick. For status labels such as “build passing”, the SVG badge generator is a better fit. To check that white marks on your chosen colour are readable, use the colour contrast checker.

How it works

Every icon is drawn on a 52 × 52 grid: a circle with a radius of 25 and one path for the mark. The width and height are set to your size, so the icon scales cleanly.

The drawing effect uses the stroke-dash trick. The circle’s dash and offset are both 157, about its circumference (2 × π × 25), so it starts invisible and draws in over 0.6 s as the offset falls to 0. For solid icons the filled disc fades in from 0.3 s. The mark then draws over 0.35 s, starting at 0.5 s. Each mark has its own length, for example 36 for the tick and 52 for the cross. All of this is CSS inside the SVG, built in your browser.

Worked examples

Default success tick. Solid, green, 64 px, animated. The style block starts stroke-dasharray:157;stroke-dashoffset:157;animation:c .6s ease-out forwards, and the tick path is M15,27 L23,35 L38,18 in white.

Static outline error. Error, Outline, animation off. There is no style block, and the cross is <path class="m" d="M17,17 L35,35 M35,17 L17,35" fill="none" stroke="#dc2626" with a red ring around it.

Small purple warning. Warning, solid, colour #7c3aed, 24 px, no animation. The tag reads width="24" height="24" role="img" aria-label="Warning", and the disc is filled #7c3aed with a white “!” on top.

Limits and tips

• Mark thickness is measured on the 52-unit grid, so it scales with the icon. At 26 px, thickness 4 draws a 2 px line; small icons may need a thicker mark.
• A program that reads the style but does not run animations could leave the animated icon invisible. Untick Draw animation for emails and documents.
• The icon has a fixed circle. For a square or a different outline shape, edit the SVG after download.