免费图标素材网站：8 个优质免费图标库，800 万 + 矢量图标资源

做完设计最难的不是创意，而是找到合适的图标。我以前经常花半小时就为了找一个"购物车"图标，还担心有版权问题。后来整理了自己常用的几个图标网站，效率直接翻倍。

今天把这8个我验证过的免费图标网站分享出来，全部可商用，不用再担心版权风险。

一、Iconfont：中文搜索最顺手

Iconfont是我最早开始用的，因为是阿里出的，中文搜索特别顺手。几百万个图标，日常需求基本都能覆盖。你可以直接搜"购物车"中文关键词，而不用像国外图标库那样搜"shopping-cart"英文。这个看似微小的区别，在实际使用中的效率累积是很可观的。

不过质量参差不齐，同一个关键词搜出来几十个图标，好的坏的都有。我的经验是优先看官方图标库——Iconfont上有许多经过审核的品牌官方图标库，品质有保障。或者按下载量排序，大家都在用的通常不会差。另外，多看图标的创作者信息，一些资深设计师上传的整套图标通常质量更高。

Iconfont最大的优势是中文生态：中文搜索准确、中文文档完善、国内访问速度快。对于国内设计师来说，这是最友好的图标库之一。Iconfont还提供图标字体、SVG、AI等多种下载格式，可以方便地导入各种设计工具和开发环境。

二、Heroicons：做后台系统的首选

后来做UI项目时发现了Heroicons。数量不算多，大概三百来个，但每一个都做得很精致——线条粗细统一，圆角一致，用在后台系统或者SaaS产品上特别合适。Heroicons是由Tailwind CSS团队出品的，设计理念和Tailwind CSS的极简风格高度吻合，如果你在用Tailwind CSS开发项目，Heroicons是天然的最配。

最方便的是有React和Vue组件，开发的时候直接引入就行，不用自己处理SVG。import { ShoppingCartIcon } from '@heroicons/react/24/outline'这行代码搞定，还能通过className直接调整颜色和大小。

Heroicons提供两种风格——Outline（描边）和Solid（填充），可以根据场景切换使用。比如导航栏默认用Outline风格，选中状态用Solid风格，这种微妙的视觉变化能让界面更有层次感。

三、Feather Icons：极简风格

Feather Icons适合走极简风格的项目。线条很轻（默认1.5px），圆角一致，留白充足，看起来特别清爽。我一般做轻量级网站或者简约风的PPT时会优先选它。它的图标在小尺寸下依然保持清晰可辨，这一特点对移动端界面尤为重要。

不过它已经不怎么更新了。需要更多图标的话可以试试Lucide，算是Feather的延续版——由原Feather Icons的核心维护者团队主动分叉，设计语言完全一样，但图标数量扩展到了超过1500个，并且社区活跃，持续更新中。Lucide的开发者体验更好——Tree Shaking友好、TypeScript支持完善、各种框架的官方包齐全。从Feather迁移到Lucide基本上是无损的，API完全兼容。

四、Tabler Icons：被低估的宝藏

Tabler Icons是我觉得最被低估的一个。四千多个图标，风格高度统一，数量比Heroicons多十几倍，质量也没差多少。每周还在更新，我后来几乎所有项目都优先考虑它。

Tabler Icons的线条粗细默认2px，圆角半径2px，整体风格现代简洁。它还提供Figma文件，设计师可以直接在Figma中使用，非常方便——拖拽即可，不需要下载再上传。Tabler Icons还有一个特别实用的功能：你可以在它的网站上实时调整图标线条粗细（0.5px到4px之间），然后一键下载为这个粗细下的SVG，非常适合需要特定线条风格的场景。

对于开发者，Tabler Icons同样友好——提供React、Vue、Angular、Svelte、React Native等各平台的包，甚至还有Flutter的包。

五、Font Awesome：老牌就是稳

Font Awesome老牌图标库了，免费版两千多个图标够用。最大的优势是CDN引入太方便了——<i class="fa-solid fa-cart-shopping"></i>一行代码就能用。要找社交媒体品牌图标的话，它是覆盖最全的，包含微信、支付宝、抖音、小红书、B站等中国平台的品牌图标。

Font Awesome有免费和付费两个版本。免费版包含超过2000个图标，覆盖大部分日常需求。付费版则包含超过7000个图标和更多风格变体。对于个人项目和小型商业项目，免费版完全够用。需要注意的是，Font Awesome的免费版要求遵循其许可证条款（通常是CC BY 4.0），在需要署名的场合记得保留其署名信息。

六、Bootstrap Icons 和 Material Icons

如果你在用对应的框架，配套使用会比较和谐。特别是Material Icons，填充、轮廓、圆角、尖锐、双色五种风格可选，一个场景一个味道。一套图标可以营造出五种不同的视觉权重。

Material Icons是Google出品的，与Google的设计语言一脉相承。如果你的产品遵循Material Design规范，使用Material Icons是最自然的选择。它还有一个优势是作为Google Fonts的一部分，加载速度极快，全球CDN覆盖。

Bootstrap Icons则适合Bootstrap项目，风格简单够用，目前也有超过2000个图标。虽然设计感一般，但胜在与Bootstrap组件的视觉融合度极高。

七、其他值得关注的图标库

• Lucide：Feather Icons的继任者，超过1000个图标，持续活跃更新，目前社区增长最快的一个
• Ionicons：专为移动应用设计的图标库，iOS和Android风格兼备。更妙的是，它还包含iOS和Android两套图标，可以根据用户设备自动切换原生风格
• Phosphor Icons：六种粗细变体（Thin, Light, Regular, Bold, Fill, Duotone），适合需要多层次图标权重的场景。比如标题用Bold、正文用Regular、辅助说明用Thin
• Remix Icon：阿里出品的中文图标库，风格介于Iconfont和Heroicons之间，图标数量超过2500个。特别适合需要中文语境表达的场景
• IconPark：同样出自字节跳动，最大特色是可以在线自定义图标——调整线宽、颜色、背景形状，是图标库和设计工具的混合体

八、最重要的使用原则

别混用图标库

不同库的线条粗细、圆角大小、设计风格不一样，混在一起会显得很粗糙。一次只用一套，顶多做些颜色上的调整。如果你确实需要混用（比如Heroicons不够用了想找其他库补充），至少保证线条粗细一致（比如都是2px），并尽量用圆角风格接近的图标。一个实用的办法是：先选定一个主力图标库覆盖80%的需求，其余图标用主力库的风格手动微调补充。

能下载SVG就下载SVG

矢量格式随意缩放改颜色，比PNG好用太多了。SVG还可以直接嵌入HTML或React组件中，通过CSS动态修改颜色和大小——style="color: red; width: 24px"。SVG文件体积也很小，通常每个图标只有几百字节，完全不是性能负担。如果你的项目支持Icon Font（图标字体格式），把字体包托管在CDN上也是不错的选择，一次加载就能用所有图标。

注意许可证

虽然本文推荐的都是免费商用的图标库，但使用前最好确认一下具体的许可证类型。有些需要署名（CC BY），在所使用的产品或文档中保留许可声明即可；有些完全不用（CC0/MIT），可以直接用不需要任何附加条件。浏览器插件License Checker可以快速识别网页上资源的许可证类型。

SVG优化

下载后的SVG通常包含编辑器生成的冗余信息（注释、编辑器元数据、不必要的路径节点等），可以用SVGOMG或SVGO将SVG压缩到最小体积。对于Web项目这能显著减少资源加载量。

图标一致性检查清单

• [ ] 同一页面使用同一图标库
• [ ] 线条粗细统一（推荐2px）
• [ ] 图标尺寸统一（推荐24x24或20x20）
• [ ] 颜色风格统一（单色或双色，避免在同一页面出现多种配色方案）
• [ ] 圆角风格统一（方形、小圆角、大圆角不要混搭）
• [ ] 可见区域对齐（图标的"视觉重心"应在基线上居中，而非数学中心对齐）

收藏起来，下次用图标别再百度随便搜了。把这些加入浏览器书签栏，以后做设计或写前端时直接访问最合适的那个。一套好的图标库选好了，整个项目的视觉质感能提升一个档次。