在国内，我想大家基本都在用阿里的iconfont图标库。下面列出了其他10个开源图标库所有库都是完全开源的，因为我已经检查了许可条款和条件。FontAwesome我相信我们大多数人到目前为止至少使用过一次FontAwesome图标，因为它们是最早发布的非常流行的开源图标库之一。截至目前，他们的图库中共有1,588个免费图标和7,842个专业图标。FontAwesome仍然被广泛使用的主要原因之一可能是因为它们提供了种类繁多的图标。我们的网站实际上使用了FontAwesomePro的双色调图标，我们相信与其他类似网站相比，它使我们的网站更具特色。另一个有趣的功能是FontAwesome提供了一个个性化的CDN链接，如果你创建一个帐户，你可以生成一个个性化的CDN链接。这样，您可以有条件地排除常规图标并仅使用双色调图标。当然，您也可以通过直接复制粘贴SVG代码来选择只包含几个图标，如果您的网站上使用的图标不超过20-30个，我推荐您这样做。总之，FontAwesome的使用方法有很多种，比如复制单个图标的SVG源码，下载库或者使用公共或自己的CDN。他们的页面非常适合帮助您开始使用FontAwesome。演示：https://fontawesome.com/Github：https://github.com/FortAwesom...IoniconsIonicons.io是另一个由SVG提供支持的开源图标库，具有457个独立的图标，分为三种不同的样式：轮廓、填充和锐化。我特别喜欢轮廓和形状设计的简洁明了。我绝对建议您在下一个项目中尝试一下。如果您想使用ionicons而不是仅使用独立的SVG，则可以在页脚中包含以下脚本。然后，只需将以下元素添加到您的HTML模板并更改name属性以匹配,像这样：你可以从他们的官方网站上阅读更多关于基本用法的信息。演示：https://ionicons.com/Github：https://github.com/ionic-team...CSS.gg如果您是Reddit开发者社区的活跃成员，也许您已经注意到一个新库图标已发布，该库仅使用CSS进行样式设置。目前，它有704个基于提醒、箭头、代码、设计等类别的独立图标。关于使用CSS还是SVG在性能方面是否更好存在一些争论，但是库的创建者@astritmalsija)已经发布了版本2的SVG、SVGSprite、Figma和Adob??eXD格式提供更广泛的实现。开始使用CSS.gg就像运行npm-icss.gg命令一样简单，然后在head标签中包含以下样式表：当然，还有CDN替代方案，例如使用UNPKG或JSDelivr，像这样：可以从存储库下载在.org的官方入门指南中了解有关CSS.gg入门的更多信息。演示：https://css.gg/Github：https://github.com/astrit/css.ggFeathericonsFeathericons是另一个非常漂亮干净的图标库，包含282个SVG图标。默认情况下，它仅使用SVG作为其主要格式，但这也没关系，因为这是目前推荐的使用图标的方式，因为它是最快的。我喜欢在下载图标之前配置图标大小、笔画宽度和颜色。您还可以通过单击网站右上角的月亮图标来切换明暗模式。开始使用Feathericons就像下载SVG文件并将其包含在您的标记中一样简单，使用src或将其用作嵌入式SVG对象。演示：https://feathericons.com/Github：https://github.com/featherico...Eva图标??Eva图标是一组480个制作精美的开源图标，提供SVG和PNG格式。有两种主要的轮廓和填充样式，我喜欢的是您可以选择在框外缩放、脉动或悬停时摇动的动画。EvaIcons入门非常简单，只需下载SVG或PNG文件并选择您要使用的图标或下载全套图标即可。您还可以通过安装NPM包来包含Eva图标，如下所示：...HeroiconHeroicons是另一个很棒的开源图标库，由TailwindCSS的创建者构建。它具有超过165个带有填充和轮廓样式的独立图标，但每个元素也有黑色和白色版本。图标看起来非常优质且制作精良。开始使用这些图标就像单击其中一个图标并复制可立即在项目中使用的内联SVG代码一样简单。我喜欢他们还在Figma中提供了一个库。如果要包含所有图标，可以从公共存储库下载所有SVG文件。演示：https://heroicons.dev/Github：https://github.com/refactorin...Bootstrap图标几周前，我通过将新的Bootstrap5图标与FontAwesome进行了比较。它目前有超过600个由SVG提供支持的自定义图标，我认为它在设计方面确实很出色。如果您喜欢使用Bootstrap作为CSS框架，您应该考虑在您的下一个项目中使用Bootstrap5Icons。开始使用Bootstrap5图标就像复制SVG代码一样简单，然后您可以按照您认为合适的方式使用它，无论是内联使用它，作为图像源，还是在CSS中创建伪代码类。无论哪种方式，他们的网站都清楚地说明了如何操作。演示：https://icons.getbootstrap.com/Github：https://github.com/twbs/iconsRemixIconRemixIcon是Apache许可下的2149个精美开源图标的大型集合。有多种图标可供选择，例如商业、通讯、金融、地图等等。绝对值得一看。通过下载SVG或PNG版本，或者简单地将嵌入的SVG代码复制到剪贴板，RemixIcon非常易于使用。或者，您可以选择将整个包下载为单个.svg文件或SVGSprite文件。演示：https://remixicon.com/Github：https://github.com/Remix-Desi...OcticonsOcticons是一组超过100个开源图标，Github也将其用于其主要网站。显然，他们已经在通过改进图标的设计和种类来开发该库的第二个版本。Octicons的一个巨大优势是您还可以将它作为React、Ruby、Rails、Jekyll和Javascript中的即用型包获得。以下是您可以用来开始使用Octicons的所有软件包。演示：https://primer.style/octicons/Github：https://github.com/primer/oct...Ikonate最后但同样重要的是，Ikonate是另一个很棒的开源图标库，它有大约100个基于高级图标在平面设计上。它在非常宽松的麻省理工学院许可证下得到了慷慨的许可。导出前，您可以轻松配置图标大小、边框宽度、边框和角以及颜色。在导出的ZIP文件中，您将获得一个包含所有选定内联图标的html文件，以及一个包含单个SVG文件和精灵图像的文件夹。Demo:https://ikonate.com/Github:https://github.com/mikolajdob...最后，请给这些库一个Githubstar，让他们知道他们为支持这些库做了多么出色的工作。如果您还没有决定要在下一个项目中使用的特定图标库，请考虑与您的朋友或同事分享此列表。文章首发于《前端外文精选》微信公众号如果对您有所启发和帮助，欢迎关注、收藏、转发或留言讨论。这是对作者最大的鼓励。作者简介：Web前端工程师，全栈开发工程师，持续学习者。继续阅读其他好评文章2020年12篇Vue.js开发技巧【技巧】CSS如何实现文本对齐？7道简单但有技巧的JavaScript面试题，让你2020年成为前端高手。9个项目【实战】Vue。上）【笔记】Web全栈工程师的自我修养（下）【小贴士】如何防止H5页面弹出手机虚拟键盘？拒绝JavaScript，这三个CSS技巧你一定要用好ChromeDevTools的7个隐藏功能，可以提高你的工作效率【图文教程】同步你的VSCode设置和扩展插件，换手机不用愁更多...
