20个SVG图标网站分享,精选国内外优质网站!
更新时间:2023-08-10 09:35:39
今天就给大家介绍 20 个可以免费 SVG 图标的网站,肯定足够你使用啦,包括了:即使设计、Ikonate、Simple icons、SVG icons、iconMonstr、Feather icons、iconfont、illustrio、iconSVG、Free icons、Flaticon、Evil icons、icons8、Easyicon、Feathericons、Eva icons、Heroicons、Bootstrap icons、Remix icon、Octicons,当在前端开发过程中需要使用各种图标时,SVG 图标因其矢量性质,在可访问性、SEO、无障碍、性能和维护性方面表现出色,成为了最常用的图标类型之一,而这 20 个网站提供了丰富多样的免费 SVG 图标,适用于各种前端开发和设计项目,一起来看看吧!
1、即使设计:汇合了国内外海量 SVG 图标库
即时设计最大的优势在于它本身是一个打开浏览器就能使用的专业级 UI 设计工具,所有的 SVG 图标都可以直接获取并直接在即时设计进行设计和二次编辑,当然,你也可以直接选择下载这些 SVG 图标,即时设计支持导出各种格式,SVG、JPG、PDF 等甚至支持导出为 Sketch 文件。
即时设计的资源广场有海量的免费可商用素材,其中就不乏超级多的 SVG 图标,3730 个图标文件,49 个图标素材,14 个图标相关的插件,其中不乏很多国内外的大厂图标库:Remix 线性图标库、 Arco Design 图标库、560+Zwicon 通用线性图标等。
点击图片即可获取海量 SVG 图标资源👇🏻
还有很多设计师和前端同学很喜欢的 iconfont,即时设计有一个专门的 iconfont 插件,使用起来非常方便,一键搜索 iconfont 站内图标并直接拖拽到编辑界面,1600W + 精美图标即拿即用。
点击进入即时设计使用 iconfont 插件,一键搜索 iconfont 站内图标并直接拖拽到编辑界面👇🏻
2、Ikonate
Ikonate 是一个提供超过 200 个完全可定制的矢量图标的库。这些图标可以根据你的需要进行多方面的定制,如边框、大小、风格和颜色等属性。这使得你可以将图标与你的设计风格和品牌色彩相匹配。此外,Ikonate 还在无障碍浏览和性能方面进行了优化,确保图标在各种环境下都能正常显示和使用。
3、Simple icons
Simple icons 收录了许多热门品牌的 Logo,并以 SVG 格式提供。每个品牌的 Logo 都附带了相应的背景色,这有助于设计师在工作中更方便地查找和使用这些品牌 Logo。无论是为网站、应用还是其他设计项目,Simple icons 都能提供一系列一致且高质量的品牌 Logo。
4、SVG icons
SVG icons 收录的图标来源于 Dribbble,是一个充满创意和设计灵感的社区。这个库中的所有图标都可以免费使用。你只需点击图标按钮,就能轻松获取图标的代码。这使得在项目中使用这些图标变得非常方便。从 SVG icons 中,你可以找到各种风格和类型的图标,适应不同设计需求。
5、iconMonstr
iconMonstr 是一个提供免费的 PNG/SVG 格式素材下载的网站,收录了 4000 多个图标。用户可以通过搜索功能来查找所需的图标。不仅如此,所有的素材都可以免费下载,这让设计师能够快速获取高质量的图标资源,用于各种项目中。
6、Feather icons
Feather icons 是一款免费且开放源代码的矢量图标集,内含 233 个图标,分为八大类型。这些图标都经过精心设计,采用统一的 24×24 网格,以保持一致性、简约性和功能性。由于这些特点,Feather icons 在开发项目中具有广泛的适用性,能够提供一致的视觉风格和用户体验。
7、iconfont
iconfont 是由阿里巴巴体验团队倾力打造的强大且图标内容丰富的矢量图标库。它提供了矢量图标的下载、在线存储和格式转换等多种功能。为开发者提供了丰富的图标资源,可以满足不同项目的设计需求。iconfont 是一个包含超过 2000 个免费图标图案的平台,这些图标根据 30 种不同的主题进行分类。它提供了两种主要格式,即 SVG 向量图和图标字型(icon Font),用户可以选择单独下载个别图标,也可以一次选择多个类别并将它们打包下载。这个开放原始码项目使用了 CC BY 4.0 授权方式,使用户能够自由地使用这些图标。
8、illustrio
illustrio 是一个全面的素材库,除了图标,还提供在线自定义配色预览和定制功能。该平台涵盖了 15 种不同的图标风格,使设计师能够根据项目需要选择合适的风格。不过目前似乎暂停维护了。
9、iconSVG
iconSVG 是一个在线的自定义 SVG 图标设计素材网站。它提供了常用图标的库,这些图标可以根据你的需要进行二次设计。你可以通过点击官方提供的素材来进行自定义,调整颜色、形状等,以满足你的设计要求。一旦你完成了图标的设计,你可以将其导出并应用到你的项目中。
10、Free icons
Free icons 是一个免费下载各种格式(SVG、PNG、EPS、AI 和 PSD)图标的平台。这里收集了各种不同风格、大小、主题的图标,适用于个人和商业使用。这个平台为设计师提供了多样化的图标资源,方便他们在项目中免费使用。
11、Flaticon
Flaticon 收录的图标都采用单色、平面化的设计风格。这使得这些图标非常适合用于各种网站和商业项目。你可以通过 CSS 或其他方式对这些图标进行重新设计,以使其更符合你的网站风格。此外,Flaticon 还提供了多种格式的下载选项,包括 Webfont、PNG 和 SVG 等,方便你在不同场景中使用。
12、Evil icons
Evil icons 是一套简洁干净的 SVG 图标集,开放源代码。开发者只需几行代码就能轻松调用这些图标,支持多种开发工具和平台。如果需要修改或重新设计图标,Evil icons 还提供了 SVG、AI 和 Sketch 等多种格式的下载选项。
13、icons8
icons8 主要提供免费的平面化设计图标。这些图标可以根据不同平台的设计风格进行筛选,以满足不同项目的需要。icons8 为设计师们提供了丰富的图标选择,有助于他们在设计中添加视觉元素和创意。
14、Easyicon
Easyicon 是由国内开发者创建的图标搜索和下载平台,内含超过六十万个图标,涵盖了多种格式,如 SVG、PNG、ICO、ICNS 等。这个平台为开发者提供了丰富的图标资源,帮助他们轻松地在项目中使用不同格式的图标,从而为项目添加视觉元素和个性化。
15、Feathericons
Feathericons 是一个漂亮且干净的图标库,包含 282 个 SVG 图标。尽管默认情况下它主要使用 SVG 格式,但这也是目前推荐的图标使用方式,因为它能够提供更快的性能和适应性。
16、Eva icons
Eva icons 是一组精美制作的开源图标,包含 480 个图标,提供了 SVG 和 PNG 两种格式。这些图标有两种主要的轮廓和填充风格,并且还支持一些动画效果,如悬停时的缩放、脉动和摇动等,使得图标在项目中能够呈现更生动的效果。
17、Heroicons
Heroicons 是一个由 Tailwind CSS 的创建者构建的开源图标库,包含 165 多个具有填充和轮廓样式的独立图标。每个图标都提供深色和白色版本,从而适应不同的背景。这些图标的设计非常优质且精细,为项目提供了高质量的视觉元素。
18、Bootstrap icons
Bootstrap icons 目前拥有超过 600 个由 SVG 驱动的自定义图标。这些图标与 Bootstrap 5 集成良好,具有出色的设计,适用于不同类型的项目。如果你正在使用 Bootstrap 作为 CSS 框架,那么考虑在项目中使用 Bootstrap 5 图标是一个很好的选择。
19、Remix icon
Remix icon 是一个包含 2149 个漂亮的开源图标的集合,涵盖了各种主题,如业务、通讯、财务、地图等。这些图标提供了多种多样的选择,使得用户可以根据项目需求选择合适的图标。
点击图片即可获取即时设计整理的 Remix 线性图标库👇🏻
https://js.design/community?category=detail&type=resource&id=5ee1bce97e05ed5002fe1e50
20、Octicons
Octicons 是一个由 GitHub 用于其主要网站的图标集,包含 100 多个开源图标。它不仅具有多样性,还在多种开发环境中提供了即用型软件包,如 React、Ruby、Rails、Jekyll 和 Javascript。
以上介绍的 20 个免费 SVG 图标网站为前端开发提供了海量的SVG 图标资源,应该是总结的非常全面了,而且都是我精选出来的优质网站,这些网站涵盖了从专业设计工具、完全可定制的图标库,到知名品牌 Logo 的 SVG 格式。当然,更推荐大家使用即时设计,因为真的很全面耶,不仅有海量的 SVG 图标资源,还可以直接编辑操作这些 SVG 图标资源,即时设计支持一键标注,对于开发同学来说也十分友好。