CSS小图标是一种常用的图形元素，用于增强网站的美观性和可读性。它们可以用来作为按钮、菜单、导航、标签等界面元素的视觉表示，以及其他各种功能。

通常情况下，我们使用CSS伪元素来创建这些小图标。伪元素是CSS中的一种特殊选择器，允许我们将样式应用于文档中不存在的元素。通过使用伪元素，我们可以轻松地绘制简单的图标。

/* 在CSS中使用:before伪元素 */
.icon {
width: 16px;
height: 16px;
display: inline-block;
content: "";
background: url(icon.png) no-repeat;
}
/* 在CSS中使用:after伪元素 */
.button:before {
content: "\f0de";
font-family: FontAwesome;
font-size: 14px;
font-weight: normal;
margin-right: 5px;
}
/* 在CSS中使用:empty伪元素 */
.tag:empty {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ff0000;
border-radius: 50%;
}

上述代码中，我们使用了三种不同的伪元素，分别是:before, :after和:empty。其中，:before和:after元素可用于在指定元素的前面或后面添加内容，而:empty元素则可以匹配没有内容的元素。

通过这些简单的CSS代码，我们可以轻松地创建出各种不同的小图标，并将它们应用于各种不同的设计场景中。