CSS繪制圖標是一種很方便的技巧，它可以通過直接在頁面樣式表中編寫樣式來實現懸停，點擊或其他交互效果，這些都是HTML還無法實現的。

在CSS中，我們可以使用偽元素來實現繪制圖標，偽元素可以實現各種各樣的效果，比如模擬元素，實現具體的形狀和顏色等，使用起來非常靈活。

下面是使用CSS和偽元素繪制一個簡單的心形圖標的示例：

.icon-heart {
display: inline-block;
width: 20px;
height: 20px;
position: relative;
background-color: #ff5a5f;
transform: rotate(-45deg);
}
.icon-heart:before,
.icon-heart:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff5a5f;
border-radius: 50%;
}
.icon-heart:before {
transform: translateX(-50%);
}
.icon-heart:after {
transform: translateY(-50%);
}

在這個示例中，我們首先創建一個匿名內聯塊級元素，其樣式定義了圖標的尺寸，顏色和位置，并將它旋轉45度。然后使用:before和:after中的偽元素分別繪制出兩個圓實現心形關鍵圖標。

在實際應用中，我們可以根據具體的設計要求編寫不同的CSS樣式，實現出各種形狀，顏色，大小不同的圖標。CSS繪制圖標具有靈活，易于維護的特點，能夠減少網頁加載速度，實現優化的用戶體驗。