做网页设计时,图标这东西看着小,其实特别关键。一个合适的图标能让页面立马有感觉,用户点起来也顺手。但找图标的网站太多,质量参差不齐,有些还一堆广告,真让人头疼。
Dribbble
这个站不用多说了吧?很多设计师日常刷的地方。搜 web icons 或 website icon set,能翻出一堆高质量的设计稿。虽然不能直接下载用,但灵感拉满。比如你做个后台系统,看到别人怎么用线条粗细、圆角处理来区分不同功能图标,挺受启发的。
Behance
和 Dribbble 类似,但项目展示更完整。有时候能看到一整套网页图标的演变过程,从草图到最终稿都有。适合那种想把图标风格统一的项目,比如企业官网或者 SaaS 平台。
Iconfinder
这个站主打就是图标资源。免费区有不少可用的 SVG 图标,关键词搜 web interface icons 能筛出适合网页用的小图标。注意看授权协议,有些要署名,商用前记得确认清楚。
Flaticon
背靠 huge 的图标库,搜索“网页图标”或者“网站 UI”能快速出结果。支持按颜色、线条风格筛选,还能一键打包成字体文件。之前给客户做个响应式页面,导航栏那几个菜单、搜索、用户图标全是从这儿拿的,省了不少时间。
Feather Icons
喜欢极简风的可以看看这个。开源图标库,所有图标都是 1px 线条,大小统一,拿来即用。GitHub 上 star 很高,说明用的人不少。代码嵌入也简单:
<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" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
Material Design Icons
谷歌出品,规范性强。如果你做的网页偏 Android 风格或用 Material UI 框架,直接用它家的图标最搭。分类清晰,连“加载中”“网络错误”这种状态图标都有现成的。
平时接私活或者公司赶项目,这些网站我都来回切换着用。Dribbble 找感觉,Flaticon 拿资源,Feather 和 Material 直接集成进代码。图标准了,页面气质自然就上来了。