扁平化图标和图标字体大全

Avatar of Chris Coyier
Chris Coyier 于

DigitalOcean 为您的每个旅程阶段提供云产品。开始使用 $200 免费积分！

图标字体很棒。 除了必须是单色之外，它们在各个方面都优于使用图像作为图标。但是您选择哪种呢？外面有大量的不同集合。我将尝试在这里将它们全部收集起来，并保持更新（这篇文章已经更新了好几次）。

Pictos

数量 600+
价格 $19-$249

Pictos 是真正普及了这种想法的图标字体。除了这些集合之外，他们还提供 Pictos 服务器，这是一项服务，允许您从其图标库中构建自己的字体集，并为您托管/提供服务。这使得字体文件非常小（加载速度快），并且为更新您当前的集合提供了一个不错的 UI。

Symbolset

数量 1000+
价格 $5-$60

Symbolset 的独特之处在于它们可以将单词变成图标。写下“心”这个词，得到一个 ❤。这是通过 OpenType 实现的，OpenType 是现代浏览器的排版功能。

现代象形图

数量 130
价格 $25

v1 在 Font Squirrel 上是免费的。v2 是付费的，完整版售价 25 美元，单个图标低至 0.50 美元。

Pictonic

数量 2586
价格 按图标付费，或 199 美元

Pictonic 还提供托管图标服务，并提供独特的定价（每个图标 0.59 美元）。

StateFace

数量 50
价格 免费

StateFace 拥有所有 50 个美国州作为图标字体。当您需要它们时，您就需要它们。

GeoBats

数量 ~150
价格 免费

GeoBats 是世界各国的图标字体。GeoBats 位于 DaFont.com 上 - 值得 在那里搜索“图标” 以查看他们提供的其他免费内容。

iconSweets 2

数量 1,000+
价格 $8

也拥有一个 免费的前身。

Erler Dingbats

数量 ~120
价格 免费

对标准 Dingbats 的重大改进。

Tipogram

数量 90
价格 $18

CleanIcons

数量 55
价格 $5

Meteocons

数量 40+
价格 免费

适用于天气!

Ecqlipse 2

数量 281
价格 免费

它们底部有小阴影（所以不完全是“平面”。）。非常小的 前身.

Heydings Icons

数量 60
价格 免费

IcoMoon

数量 500+
价格 免费 - 59 美元

IcoMoon 是一组开源图标。但更重要的是，IcoMoon 是一个用于自定义和下载优化图标字体的 Web 应用程序。您可以选择您想要的图标，并下载该最小化集合。您可以轻松地添加来自不同集合的字体，或通过简单的拖放操作添加来自 SVG 文件的图标。

Iconic

数量 171
价格 免费

Gedy Rivera Social

数量 107
价格 $5

Foundation Icons

数量 47 + 其他几个迷你集合
价格 免费

可以与或不与 Zurb Foundation 一起使用。

Fico

数量 52
价格 ~$30

等宽字体。

Web Symbols

数量 ~80
价格 免费

WriteSocial

数量 ?
价格 $10

专门的社交媒体图标。他们声称是“数十亿”，显然不是。

Entypo

数量 100+
价格 免费

ClickBits

数量 ~400
价格 12 美元 - 49 美元

以一堆基于类型的不同独立字体（例如箭头、图标、圆圈等）

Font Awesome

数量 150+
价格 免费

专为与 Twitter Bootstrap 一起使用而设计。换句话说，是 Glyphish 的免费版本（该版本随附）的重新设计版本。

JustVector 社交图标

数量 150+
价格 免费

仅社交内容。

PulsarJS

数量 73
价格 免费

Flexi Social

数量 65
价格 $29

仅社交内容。

Raphaël

数量 116
价格 免费

Sosa

数量 120
价格 免费

免费，但他们在主页接受捐赠。

Pyconic

数量 8 组，每组 96 个
价格 每组 29 美元

仅作为图形的图标价格不同，但字体被分成 8 组。看起来只购买你需要的特定组有点麻烦，因为它们只是被分割成偶数。如果你喜欢这组，你可能最好买一个捆绑包。

Dot Com

数量 92
价格 免费

从 DaFont 获取它，然后通过Font Squirrel 运行它是你最好的选择。

Steedicons

数量 94
价格 $39

还有第 1 卷（312 个手绘图标）和第 2 卷（60 个微型艺术作品），它们不是字体，而是平面图标。

Typicons

数量 88
价格 免费

捐赠有助于维持它。

仅限平面图标

以下图标没有作为 @font-face 集提供，但它们是平面矢量图标。你可以很容易地通过IcoMoon 等工具将它们整合到其他集中。

Web Icon Set

数量 1,600+
价格 25 美元 - 99 美元

他们有一些较小的集合，或者你可以成为会员，以低于两个集合的价格访问所有集合。

Rondo

数量 40
价格 免费

社交图标字体。

Geomicons

数量 100+
价格 每套 16 美元

有两套，一套由实心形状组成，另一套由描边组成。

Picons

数量 100+
价格 9.90 美元 – 59 美元

各种不同尺寸和风格的套装，价格各不相同，包括一些非扁平化设计。

Symbolicons

数量 ~500
价格 5 美元 – 43 美元

一套大型套装，带有一些小型附加包。

Bixel

数量 65
价格 $9.99

看起来像是已经结束的筹款活动，但图标仍在出售。我相信它们只有 PNG 格式，不是矢量格式，而且我不确定你是否会自动获得 40 个“附加”包图标。

Tabs

数量 745
价格 10 美元 – 60 美元

免费更新。

Pixeds

数量 90
价格 $14

还有一个非字体套装，包含比字体套装更多的图标。

Gentleface

数量 304
价格 $29.99

如果用于个人或社区网站，则免费。

Glyphish

数量 400
价格 免费 – 25 美元

200 个图标的套装免费，一个尺寸，或 400 个图标的套装，两个尺寸，25 美元。

Glyphicons

数量 350
价格 免费 – 49 美元

个人和社区网站免费使用，或付费获得免版税和更多格式。

The Noun Project

数量 无数？
价格 每个图标或带有署名的免费

The Noun Project 可能是目前最大的图标集合。它不是一个“套装”，而是一个庞大的符号档案。如果您同意署名作者，则可以免费逐个下载它们，或者购买符号以获得免版税使用权。您需要将它们组合在一起才能用作字体。您可以提交自己的图标。

iconmonstr

数量 1000+
价格 免费

与 The Noun Project 类似，iconmonstr 是一个图标档案，您可以搜索并根据需要逐个下载。

Batch

数量 300+
价格 免费

包含 PSD、SVG 和 PNG

Gcons

数量 100
价格 免费

开源

Pixelated

数量 36
价格 免费

Eddit iPhone UI

数量 160
价格 69 美元 - 189 美元

189 美元可以获得矢量 PSD。

Simplicity

数量 205
价格 $19

Picas

数量 250
价格 10 美元 - 25 美元

提供了一些免费的预览包。

Helveticons

数量 600+
价格 159 美元 - 499 美元

Eco Ico

数量 36
价格 免费

Matthew Skiles 设计。

Brankic1979 Icons

数量 350
价格 免费

Cuticons

数量 70
价格 免费

Vaibhav 设计。

Roam Design

数量 99
价格 免费

仅供个人使用。

IconEden Glyph

数量 679
价格 $35

类似的集合 使用描边而不是实心形状。

UIcons

数量 362
价格 $20

@font-face 版本“即将推出”，可能是一小部分原创作品。

Jigsoar

数量 60
价格 免费

免费使用，需署名。

Cosmo Basic

数量 65
价格 $7

Webalys

数量 750
价格 $37

Omnigraffle 模板，方便您在其中插入图标，如果您使用该软件进行线框图绘制。该套装即将进行重大更新。

Design Kindle Glyphs

数量 70
价格 免费

Skewed Icons

数量 240
价格 $15

Carbon

数量 ~100
价格 $99

Broccolidry

数量 108
价格 免费

作者：Charlotte Swift。似乎从网络上删除了，但仍然存在于 一些图标字体集中。

Icon Minia

数量 139
价格 免费

作者：Egemen Kapusuz。

Silkcons

数量 99
价格 免费

Vaibhav 设计。

105 Loops

数量 105
价格 免费

作者：Pranav。

WPZOOM Developer

数量 154
价格 免费

Feather

数量 48
价格 $14.99

Fontelico

数量 30
价格 免费

开源且由社区提供支持（“我们每赚 50 美元就会创建一个图标”）。是 Fontello 项目的一部分。

Picto Foundry 图标

数量 350
价格 $20

Metricons

数量 750
价格 $75

基于 Windows 8。

Pixicon

数量 600+
价格 $25-$80

Mobile Pro 图标

数量 315
价格 $8

Stylistica

数量 115
价格 26.20 美元 - 262 美元

Pixiconz

数量 285+
价格 免费

手绘图标

数量 310
价格 $19

PictoPro

数量 630
价格 $15

每套（轮廓或实心）15 美元，两套 25 美元。

Miniicons

数量 1500
价格 $59

 

其他信息

  • 确保你使用这些和 正确的语义/可访问的标记。
  • 以下是一些为什么 图标字体很棒 的原因。
  • IcoMoon 是一个很棒的应用程序，用于自定义、映射和创建你自己的图标字体，只需使用你需要的部分。
  • Fontello 使用了一些免费的字体图标集，并允许你选择字符并根据你的喜好应用映射。类似于 IcoMoon - 更简单，但功能更少。
  • Hieroglyph - 从矢量（SVG）文件目录生成图标字体
  • Glyphs - 每个人的字体编辑器。
嘘！ 创建一个 DigitalOcean 帐户并获得 200 美元免费信用 用于云托管和服务。

评论

  1. Jason Paul
    评论的永久链接#

    很棒的字体图标集！我看到了它们在组装方面的巨大用处。就 @font-face 而言，我的犹豫是使用这些字体图标作为网络字体可能会导致非常乱码的内容。这可能是 SEO 最糟糕的噩梦（虽然我并不真正关心）。但我确实认为样式应该是样式，内容应该是内容。这引入了另一个层级，这可能被视为对这种理想的设计侵犯。

    另一方面，@font-face 图标消除了某些人可能认为在组装/开发过程中的冗余。纠结！

    • Kevin Sweeney
      评论的永久链接#

      这就是为什么不要将它们放在标记中，而是使用 :before 和 :after 伪元素的“内容”属性来设置它们的原因 :)

    • Adam
      评论的永久链接#

      嘿，凯文,

      你能重新解释一下你在“内容”属性中使用图标字体的意思吗？我很难理解你的意思。

      谢谢

    • 斯科特
      评论永久链接#

      亚当,
      凯文指的是像下面这样在 css 中添加图标字体（其中“@”指的是分配给图标的字符）。

      
.icon-font:before  {
  content: '@';
  font-family: icons;
}

      虽然我更喜欢的方法是将图标放在 data 属性中，如下所示
      Le HTML

      <a class="icon-font" href="#" data-icon="@">link here</a>

      Le CSS

      
.icon-font:before {
  content: attr(data-icon);
  font-family: icon;
}

      理想情况下，你也可以将图标分配给 Unicode 的补充专用使用区域，这样屏幕阅读器就不会读出它，我知道 Icomoon 提供了这项功能。

      Jon hicks 在他的 24Way 访谈中更深入地探讨了这个问题 - http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes

  2. 大卫·卡内达
    评论永久链接#

    难以置信的全面列表。我甚至还浏览了一些我的列表，想找找漏洞，但是没有，你把它们都找出来了！

    已经收藏了，很高兴可以摆脱一系列标签和随机的保存链接。

    你可能想最终添加一些过滤器/下拉菜单（免费/商业/等等）... 我能看到这篇文章会成为一个常用的资源。

  3. JC
    评论永久链接#

    我找到了一堆很棒的图标，叫做 Eclipse。

    http://chrfb.deviantart.com/gallery/#/dzor6y

  4. 戴夫·阿克曼
    评论永久链接#

    很棒的列表，克里斯！我需要更加努力地将图标字体融入我的工作流程中。

  5. 丹
    评论永久链接#

    我注意到 U 图标收费，而 DotCom 图标下载起来很麻烦，因为你需要逐个下载。

    这可能是最全面的图标获取来源列表。

    当然，http://www.iconfinder.com/free_icons 是一个很棒的网站。

    • 奈尔
      评论永久链接#

      我认为重点是它应该是一种包含图标的字体。

  6. 托德·布德尼卡斯
    评论永久链接#

    非常感谢你，克里斯。这是一个很棒的列表！

  7. 诺维克
    评论永久链接#

    感谢你的收藏！我喜欢“现代象形图”。

  8. 普拉亚格·维尔玛
    评论永久链接#

    我在此找到了一些很棒的图标 http://fontfabric.com/social-media-icons-pack/

  9. 拉斐尔
    评论永久链接#

    很棒的解决方案。感谢你的收藏。

  10. Carl114
    评论永久链接#

    免费图片字体 - http://bit.ly/GIweFq - 不同的图标、表情符号、项目符号... 无论它是否有效）。

  11. 马克·巴蒂斯特拉
    评论永久链接#

    胡言乱语！我讨厌与我已知并感到舒适的事物不同的东西。一定很痛苦。

    你真是个语言天才！

    这些很棒，我还在 font-face 和 svg 之间犹豫... 如果有人愿意帮我辩论一下就好了。

  12. jsdev
    评论永久链接#

    @Jason Paul 你可以使用 CSS 伪选择器，如 :before 和 :after，并使用 content 属性来注入你的图标，从而将页面内容和表现形式分开。所以你不必担心。

    虽然 SEO 会考虑 JavaScript 加载的内容，但我认为它不会考虑 CSS 注入的内容。

    有人支持我吗？

  13. 设计 Kindle
    评论永久链接#

    很棒的综述，克里斯。谢谢。

    这里还有几个免费的集合，可以在 Design Kindle 上找到

    http://www.designkindle.com/2011/10/13/glyph-icons/
    http://www.designkindle.com/2011/09/20/mini-icons-vol-1/

  14. 罗伊·J
    评论永久链接#

    很棒的文章！我总是需要图标。

  15. 凯利
    评论永久链接#

    这是一个很棒的资源，感谢你发布。

  16. Kevin Sweeney
    评论永久链接#

    我非常想知道像 Tabs 这样的字体是如何能够包含版权内容（比如苹果 logo）在他们的字体中的。

  17. 埃洛因
    评论永久链接#

    很棒的字体研究。有趣的是，随着网站越来越多的充斥着各种社交媒体渠道，这些图标的外观也变得越来越简单。

  18. C. L.
    评论永久链接#

    有人能说服我使用任意字母来表示图标是一个好主意（图标字体）吗？我知道我们可以通过使用 ::after / ::before 结合“content:”来保持标记“干净”，但我越来越觉得将这些伪元素重载以插入你想要隐藏的内容是错误的，即使是为了清除浮动。我遇到了一个问题，我实际上想要使用 ::after 添加真实内容，但我不能，因为我已经把它用于清除浮动或额外的边框。有什么想法吗？

  19. 文森·勒·莫瓦涅
    评论永久链接#

    很棒的列表，特别是对于图标字体。

    但是对于扁平化图标，我的列表中缺失了：http://www.webalys.com/premium/design-vector-icons-library.html
    你知道它吗？

  20. 迈克
    评论永久链接#

    令人震惊的是，迪士尼的知识产权经常被肆意盗用。不，我不是为他们工作，但看到设计师对别人的作品（iconsweets）如此肆意妄为总是让我感到讽刺（虚伪）。我知道有些法律规定在讽刺/喜剧中使用内容等等。我并不是律师 - 不要围攻我。

    也许我还没有得到关于何时可以和何时不能将米老鼠作为付费收藏的一部分的适当指导。法律并不总是拥有清晰可见的尖锐边界。

    当我在网站上使用 Facebook 徽标时，我没有相同的法律顾虑。不知何故，这似乎有所不同。这里有什么法律协议吗？

    开心警察：“我们始终在值班”

  21. Martin
    评论永久链接#

    很棒的综述，

    我正在使用 icoMoon 字体。结合 @font-face 生成器，它很棒。

    在我的最新项目中，我有很多图标，结合不同的尺寸和移动视网膜支持，如果没有图标字体是不可能的。

    但现在我的问题是：after 伪元素在 IE7 中不起作用！！
    因此，我所有的图标都没有显示出来，恐怕仍然需要支持。

    同样在 IE8 中，:after 确实起作用，但图标字体加载太慢，经常挂起。在整个网站上看到所有难看的字符。

    有什么解决这些问题的办法吗？

  22. David Higginbotham
    评论永久链接#

    这里有很棒的收藏，Chris！在这里找到了一些宝石，即使在我的图标爱好中也没有，干杯。

  23. Juan
    评论永久链接#

    很棒的收藏！谢谢。

  24. Michael Whyte
    评论永久链接#

    太棒了……我不断地向下滚动页面……一直滚动到越来越多的图标字体……编制这样一个清单并不容易……所以非常感谢你这么做……我将与我们的学生分享这个页面的链接……

  25. Amruth Raj
    评论永久链接#

    哇，这是一个很棒的收藏，谢谢老兄。继续发布这种有用的链接。:)

  26. modra ideja
    评论永久链接#

    非常感谢，Chris，这篇文章将直接进入我办公室的书签墙！

  27. Tony Montemorano
    评论永久链接#

    我喜欢这个主意。我今天在一个导航中加入了一些图标，很快就意识到字体在 Windows 和 OSX 浏览器之间以不同的方式来回跳动。我尝试了很多不同的对齐方式，但似乎没有一种方式适用于两种操作系统。我制作了一个 jsfiddle 来演示我遇到的问题。你会在顶部（水平导航）看到我遇到的问题。目前它被设置为在 OSX 上正确对齐，但在 Windows 上却偏离了很多。我猜想这与他们以不同方式渲染字体有关。有人知道如何让它更一致吗？

    http://jsfiddle.net/allusis/F3y2K/

  28. Gautam Lakum
    评论永久链接#

    真是太棒的收藏了。真的在寻找这样的东西。
    谢谢！你做得真棒。

  29. Dhirendra Kumar
    评论永久链接#

    很棒的图标集合。
    有没有什么网站可以像 iconfinder 一样找到大量图标？

  30. Bharat Chowdary
    评论永久链接#

    终极收藏，在所有这些中，Pictos 和 WebSymbols 是最受欢迎的。感谢分享。

  31. DERC
    评论永久链接#

    最棒的：Helveticons！

  32. erwin
    评论永久链接#

    感谢你提供这个很棒的综述！我还没有见过一个如此全面的（如果这个词用得正确的话）……我认为，关于分辨率无关网站的设计，事情开始变得有趣了。

  33. 斯科特
    评论永久链接#

    很棒的收藏，Chris。我很想看到其中一个出现在 Google 网页字体收藏中。

    有人知道是否有人正在做这个吗？这将是广泛、易于实施的图标字体可用性的改变游戏规则。

    • 克里斯·科耶
      评论永久链接#

      我不知道是否有人正在做这个，但是的，我想要。

    • Michael Calkins
      评论永久链接#

      我无法告诉你我去过 Google 网页字体多少次，却忘记了它们那里没有网页字体。我非常想要它。

  34. Omar Fareh
    评论永久链接#

    感谢你提供这个很棒的图标集合，Chris :)

  35. Total Bounty
    评论永久链接#

    很棒的字体和图标综述。我们经常只使用 iconfinder - 但在这篇文章中你比我们在那里一个小时搜索到的还要多 - 非常棒的发现！

  36. Sachin
    评论永久链接#

    很棒的内容。感谢分享这些 :)

  37. Robert
    评论永久链接#

    感谢你分享这个。很棒的收藏，真的给我留下了深刻的印象。你能推荐其他收藏吗？例如，我是一名网页设计师，即使这是一个很大的收藏，对我来说还不够。请帮助我 :)

    • Daniel
      评论永久链接#

      我理解你的意思，因为我也有同感。要查找更多图标和字体，你可以查看 iconfinder、http://www.creattor.com 或 iconshoc。尽情享用！

  38. Mottie
    评论永久链接#

    有一个名为 Font Awesome 的 github 存储库，它旨在与 Twitter Bootstrap 一起使用。它看起来不错 :)

  39. Robert
    评论永久链接#

    非常感谢您提供的链接，Daniel，这正是我需要的！祝一切顺利！

  40. Keyamoon
    评论永久链接#

    这可能是最全面的扁平化图标汇总了！

    大约两周前，我发布了 IcoMoon 的重大更新。您可以开始使用新的应用程序 在这里。

    完全免费。您可以导入自己的 SVG 图像或字体。这意味着您可以基本上导入任何类型的字形并制作任何您想要的字体。对于图标的编码，您可以使用新的“符号”选项，以及 SPUA，或任何您想要的自定义 Unicode 编码。

    除了制作字体之外，此工具还允许您快速搜索和查找矢量图标。与 thenounproject 不同，它运行得非常快！您可以轻松地下载矢量图标进行修改或使用。

    您可能 观看此屏幕截图 以了解更多信息。它不是像 Chris 制作的那样的专业/高质量屏幕截图，但我尝试了一下：P

  41. Spoygg
    评论永久链接#

    一个设计得很好的通用集合 http://www.zurb.com/playground/foundation-icons

  42. Dom
    评论永久链接#

    嗯，这可能要花费一大笔钱，但我想要全部。Dotcom 图标可能是我在某些项目中使用时唯一会遇到问题的地方 - 但它仍然很独特。感谢分享。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。

© 2024 . All rights reserved.