CSS中的icon是指小图标，用来增加页面的美观性和可读性。通常情况下，我们可以通过三种方式来使用icon。

第一种方式是使用图像文件作为icon。这种方式比较简单，只需要在HTML标签中引用相应的图像文件即可。例如：

第二种方式是使用字体文件作为icon。这种方式可以实现更多种类的icon，并且可以通过CSS来控制icon的颜色和大小。使用字体图标需要先引入相应的字体文件，然后将icon的Unicode码作为类名来显示相应的icon。例如：

第三种方式是使用CSS绘制icon。这种方式可以实现更高度的自定义，但需要比较熟练的CSS技巧。通过CSS3的绘制特性，我们可以使用伪元素来创建icon。例如：

.icon-heart::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
transform: rotate(-45deg);
border-radius: 50%;
border: 3px solid #f00;
box-shadow: 0 0 0 3px #f00, 10px 0 0 3px #f00;
}
.icon-heart::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
transform: rotate(45deg);
border-radius: 50%;
border: 3px solid #f00;
box-shadow: 0 0 0 3px #f00, -10px 0 0 3px #f00;
}