CSS是一个重要的网页设计语言，它在网页设计中的作用非常重要。在网页设计中，我们常常需要使用图标来美化页面，而CSS绘制图标则是其中的重要一环。在CSS中，我们可以使用伪元素来绘制图标，并且可以通过修改CSS的样式来改变图标的样式。下面我们来看看如何使用CSS绘制和修改图标。

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: relative;
}

.icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: all .3s ease-in-out;
}

.icon:hover::before {
  opacity: 1;
}

上面的CSS代码可以绘制一个简单的圆形图标，并且在图标的中央加上了一个白色的小圆点。在图标中使用了伪元素::before，通过绝对定位和transform将小圆点居中，并通过opacity属性控制小圆点在不同状态下的透明度。在:hover状态下，小圆点的opacity变成1，出现在图标中。

我们可以根据实际需求修改图标的样式，在这里我们给出一个例子：修改图标的颜色。

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #f00; /*修改图标的颜色*/
  border-radius: 50%;
  position: relative;
}

.icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: all .3s ease-in-out;
}

.icon:hover::before {
  opacity: 1;
}

在上面的代码中，我们只需要修改.icon的background-color属性即可改变图标的颜色。这样，我们就可以根据实际需求来修改图标的样式，使它更符合网页的风格和需求。