Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
SVG✨ Premium

Animated Icons

A green check mark and a red cross drawn stroke by stroke inside their circle, then left on screen: on a loop, or just once when you want.

CSSIcons

Updated

Animated Icons — preview ▶ Free account: live preview + 1 free effect

This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →

View in catalogue

3 usage examples

Check mark or cross drawn when leaving the IBAN field of a rowing club membership (Trelmaure) — Animated Icons example 1

① Check mark or cross drawn when leaving the IBAN field of a rowing club membership (Trelmaure)

WhenAt the "Direct debit" step, the member pastes their IBAN and leaves the field: a red cross draws if characters are missing, with the message "IBAN incomplete"; once fixed, a green check mark draws and the confirm button becomes active.
WhyThe drawing pulls the eye to the right spot without a pop-up or banner, and the icon's shape answers before the message is even read.
Settings--chx-size: 26px, --chx-gap: 0, --chx-ok: #22a06b, --chx-ko: #e5484d, --chx-speed: 1.2s, --chx-repeat: 1, transparent background. The page checks the format (27 characters starting with FR) and only shows the right icon; the message sits in an aria-live region.
E-bike check-up: six points verified one after another (Voltigrane) — Animated Icons example 2

② E-bike check-up: six points verified one after another (Voltigrane)

WhenIn the bike's app, the check-up goes through battery, motor, brakes, tyres, lights and chain; as each point finishes, a check mark or a cross draws at the left of its line, and the summary flags the front tyre to pump up.
WhyEach icon drawing itself marks the end of one check: you follow the progress line by line and the single cross stands out in the list.
SettingsOne root per line with a single visible icon, --chx-size: 22px, green #4ade80, red #f87171, --chx-speed: 1s, --chx-repeat: 1. The page reveals the icons one by one, about every 0.45 s.
Spot-the-difference game: a check mark on each difference found, a cross on a miss (Pimbrelou) — Animated Icons example 3

③ Spot-the-difference game: a check mark on each difference found, a cross on a miss (Pimbrelou)

WhenOn a children's magazine games page, the child taps the right-hand picture: a check mark draws on the difference found and the counter goes up; a tap elsewhere brings up a cross that fades after a moment.
WhyThe small drawing rewards each find right on the picture, and the cross corrects without scolding; the check marks left in place show what has already been found.
SettingsOne root per difference (check mark only) and one for misses (cross only), --chx-size: 34px, green #16a34a, red #dc2626, --chx-speed: 1s, --chx-repeat: 1, set on a white disc to stay readable over the drawing.

How it works

Each icon is a 60×60-unit SVG: a circle of radius 26 (.chx-ring, 3-wide stroke) and, inside, the check mark (.chx-tick) or the cross's two bars (.chx-bar-1, .chx-bar-2), as 4-wide strokes with rounded ends. All carry pathLength="100" and a 100-long dash that the animation slides from 100 to 0 to reveal the stroke.

Everything runs on a single cycle (--chx-speed, 2.4 s): the circle draws during the first 35%, the check mark between 25 and 50%; for the cross, the first bar between 25 and 40%, the second between 38 and 53%. The icon then stays complete until the end of the cycle. When looping (the default), it redraws every 2.4 s; with --chx-repeat: 1, it draws once and stays.

Every stroke follows the same clock as its circle: the cross draws once per cycle, without blinking. Both icons work on their own: keep the one you need. An icon hidden (display: none) and shown again redraws from the start; --chx-play: paused makes it wait, empty.

Accessibility

  • Readable name: each SVG carries role="img" and a <title> ("Valid", "Error"; in French "Valide", "Erreur"), which screen readers announce. Change that text if the icon means something else.
  • Not colour alone: the check mark and the cross have different shapes. For form validation, add a written message in an aria-live region: the icon appearing is not announced on its own.
  • Reduced motion: with prefers-reduced-motion: reduce, the icons show complete straight away (measured in all three engines: 0 running animations).
  • Contrast: on the shipped dark background, the green reaches 7.8:1 and the red 5.3:1. On a white background, the #10b981 green drops to 2.5:1: pick a darker green (#15803d) through --chx-ok.

Browser compatibility

Pure CSS. pathLength on a circle needs Chrome 57, Firefox 61 and Safari 14; reduced motion, Chrome 74 and Firefox 63. Measured in Chromium 151, Firefox 153 and WebKit 26.5: 0 errors, each stroke restarts only once in 3 s, two independent copies, nothing overflowing at 390 px.

Chrome 74+✓ Full (measured)
Firefox 63+✓ Full (measured)
Safari 14+✓ Full (measured in WebKit 26.5)
Edge 79+✓ Full (Chromium engine)
Safari iOS 14+✓ Full (WebKit engine, not tested on a device)
Chrome Android 74+✓ Full (Chromium engine)

Without CSS animations, the icons show complete. Before Safari 14, pathLength is ignored for dashes: the circles draw as dotted lines.

The code

HTML structure to paste into your page (the CSS + JS come with your purchase):

index.html — structure 
<div class="fx-0603-root">
  <svg class="chx-icon chx-check" viewBox="0 0 60 60" role="img">
    <title>Valid</title>
    <circle class="chx-ring" pathLength="100" …/>
    <path class="chx-tick" pathLength="100" d="…"/>
  </svg>
  <svg class="chx-icon chx-cross" viewBox="0 0 60 60" role="img">
    <title>Error</title>
    <circle class="chx-ring" pathLength="100" …/>
    <path class="chx-bar chx-bar-1" pathLength="100" d="…"/>
    <path class="chx-bar chx-bar-2" pathLength="100" d="…"/>
  </svg>
</div>

One-time payment, no subscription — the code is yours forever

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
--chx-repeat infinite 1: the icon draws once and stays on screen.
--chx-play running paused: the icon waits, empty, until set back to running.
--chx-speed 2.4s Length of a cycle; the drawing takes roughly the first half.
--chx-ok and --chx-ko #10b981 and #ef4444 Colours of the check mark and of the cross (circle included).
--chx-size and --chx-gap 60px and 30px Size of each icon and space between the two.
--chx-bg and --chx-min-h #0a0a0f and 300px Frame background and minimum height; transparent and 0 inside a field or a list.

FAQ

Delete the unneeded SVG from the HTML, or hide it with CSS (display: none). Each icon has its own animations and works alone.
With --chx-repeat: 1, hide the icon then show it again: icon.style.display = 'none'; icon.getBoundingClientRect(); icon.style.display = '';. The browser then restarts the animation from the beginning.
Yes: in one of the SVGs, replace the paths and keep pathLength="100". A stroke classed chx-tick draws after the circle; chx-bar-1 then chx-bar-2 give two successive strokes.