在HTML中，如果要制作一個小方框打鉤的圖標，可以使用以下代碼：

<label>
<input type="checkbox" checked>
<span class="checkmark"></span>
</input>
</label>

這里我們使用了HTML標簽：label、input、span，并為span添加了一個類名checkmark，以便我們可以在CSS中對其樣式進行修改。

其實整個代碼就是一個帶有復選框的標簽，將復選框隱藏后，標簽的偽類:before偽類可以用來制作小方框圖標，偽類:after可以制作對勾圖標。使用:checked偽類可以在復選框被選中時，對勾圖標的顯示與隱藏狀態。

下面是一個簡單的CSS樣式代碼：

.checkmark {
display:inline-block;
position:relative;
width: 15px;
height: 15px;
border: 1px solid #ccc;
}
.checkmark::before {
content: "";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:5px;
height:9px;
border:solid #ccc;
border-width: 0 2px 2px 0;
transform:rotate(45deg);
}
input[type="checkbox"] {
display:none;
}
input[type="checkbox"]:checked + .checkmark:after {
content: "";
display:block;
position:absolute;
top:-1px;
left:0;
right:0;
bottom:0;
margin:auto;
width: 5px;
height:9px;
border:solid #fff;
border-width: 0 2px 2px 0;
transform:rotate(45deg);
}

在樣式文件中，我們使用了:before和:after偽類，對小方框和打鉤圖標進行樣式調整。而我們也通過display:none屬性，將input標簽卡在checkmark外部，并使用:checked偽類實現了圖標的切換效果。

最后的效果將是下面這樣的：