导入

使用链接内嵌

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
</svg>

导入文件

相关属性

设计原则

只用一套图标，混用会让界面看起来不好看
只应该用 SVG 格式或者 icon 格式，不要用jpg等图片格式
将图标符合网页个性，具有相似的圆度和重量与框架。例如左边的字体是偏圆，因此图标也应是圆形并带点不规则
图标的颜色和文字的颜色很相关，如果想让图标不突出，作为辅助信息显示，那么就应该和文字颜色一样。如果想让图标抓住更多注意力，那么就用不同颜色。
图标的含义应符合文本含义，不能让用户困惑，这种图标单独看也不知道有什么含义
图标的大小不应该大于它们被设计的大小，如果必要的话可以手动缩小，然后用更大的形状覆盖，这样就保留规模但让线条变小。如果图标本身包含很多信息，那么也可以放大

应用场景

通常都是将图标用在文本旁边来帮助理解
或者用图标构建功能块，描述产品的特性
放置在选项卡中的选项或者按钮上表达含义，但并不能只放图标，因为不是所有人都能理解
在列表项中替换原本的圆点

工具网站

heroicons
阿里巴巴矢量图标库
Phosphor icons
ionicons
ICONS8