CSS图标通常是使用Font Awesome这样的图标字体库来实现。通过在HTML文件中引用Font Awesome库，在CSS中通过字体名称来指定所需图标。如下代码所示：
<!-- 引用Font Awesome库 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndKOQ9gxyhB"
crossorigin="anonymous">
<!-- 在CSS中指定图标 -->
.icon {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
color: #f00;
}
<!-- 在HTML文件中使用图标 -->
<i class="fas fa-heart icon"></i>通过CSS中设置的字体名称和FontAwesome库中所对应的图标的类名，即可在HTML文件中使用对应的图标，例如上述代码中的红色爱心图标。
CSS颜色可以通过设置颜色名称或者十六进制数值来调整颜色。例如：
.icon {
color: red;
}
.background {
background-color: #fff;
}在实际设计中，可以根据具体场景和需求来选择合适的图标和颜色，以达到更好的视觉效果和用户体验。