Why Draw the Checkmark with SVG and How to Control It with CSS
The HTML <input type="checkbox"> element is convenient, but it offers limited design flexibility.
By combining CSS and SVG, you can create checkboxes where the checkmark’s shape is fully customizable.
This page introduces a practical and accessible implementation that uses SVG to draw the checkmark and CSS to control its state.
Please copy and paste the common CSS below.
Using the general sibling selector (~) along with :first-of-type and :last-of-type, the presence or absence of the check state is used to toggle between two SVG images.
Additionally, by placing the <label> element around both the checkbox and its text, the checkbox can be toggled by clicking the text without needing to associate the elements using for="id".
<style>
label.mam-svg-chkbox{
font-size:24px; /* Set to any size you prefer */
user-select: none; /* Set to any size you prefer */
}
label.mam-svg-chkbox>input[type="checkbox"]{
display: none;
}
label.mam-svg-chkbox>svg:first-of-type{
display:none;
width:0.9em;
height:0.9em;
vertical-align:baseline;
}
label.mam-svg-chkbox>svg:last-of-type{
display:inline-block;
width:0.9em;
height:0.9em;
vertical-align:baseline;
}
/* General sibling selector: show when checked */
label.mam-svg-chkbox>input[type="checkbox"]:checked ~ svg:first-of-type{
display:inline-block;
}
/* General sibling selector: hide when checked */
label.mam-svg-chkbox>input[type="checkbox"]:checked ~ svg:last-of-type{
display:none;
}
label.mam-svg-chkbox>span{
font-size:1em;
color:#222;
}
</style>
Checkbox #1 Using a Square-Frame SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox" />
<svg viewBox="0 0 64 64"> <!-- SVG image when ON -->
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#333;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64"> <!-- SVG image when OFF -->
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
</svg>
<span>Option</span>
</label>
Checkbox #2 Using a Square-Frame SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<rect style="fill:#333;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<span>Option</span>
</label>
Checkbox #1 Using a Rounded-Square SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#333;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
</svg>
<span>Option</span>
</label>
Checkbox #2 Using a Rounded-Square SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<rect style="fill:#333;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<span>Option</span>
</label>
Checkbox #1 Using a Circular-Frame SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#333;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64">
<circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
</svg>
<span>Option</span>
</label>
Checkbox #2 Using a Circular-Frame SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<circle style="fill:#333;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64">
<circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<span>Option</span>
</label>
Red Checkbox #1 Using a Square-Frame SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox" />
<svg viewBox="0 0 64 64"> <!-- SVG image when ON -->
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M14,32 L8,36 L24,54 L58,10 L24,40 z" style="fill:#D00;stroke:none;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64"> <!-- SVG image when OFF -->
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
</svg>
<span>Option</span>
</label>
Red Checkbox #2 Using a Square-Frame SVG Icon
<label class="mam-svg-chkbox">
<input type="checkbox" />
<svg viewBox="0 0 64 64"> <!-- SVG image when ON -->
<rect style="fill:#CCC;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M14,32 L8,36 L24,54 L58,10 L24,40 z" style="fill:#D00;stroke:#333;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<svg viewBox="0 0 64 64"> <!-- SVG image when OFF -->
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M14,32 L8,36 L24,54 L58,10 L24,40 z" style="fill:#FFF;stroke:#333;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;" />
</svg>
<span>Option</span>
</label>
Checkbox #1 Using a Power-Icon SVG with a Square Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#03F;stroke-width:8;" />
<line style="fill:#none;stroke:#03F;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<svg viewBox="0 0 64 64" class="mam-svg-chkbox-off">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#F44;stroke-width:8;" />
<line style="fill:#none;stroke:#F44;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<span>Option</span>
</label>
Checkbox #2 Using a Power-Icon SVG with a Square Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<rect style="fill:#26F;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
<line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<svg viewBox="0 0 64 64">
<rect style="fill:#F44;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
<line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<span>Option</span>
</label>
Checkbox #3 Using a Power-Icon SVG with a Square Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#000;stroke-width:8;" />
<line style="fill:#none;stroke:#000;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#888;stroke-width:8;" />
<line style="fill:#none;stroke:#888;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<span>Option</span>
</label>
Checkbox #1 Using a Power-Icon SVG with a Circular Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#03F;stroke-width:8;" />
<line style="fill:#none;stroke:#03F;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<svg viewBox="0 0 64 64">
<circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#F44;stroke-width:8;" />
<line style="fill:#none;stroke:#F44;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<span>Option</span>
</label>
Checkbox #2 Using a Power-Icon SVG with a Circular Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<circle style="fill:#26F;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
<line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<svg viewBox="0 0 64 64">
<circle style="fill:#F44;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
<line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<span>Option</span>
</label>
Checkbox #3 Using a Power-Icon SVG with a Circular Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#000;stroke-width:8;" />
<line style="fill:#none;stroke:#000;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<svg viewBox="0 0 64 64">
<circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
<path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#888;stroke-width:8;" />
<line style="fill:#none;stroke:#888;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
</svg>
<span>Option</span>
</label>
Checkbox #1 Using a Mail-Icon SVG with a Square Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M14,18 L49,18 L32,32 M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#333;stroke:none;" />
</svg>
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M14,18 L49,18 L32,32 M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#999;stroke:none;" />
</svg>
<span>Option</span>
</label>
Checkbox #2 Using a Mail-Icon SVG with a Square Frame
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg viewBox="0 0 64 64">
<rect style="fill:#333;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M14,18 L49,18 L32,32 M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#CCC;stroke:none;" />
</svg>
<svg viewBox="0 0 64 64">
<rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
<path d="M14,18 L49,18 L32,32 M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#CCC;stroke:none;" />
</svg>
<span>Option</span>
</label>
Checkbox Using a Face-Icon SVG
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg style="width:32px;" viewBox="0 0 64 64">
<path d="M4,32 A24,24 0,0,0 60,32 A24,24 0,0,0 4,32 z"
style="fill:#FF0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
<path d="M18,36 A12,10 0,0,0 46,36 z"
style="fill:#FF0;stroke:#222;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
<path d="M24,16 A3,4 0,0,0 24,28 A3,4 0,0,0 24,16"
style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
<path d="M40,16 A3,4 0,0,0 40,28 A3,4 0,0,0 40,16"
style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
<path d="M4,32 A24,24 0,0,0 60,32 A24,24 0,0,0 4,32 z"
style="fill:#DDD;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
<path d="M18,42 A16,14 0,0,1 46,42"
style="fill:none;stroke:#222;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
<path d="M24,16 A3,4 0,0,0 24,28 A3,4 0,0,0 24,16"
style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
<path d="M40,16 A3,4 0,0,0 40,28 A3,4 0,0,0 40,16"
style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>
<span>Option</span>
</label>
Checkbox Using a Heart-Icon SVG
<label class="mam-svg-chkbox">
<input type="checkbox">
<svg style="width:32px;" viewBox="0 0 64 64">
<rect style="fill:#999;stroke:#666;stroke-width:2;" x="2" y="2" width="60" height="60" />
<path d="M32,52 l-16,-16 a10,10 0,1,1 16,-4 a10,10 0,1,1 16,4 z" style="fill:#F33;stroke:none;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
<rect style="fill:#DDD;stroke:#666;stroke-width:2;" x="2" y="2" width="60" height="60" />
<path d="M32,52 l-16,-16 a10,10 0,1,1 16,-4 a10,10 0,1,1 16,4 z" style="fill:#FFF;stroke:none;" />
</svg>
<span>Option</span>
</label>