適合前端開發 和UI 設計的20多個最佳 ICON 庫

做者：Eugene Stepnov

譯者：前端小智

來源：flatlogic

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

在應用界面中圖標的存在，會給用戶一個良好第一印象，這個挺重要的。可是從零開始開發圖標須要大量的時間和金錢。在你的網站上使用圖標可讓你有效地與你的訪問者交流:它們增長了可讀性，突出了重要的內容，增強了功能或特性，加強了設計。所以，使用現成圖標是很好的一個選擇。

最佳圖標庫的列表

這裏阿里的iconfont就不作介紹的，國內的開發者基本都知道，也都在用，如今咱們來看看國外有哪些好用的圖標庫。

Flaticon

網址：www.flaticon.com/packs 格式和類型：PNG, SVG, EPS, PSD, and BASE 64, Marketplace 價格和許可證：有限的免費套餐和高級套餐，每個月9.99美圓起

Flaticon 包含徹底可編輯的矢量，可用於我的和商業項目。FlatIcon 擁有超過230萬個向量圖標，它們被分組到51202個包中

該產品有 Adobe 擴展，容許咱們輕鬆導入Photoshop, Illustrator和After Effects中的圖標。若是但願使用web字體而不是靜態文件來顯示圖標，那麼FlatIcon 將負責格式轉換並生成一個可使用的 web 字體。咱們還能夠自定義下載的圖標。

亮點：

• 超過90,000個圖標；
• SVG，EPS，PSD 和 PNG 格式；
• 圖標字體;
• 用於 CC 套件的 Adobe 擴展;
• 帶高級期權的 Linkshare 許可證;
• 而且每月都會添加新的圖標包;

Jam Icons

網址：jam-icons.com/ 格式和類型： SVG, CSS 價格和許可證：Free, MIT

Jam 圖標是一套896個手工製做的圖標。這個圖標包提供了SVG和字體版本。這些圖標能夠用做web、打印或應用程序開發項目中的SVG文件。這些圖標也能夠用做給定CSS樣式表的字體。有16px、24px和32px三種尺寸。咱們還能夠選擇填充或描邊圖標。

Fontisto Icon Pack

網址：fontisto.com/ 格式和類型： CSS 價格和許可證：ree, MIT

Fontisto 是矢量圖標包。 能夠當即自定義圖標：大小，顏色，陰影以及 CSS 能夠完成的全部操做。 該產品不須要 Javascript。 Fontisto 圖標是矢量，這意味着它們在高分辨率顯示器上看起來會很好。

在該網站上，咱們能夠找到有關如何啓動和自定義產品的完整文檔和各類指南。 咱們只需將連接粘貼到網站上便可開始使用該產品。 此外，還能夠將 Fontisto 與適合的軟件包管理器一塊兒使用：npm，yarn，bower等。

Iconmonstr

網址：iconmonstr.com/ 格式和類型：SVG, EPS, PSD and PNG, Marketplace 價格和許可證：Free

Iconmonstr 的圖標集合中有4400多個圖標。 每一個圖標集都提供圖形的輪廓和填充版本，以確保它們可用於各類設計應用程序。 該網站上的每一個圖標都是免費提供的，而且圖標文件採用SVG，AI，PSD和PNG等格式，這些文件可用於免費和商業目的。

Iconmonstr經過其強大的搜索功能使搜索圖標變得簡單。 咱們還能夠將本身喜歡的圖標保存在我的收藏夾中，以備未來使用。

亮點：

• 無償使用全部圖標
• 四種格式的下載選項，以及專爲網絡使用而優化的縮小圖標

Pixsellz Material Icons Library

網址：icons.pixsellz.io/ 格式和類型： SVG, EPS, PSD, PNG, FIG, Material design 價格和許可證：Free，Apache License Version 2.0

大量的1000多個圖標分爲16個不一樣類別。 免費的圖標包靈感來自Material設計，並以三種不一樣的視覺風格呈現-圓形，輪廓和兩色。 該套件有請輸入代碼6種不一樣的文件格式，所以咱們可使用首選設計軟件中的圖標。

亮點：

• 3 種風格
• Figma 風格
• 1000多個圖標
• 24×24 像素
• 素描風格
• 16個類別，以及6 種文件格式

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

Entypo

網址：www.entypo.com/ 格式和類型： SVG 價格和許可證：Free, Creative Common License 4.0

Entypo是 svg 圖標系列產品，幾年前由瑞典的 Daniel Bruce 精心製做而成。 這些圖標很是棒：在贈品方面，它們是最重要的。 該產品以 SVG 形式提供，帶有411個圖標，免費提供知識共享許可。

Evil Icons

網址：evil-icons.io/ 格式和類型： SVG, Sketch 價格和許可證：Free, MIT

這個庫很大包含全部內容-包括SVG和原始源文件。 這意味着咱們能夠下載SVG以及Illustrator文件和Sketch的.sketch文件。

#### Streamline Icons

網址：streamlineicons.com/ 格式和類型： ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG 價格和許可證：免費到 $411

Streamline Icons是一個兼容性強的免費圖標庫存。 該庫按｀53｀個類別進行組織，帶有30000多個矢量圖標。

這是爲 Sketch 優化的少數幾個圖標包之一，可輕鬆操縱筆觸寬度和顏色。 諸如symbols 和共享樣式之類的內置 Sketch 功能使重複使用元素（如圖標）變得快速，容易。

該公司擁有本身的 Web 應用程序，可幫助直接從瀏覽器瀏覽，搜索和下載圖標。

亮點：

• 超過30000個矢量圖標
• 智能筆觸修改輪廓厚度
• 支持 Sketch, AI, EPS, PDF, PNG, SVG 格式
• Streamline 3.0 中的每一個圖標都有三個惟一的權重：淺色，常規和粗體

Smashicons

網址：smashicons.com/ 格式和類型： JAR, SVG, AI, SKETCH, Marketplace 價格和許可證：免費到 $149

Smashicons 在其庫中提供了超過219000+個圖標的全面圖標集合。 Smashicons 的工做方式與其餘產品略有不一樣：其訂價基於每個月5美圓的月度計劃。 這意味着您每個月只需支付5美圓，就能夠訪問他們現有圖標的整個集合以及他們發佈的任何未來的圖標。

亮點：

• 一個很是大的圖標集合
• 有圖標都兼容多平臺
• 易於使用的網絡應用程序來搜索和找到你須要的圖標
• 基於訂閱的業務模型
• 多平臺支持

Icons8

網址：icons8.com/ 格式和類型：SVG, PNG, PDF 價格和許可證：Good Boy License, 免費到 $19.90

Icons8 中的圖標集帶有超過120000個圖標，涵蓋多個類別。 從企業和辦公室設置到人，食物和社交媒體圖標。 這些圖標旨在模仿特定操做系統的外觀。 咱們能夠在Windows，iOS 和 Android 版本中下載它們。

亮點：

• SVG、PNG 和 HTML 格式
• 提供各類樣式的圖標，例如線性圖標，實心圖標和全綵色
• 全部圖標均可以經過.zip文件下載
• 下載前可編輯
• 免費和付費訂閱選項

Icomoon

網址：icomoon.io/ 格式和類型：SVG, PNG, PDF 價格和許可證：免費到 $139.90

Icomoon 是用於圖像和圖標管理的完整工具。 該產品具備用於編輯和管理圖標的高質量解決方案。 Icomoon 圖標是在16X16網格上手工製做的，並提供SVG，EPS，PSD，PDF和AI格式。 圖標集也由其建立者不斷更新。

每一個圖標包都有詳細的受權許可，這樣設計人員和開發人員就能夠確切地知道如何使用圖標。用戶還能夠定製本身的圖標字體。

亮點：

• 綜合圖標管理工具

• 免費和付費下載選項

• 多種下載格式

Glyphish Icon Pack

網址：www.glyphish.com/ 格式和類型：SVG, PNG, PDF, PSD, Glyph, Icon font 價格和許可證： Creative Common Attribution， 從25美圓到99美圓

Glyphish提供了各類不一樣的圖標庫。 每一個庫都有各類不一樣的格式，包括PNG，SVG，PSD和AI。 基本圖標的價格爲25美圓，而最終的圖標包的正常價格爲99美圓。 免費演示包含50個圖標。 設計人員能夠輕鬆編輯全部圖標。

亮點：

• 多個平臺的圖標：iOS，Android，Web，Window
• 一組50個免費圖標
• 輕鬆拖放到Xcode中
• 適用於Apple Retina顯示屏的圖標

Ionicons

網址：ionicons.com/ 格式和類型： SVG and Webfont, Icon font 價格和許可證： MIT

Ionic 小組決定以稱爲Ionicons的網絡字體的形式發佈其圖標。 天然，它們是徹底免費的，而且能夠在GitHub上使用。 咱們甚至可使用CDN版本的樣式表將這些圖標直接添加到的站點中，它也支持 SVG 和 Web 字體。

亮點：

• 徹底免費

• 經過複製和粘貼連接輕鬆設置

• 以網絡字體的形式出現

• 定製尺寸

• 超過1100個項目

Angular Material Icons

網址：material.io/resources/i… 格式和類型： SVG, Webfont, Material design 價格和許可證：Free, Apache License 2.0

Material Icon 是Google提供的免費圖標庫。 爲了確保可讀性和清晰度，這些圖標已進行了優化，以在全部平臺和顯示器上看起來都很好。 這些圖標是徹底免費的，能夠在GitHub上訪問。 這個圖標庫很大，有超過1,000個圖標涵蓋了普遍的界面功能。

Linearicons

網址：linearicons.com/ 格式和類型： SVG, Webfont, Icon font 價格和許可證：免費到59美圓，Common Creative License

Linearicons是用於我的或商業目的的最受歡迎和最佳圖標包之一。 Linearicons 有有免費和高級版本，此驚人的圖標包的免費版本已得到Creative Common許可。 咱們還能夠根據須要選擇其餘軟件包，例如「桌面軟件包」。

亮點：

• CloudFront CDN
• 提供免費版本
• 帶有不一樣的格式：SVG，PDF，Webfont。

Feathericons

網址：feathericons.com/ 格式和類型： SVG, Webfont, Iconfont 價格和許可證：Free, MIT License

Feather是最受歡迎的開源圖標集之一。 這些是在24X24網格上設計的開源圖標。 這些圖標以SVG格式提供。 它已得到MIT許可，而且在開源中大約有250多個圖標。

這些圖標很容易編輯，不管大小都很清晰。它們首先被設計成一種圖標字體，因此它是做爲一種web字體嵌入的。

Iconfinder

網址https://www.iconfinder.com/ 格式和類型：SVG, PNG, ICO, Marketplace 價格和許可證：每個月9美圓至49美圓

Iconfinder是網絡上最受歡迎的圖標資源之一。 它提供了超過400萬個圖標，爲用戶提供了各類搜索選項，包括圖標格式，價格，大小，背景等。還有多個月度付款計劃-從$9到$49。 咱們也能夠選擇「隨用隨付」系統。

圖標文件提供SVG，PNG，ICO，ICNS和Adobe Illustrator格式，尺寸範圍爲16×16到512×512。 若是找不到本身喜歡的東西，或者只是想要專門爲咱們品牌設計的自定義圖標，也能夠與網站上的一些最佳設計師合做。

亮點：

• 免費和付費使用選項
• 靈活的搜索功能
• 提供多種格式的圖標
• 不少類別和樣式
• 標編輯器

The Noun Project

網址：thenounproject.com/ 格式和類型：SVG, PNG, Marketplace 價格和許可證：Creative Commons License

Noun Project 提供了網絡上最大的圖標庫之一。 該網站的大多數圖標都以SVG和PNG格式以及黑白樣式提供。

該網站的庫由各類獨立設計師設計的圖標文件組成。 在這裏，創做者和創意專業人士能夠合做銷售他們的設計，並找到看似無窮無盡的高級圖標庫。

搜索這個龐大而全面的圖標庫很是容易。 該圖標庫的其餘主要功能包括免費和高級下載選項，許多大型圖標集，適用於Mac的應用程序等等。 該圖標庫會按期更新，而且天天都會發布新的圖標和集。

亮點：

• 超過150,000個圖標
• SVG, PNG格式
• 搜索和發現工具
• 免費和付費下載選項
• 幾乎天天都會上傳新圖標

Fontawesome Icons

網址：fontawesome.com/icons 格式和類型：SVG, PNG, Icon font, Marketplace 價格和許可證：SIL OFL 1.1

Font Awesome是周圍使用最普遍，最受歡迎的圖標字體。 這也是在引導時爲團隊設置的默認圖標。 它還能夠做爲SVG圖標以及其餘格式使用。該許可證對任何商業或我的用途都是免費的。

每一個圖標都是徹底可伸縮的，而且能夠直接在CSS中維護。 咱們可使用純CSS3更改顏色，陰影，背景漸變以及幾乎全部其餘內容。 使用此庫的另外一個緣由是，它已徹底優化，而且徹底不須要JavaScript，所以沒有兼容性問題。

亮點：

• 矢量字體
• 每一個圖標都帶有CSS類和Unicode
• 免費
• 考慮到可訪問性而構建
• 易於跨網站升級
• 提供整個圖標庫的桌面備忘單

Lineicons

網址：lineicons.com/ 格式和類型：SVG, Web font, Icon fontace 價格和許可證：免費

LineIcons 還提供帶有清晰文檔的免費CDN，使其易於入門。

該圖標包是徹底免費的，並帶有450多個線型圖標。 它涵蓋了來自不一樣類別的項目所需的每一個基本圖標。 LineIcons 還提供免費的CDN和清晰的文檔，以輕鬆上手。 它帶有2個不一樣的可伸縮軟件包–能夠根據項目須要使用WebFonts和SVG文件。

亮點：

• 450+個免費圖標
• SVG文件
• 免費CDN

總結

選擇圖標庫時不該該是基於圖標庫受歡迎的程度，而是哪一個圖標庫更適合當前的開發項目，哪一個圖標庫的風格更符合咱們應用程序的風格。

但願本文有助於選擇最適合你須要的解決方案。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

來源：https://blog/top-icons-packs-and-resources-for-web/

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。