CSS小圖標是網頁設計中必不可少的元素之一，能夠為頁面元素增添生動活潑的效果。以下是一些常用的CSS小圖標及其代碼實現：

/* 社交媒體圖標 */
.icon-facebook:before { content: "\f09a"; }
.icon-twitter:before { content: "\f099"; }
.icon-instagram:before { content: "\f16d"; }
/* 箭頭圖標 */
.icon-up:before { content: "\f062"; }
.icon-down:before { content: "\f063"; }
.icon-left:before { content: "\f060"; }
.icon-right:before { content: "\f061"; }
/* 通用圖標 */
.icon-mail:before { content: "\f0e0"; }
.icon-phone:before { content: "\f095"; }
.icon-lock:before { content: "\f023"; }
/* 心形圖標 */
.icon-heart:before { content: "\f004"; }
/* 購物車圖標 */
.icon-cart:before { content: "\f07a"; }

在CSS樣式中，我們可以利用:before偽元素來添加小圖標，并將Unicode編碼作為content屬性的值。這里使用的是FontAwesome字體庫的圖標，FontAwesome提供了豐富的圖標選擇，并且可以根據需要自行擴展。

以上是一些常用的CSS小圖標，我們可以利用它們來增添頁面的美觀程度，提升用戶體驗。希望對你有所幫助！