上周我在 reddit](https://www.reddit.com/r/web_design/comments/g8f43y/which_is_your_favorite_icon_font_library/)上发起了一个[线程,问开发者一个简单的问题:你最喜欢哪个图标库?这篇文章很快变得流行起来,我发现了很多其他我从未听说过的很棒的开源图标库。我决定创建一篇博文,列出基于 Reddit 线程的 10 个最佳开源图标库。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--FwSmH0q1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// Themesberg.s3.us-east-2.amazonaws.com/public/posts/10-open-source-svg-icon-libraries/10-open-source-icon-libraries.jpg)

请注意,下面列出的所有库都是完全开源的,因为我已经检查了许可条款和条件。以下库的另一个条件是它们需要具有现代和最新的设计。那么让我们开始吧:

字体真棒

我相信到目前为止,我们中的大多数人都至少使用过一次 Font Awesome 图标,因为它们是最早发布的非常流行的开源图标库之一。截至目前,他们的图库中共有1,588 个免费图标和7,842 个专业图标。

可能 Font Awesome 仍然被大量使用的主要原因之一是因为它们必须提供大量的各种图标。我们的网站实际上使用了 Font Awesome Pro 的双色调图标,我们相信它使我们的网站与其他类似网站相比更加突出。

Font Awesome 必须提供的另一个有趣功能是个性化的 CDN 链接,如果您创建帐户,则可以生成该链接。通过这样做,您可以有条件地排除常规图标,但仅使用双色调图标。

当然,您也可以通过直接复制粘贴 SVG 代码来选择仅包含几个图标,如果您在网站上使用的图标不超过 20-30 个,我建议您这样做。

总之,使用 Font Awesome 有很多方法,例如复制单个图标的 SVG 源,下载库或使用公共或他们自己的 CDN。他们有一个很棒的页面可以帮助您开始使用 Font Awesome。

• 演示

• Github 存储库

离子

Ionicons.io 是另一个由 SVG 驱动的开源图标库,包含 457 个独立图标,具有三种不同的样式:轮廓、填充和锐利。我特别喜欢轮廓和形状设计的简洁明了。我肯定会建议您在下一个项目中尝试一下。

使用 ionicons 有很好的文档,如果你想使用整个库而不是单独的 SVG,你可以在页脚中包含以下脚本:

<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

之后只需在您的 HTML 模板中添加以下元素并更改name属性以匹配您要显示的图标,如下所示:

<ion-icon name="heart"></ion-icon>

您可以从他们的官方网站阅读更多关于基本用法的信息。

• 演示

• Github 存储库

CSS.gg

如果你是 Reddit 开发社区的活跃成员,也许你注意到一个新的图标库正在发布,它只使用 CSS 来设置样式。目前,它具有超过 704 个独立图标,这些图标基于警报、箭头、代码、设计等类别。

关于在性能方面使用 CSS 还是 SVG 更好,一直存在一些争论,但是库@astritmalsija的创建者后来发布了版本 2 的 SVG、SVG Sprite、Figma 和 Adobe XD 格式以提供更广泛的范围的实施。

开始使用 CSS.gg 就像运行npm -i css.gg命令一样简单,然后在你的 head 标签中包含以下样式表:

<link href='https://css.gg/css' rel='stylesheet'>

当然也有 CDN 替代品,例如像这样使用 UNPKG 或 JSDelivr:

<!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>

<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>

您可以在 repo 的官方入门说明上阅读有关 CSS.gg 入门的更多信息。

• 演示

• Github 存储库

羽毛图标

Feathericons 是另一个非常漂亮且干净的库,包含 282 个 SVG 图标。默认情况下,它仅以 SVG 作为主要格式,但这也可以,因为它是目前推荐的使用图标的方式,因为它是最快的。

我喜欢你可以在下载之前配置图标的大小、笔划宽度和颜色。您还可以通过点击网站右上角的月亮图标来切换明暗模式。

开始使用 Feathericons 就像下载 SVG 文件并通过使用src或将其用作内联 SVG 对象将其包含在您的标记中一样简单。

• 演示

• Github 存储库

Eva 图标❤️

Eva Icons 是一组 480 个制作精美的开源图标,以 SVG 和 PNG 格式提供。有两种主要的轮廓和填充样式,我喜欢您可以在悬停时选择开箱即用的缩放、脉冲或晃动动画。

通过在选择使用的图标后下载 SVG 或 PNG 文件或下载整套图标,开始使用 Eva 图标非常简单。您还可以通过安装 NPM 包来包含 Eva 图标,如下所示:

npm i eva-icons

• 演示

• Github 存储库

英雄

Heroicons 是另一个很棒的开源图标库,由 Tailwind CSS 的创建者构建。它具有超过 165 个具有填充和轮廓样式的独立图标,但还提供每个元素的深色和白色版本。图标的外观非常优质且制作精良。

开始使用这些图标就像单击其中一个图标并复制可以立即在项目中使用的内联 SVG 代码一样简单。我喜欢他们还在 Figma 中提供库的事实。如果您想包含所有图标,您可以从公共存储库下载所有 SVG 文件。

• 演示

• Github 存储库

引导图标

几周前,我通过将其与 Font Awesome 进行比较,写了关于新 Bootstrap 5 图标的文章。目前它具有超过 600 个自定义 SVG 驱动的图标,我认为它在设计方面确实很突出。如果你喜欢使用 Bootstrap 作为 CSS 框架,你真的应该考虑在你的下一个项目中使用 Bootstrap 5 图标。

开始使用 Bootstrap 5 图标就像复制 SVG 代码一样简单,然后您可以随意使用它,无论是通过内联使用它,包括它作为图像的源,还是通过在 CSS 中创建伪代码类。无论哪种方式,他们的网站都清楚地解释了的实现方法。

• 演示

• Github 存储库

混音图标

Remix Icon 是 Apache 许可下的 2149 个漂亮的开源图标的大集合。有各种类别的图标可供选择,例如商业、通信、金融、地图等等。绝对值得一看。

通过下载 SVG 或 PNG 版本或直接将内联 SVG 代码复制到剪贴板,开始使用 Remix Icon 非常容易。或者,您也可以选择将整个包下载为单个 .svg 文件或 SVG sprite 文件。

• 演示

• Github 存储库

八角形

Octicons 是一组超过 100 个开源图标,Github 也将其用于他们的主要网站。显然,他们已经通过改进图标的设计和种类来开发库的第二个版本。

Octicons 的一个巨大优势在于,您还可以将其作为 React、Ruby、Rails、Jekyll 和 Javascript 中的即用型包来获取。这是所有包,您可以使用它们开始使用 Octicons。

• 演示

• Github 存储库

图标

最后但同样重要的是,Ikonate 是另一个很棒的开源图标库,包含大约 100 个基于平面设计的高级图标。它在非常宽松的 MIT 许可证下得到了慷慨的许可。

您可以在导出前轻松配置图标的大小、边框宽度、边框帽和角以及颜色。在导出的 ZIP 文件中,您将获得一个包含所有选定内联图标的 html 文件,以及一个包含单独 SVG 文件和精灵表的文件夹。

• 演示

• Github 存储库

总之,请通过给他们一个 Github 星来支持这些库,并让他们知道他们所做的工作有多棒。如果您还没有决定为下一个项目使用特定的图标库,请考虑与您的朋友或同事共享此列表。