使用图标是使您的设计更加有趣和引人注目的最快和最简单的方法之一。添加适当的图标可以使用户界面更加清晰，引导用户浏览页面并向用户显示每个按钮或链接的功能。

在这篇文章中，我们收集了9个最可靠，最精美的图标包。我们将它们分为三类：字体图标，SVG和CSS图标。在我们掌握资源之前，让我们快速看看每种类型的优缺点：

Icon Fonts

使用大量带有基本样式要求的图标时，图标字体可以正常工作。他们是单色的，最适合简单的形状。图标字体被浏览器视为文本，因此您需要将它们标准化以避免文本反锯齿问题，并且在几乎所有的浏览器中都受支持。

SVG icons

可缩放矢量图形（SVG）是一种基于XML的矢量图形格式，可以缩放到任意大小而不会失去清晰度。它们可以通过使用CSS，对象标签，img标签或直接内联到您的HTML显示。在现代浏览器中支持SVG，但在较低版本的IE和Android 2.3及更低版本中缺少支持。

CSS icons

如果您需要使用少量图标，CSS图标是最有效的。所有你需要做的就是复制你喜欢的图标的CSS，并将其粘贴到项目的样式表中。如果您打算使用大量的图标，则不推荐使用它们。在浏览器中，图标的风格也有所不同。

Feather Icons

类型: SVG

图标的数量: 240

许可: MIT?

Feather是最流行的开源图标集之一。所有的图标都设计在一个24x24的网格上，并具有相同的圆角样式，一致的外观。轻松用于框架集成的项目可用于Angular，Vue和React。

Linea

类型: SVG, PNG, Icon font

图标的数量: 730+

许可: CCBY

Linea提供了大量精美的现代图标，其特点是外观清晰、轮廓分明。所有的图标都有不同的分类，包括基本的，音乐的，电子商务的，软件的等等。

Octicons

类型: SVG

图标的数量: 170+

许可: GitHub

?

Octicons是GitHub可扩展的手工SVG图标集。它包括GitHub和编程相关的图标，如数据库图标，git操作图标，等等。

Glyph

类型: SVG

图标的数量: 800

许可: CC BY-SA 4.0

?

在项目的GitHub中，您可以下载一个Node.js脚本来自定义图标包，这种方法适用于仅包含您真正需要的图标。

Font Awesome

类型: Icon Font

图标的数量: 675

许可: SIL OFL 1.1

?

网页最受欢迎的图标字体（GitHub上超过五万颗星），Font Awesome提供了大量图标，这些图标是为可扩展性，通用浏览器支持和视觉障碍用户的良好可访问性而构建的。

Ionicons

类型: Icon Font

图标的数量: 260+

许可: MIT

Ionic Framework为后面的团队设置了一个非常漂亮的图标。提供超过260个漂亮的图标，其中一些是厚重的平面风格，另一些是现代的细线风格。

Material Icons

类型: Icon Font

图标的数量: 900+

许可: Apache

?

Google的Material Design语言的官方图标和Android中的所有图标。它包含超过900个图标，都是以一致的Material风格制作的，保证了你在项目使用起来有一致的风格。

Icono

类型: CSS Icons

图标的数量: 130

许可: MIT

?

纯CSS图标的集合。要实现它们，只需要下载.css样式表，创建一个空的HTML元素，然后添加相应的类。所有的图标都是这样的，只需要一个HTML元素就可以工作。

CSS ICON

类型: CSS icons

图标的数量: 190

许可: CC0 v1.0 Universal

?

CSS ICON图标集完全由CSS制成。该项目有一个很棒演示网站，您可以检查图标，看看他们的设计的每个部分是如何实现的。如果你只需要一个或两个图标，你可以简单地复制他们的CSS并粘贴到你的样式表中而不需要下载任何东西。