1、直接去复制自己喜欢的图标svg
2、粘贴到html里面
3、设置css中svg path的fill属性颜色色值，就可以改变icon图标的填充色，p话不多说，上代码↓
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>-svg</title><style>svg, svg * {transition: .382s;-moz-transition: .382s;-webkit-transition: .382s;-o-transition: .382s;-khtml-transition: .382s;cursor: pointer;}svg:hover path {fill: blue;}</style></head><body><svg t="1583591575476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="/2000/svg" p-id="4136" width="128" height="128"><path d="M512 1013.76C234.88512 1013.76 10.24 789.11488 10.24 512S234.88512 10.24 512 10.24s501.76 224.64512 501.76 501.76-224.64512 501.76-501.76 501.76z m278.15936-337.5104l0.4096 0.24576 0.01024-0.50176 0.03072-0.01024-0.03072-0.02048 1.9968-323.328-115.34336-71.3216-163.18464 92.2624 120.95488 70.656 0.18432 137.40032-121.1392 69.76512V839.68l276.11136-163.4304zM392.72448 442.4704L514.048 372.60288V184.32L237.71136 348.91776l14.67392 8.86784-14.86848-8.97024L235.52 672.67584l115.34336 71.3216 163.18464-92.2624-120.95488-70.656-0.18432-138.496-0.18432-0.1024z"p-id="4137"></path></svg></body></html>
不出意外，浏览器呈现的效果如下
