做PPT、设计网页或者写文档时,总少不了要找个顺眼的小图标。有时候为了一个小小的图示,翻半天电脑都找不到合适的,挺烦人的。其实网上有不少专门提供图标资源的网站,用好了能省不少时间。
IconFont(阿里巴巴矢量图标库)
国内开发者和设计师用得比较多的一个平台。阿里出的这个IconFont,图标种类丰富,像常用的箭头、菜单、搜索、用户头像这类基础图标一应俱全。关键是支持中文搜索,想找“下载”或“设置”,直接打字就能出结果。还能把多个图标加入项目,一键生成字体文件,前端调用也方便。
Fluent UI System Icons
这是微软推出的开源图标集,风格统一,线条简洁,适合做系统界面或办公类应用。如果你做的东西偏向Windows生态或者Office风格,这套图标会很搭。每个图标都有多种尺寸可选,从16×16到48×48都能找到,下载也免费。
Tabler Icons
这是一套开源且更新频繁的图标库,总共几千个图标,涵盖了很多细分场景,比如服务器、数据库、电商订单、天气等。它的特点是线条清晰、结构规整,特别适合后台管理系统使用。网站支持按关键词过滤,还能直接复制SVG代码嵌入页面。
使用小技巧:怎么快速插入图标到网页?
有些网站提供SVG格式下载,可以直接复制代码使用。比如在Tabler Icons里看到一个喜欢的图标,点击后复制SVG源码:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
粘贴到HTML中就能显示,不用额外加载图片资源,加载更快。
注意事项别忽略
虽然大多数图标网站都标明免费可用,但最好还是看看授权说明。有些图标可用于个人项目,商用就得付费或署名。特别是接外包项目的时候,别因为一个小图标惹上版权问题。
平时可以把自己常用的图标网站收藏一下,下次再找就不用重新搜了。效率这东西,往往藏在这些小习惯里。