CSS中，我們可以通過給圖標添加:hover以及:active偽類完成點擊圖標變色的效果。

.icon {
width: 50px;
height: 50px;
background-color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
cursor: pointer;
transition: background-color .3s ease-out;
}
.icon:hover {
background-color: #eee;
}
.icon:active {
background-color: #ccc;
}

首先，我們定義了一個.icon類，表示我們要使用這個類來作為圖標的樣式。我們設置了它的寬度和高度、背景色、居中等樣式。我們還將它的鼠標指針設置為手形，這樣在鼠標移到它上面時，鼠標就會出現手型，讓用戶知道這是可以點擊的。

接下來，我們使用:hover偽類來設置當鼠標懸浮在這個圖標上時的樣式。我們將背景顏色設置為淺灰色，這樣可以增強用戶對圖標的感知，讓用戶知道他們正在操作的是哪個圖標。

最后，我們使用:active偽類來設置當用戶點擊這個圖標時的樣式。我們將背景顏色設置為深灰色，這樣可以讓用戶知道他們已經成功地點擊了該圖標，并且圖標已經執行了相應的操作。

在上面的代碼中，我們還使用了transition屬性來實現漸變效果，這樣可以讓圖標的顏色變化更加平滑自然。