AIMRAN
HTML + CSSCheckboxes

Two-stroke tick checkbox

The short stroke draws first and the long one follows, like a tick made by hand with a pen.

Settings

16px
1x

Code

<label class="uv-ck2k"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path class="p1" d="M5 12.5L10 17.5" pathLength="1"/><path class="p2" d="M10 17.5L19.5 7.5" pathLength="1"/></svg></span>Verified</label>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Checkboxes

Self-drawing checkbox

CheckboxesHTML + CSS

Round fill checkbox

CheckboxesHTML + CSS

Confetti burst checkbox

CheckboxesHTML + CSS

Strikethrough task item

CheckboxesHTML + CSS

3D flip checkbox

CheckboxesHTML + CSS

Heart like button

CheckboxesHTML + CSS

Bouncy drawn checkbox

CheckboxesHTML + CSS

Circle fill checkbox

CheckboxesHTML + CSS

Where to use it

Drawing the tick in two strokes gives it a handwritten feel that suits checklists people take seriously: the onboarding steps of a new tool, the “I have read the instructions” box before an online exam or a pre-flight list in a booking app. It feels careful rather than flashy. A hand-drawn checkbox in CSS, with a soft tinted box.

Because the box is filled with a light tint, not a solid colour, it stays readable on busy pages. If your accent colour is pale, darken it a little so the tick keeps enough contrast.