CSS樣式可以用來修飾圖標以使其更加美觀和適合網頁的整體風格。以下是一些常見的圖標樣式：

.icon {
width: 20px;
height: 20px;
display: inline-block;
background-image: url('icon.png');
background-size: contain;
background-repeat: no-repeat;
}

這段代碼創建了一個20x20像素大小的圖標，使用了一個名為icon.png的背景圖片。使用contain屬性可以讓圖片根據容器大小自適應縮放，而no-repeat屬性則可以保證圖片只顯示一次。

.icon-positive {
color: green;
}
.icon-negative {
color: red;
}

這段代碼為一個帶有positive和negative類別的圖標設置顏色。通過選擇器來定位對應的元素，可以對圖標進行不同的顏色和樣式的設置。注意，這里的顏色是針對文本內容而非背景圖片的。

.icon:hover {
transform: scale(1.2);
}

這段代碼使用了:hover偽類選擇器，表示當鼠標懸停在圖標上時應用的樣式。在本例中使用transform屬性放大圖標，使得用戶能更直觀地感受到該圖標的效果。

通過使用這些樣式，我們可以優化網頁上的圖標設計，提高用戶體驗。