值得收藏的20個前端開發ICON圖示庫

這篇文章跟大家分享20個ICON圖示庫（值得收藏），讓你的網站跟美觀、有可讀性。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

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

最佳圖示庫的清單

這裡阿里的iconfont就不做介紹的，國內的開發者基本上都知道，也都在用，現在我們來看看國外有哪些好用的圖示庫。

1、Flaticon

網址：https://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 授權;
• 並且每個月都會新增新的圖示套件;

2、Jam Icons

#網址：https://jam-icons.com/
格式與類型： SVG, CSS
價錢與授權：Free, MIT

#Jam 圖示是一套896個手工製作的圖示。這個圖標包提供了SVG和字體版本。這些圖示可以用作web、列印或應用程式開發專案中的SVG檔案。這些圖示也可以用作給定CSS樣式表的字體。有16px、24px和32px三種尺寸。我們也可以選擇填滿或描邊圖示。

3、Fontisto Icon Pack

#網址：https://fontisto.com/
#格式和類型： CSS
價格與授權：ree, MIT

#Fontisto 是向量圖示套件。可以立即自訂圖示：大小，顏色，陰影以及 CSS 可以完成的所有操作。該產品不需要 Javascript。 Fontisto 圖示是向量，這意味著它們在高解析度顯示器上看起來會很好。

在該網站上，我們可以找到有關如何啟動和自訂產品的完整文件和各種指南。我們只需將連結貼到網站上即可開始使用該產品。此外，還可以將 Fontisto 與適合的軟體套件管理器一起使用：npm，yarn，bower等。

4、Iconmonstr

網址：https://iconmonstr.com/
格式與型別： SVG, EPS, PSD and PNG, Marketplace
價格與授權：Free

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

Iconmonstr透過其強大的搜尋功能使搜尋圖示變得簡單。我們也可以將自己喜歡的圖示保存在個人收藏夾中，以備將來使用。

亮點：

• 免費使用所有圖標
• #四種格式的下載選項，以及專為網路使用而優化的縮小圖標

5、Pixsellz Material Icons Library

網址：https://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 種檔案格式

6、Entypo

#網址：http://www.entypo.com/格式與類型： SVG

價錢與授權：Free, Creative Common License 4.0

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

7、Evil Icons

#網址：https://evil-icons.io/格式和類型： SVG, Sketch價格和授權：Free, MIT

這個函式庫很大包含所有內容-包含SVG和原始來源文件。這意味著我們可以下載SVG以及

Illustrator

檔案和Sketch的
.sketch
檔案。

8、Streamline Icons

網址：https://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 中的每個圖示都有三個唯一的權重：淺色，常規和粗體

#9、Smashicons

######網址：###https://smashicons.com/######格式與類型： JAR, SVG, AI, SKETCH, Marketplace###價格和許可證：免費到$149#########################Smashicons### 在其庫中提供了超過# ##219000 ###個圖示的全面圖示集合。 ###Smashicons### 的工作方式與其他產品略有不同：其定價基於每月5美元的月度計劃。這意味著您每月只需支付5美元，就可以存取他們現有圖標的整個集合以及他們發布的任何將來的圖標。 #########亮點：#######

• 一個非常大的圖示集合
• 有圖示都相容多平台
• 容易使用的網路應用程式來搜尋並找到你需要的圖示
• #基於訂閱的業務模型
• 多重平台支援

10、Icons8

網址：https ://icons8.com/
格式與類型：SVG, PNG, PDF
價格與授權：Good Boy License, 免費到$19.90

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

亮點：

• SVG、PNG 和HTML 格式
• 提供各種樣式的圖標，例如線性圖標，實心圖標和全彩色
• 所有圖示都可以透過.zip檔下載
• #下載前可編輯
• 免費和付費訂閱選項

##11、Icomoon

網址：

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

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

每個圖示套件都有詳細的授權許可，這樣設計人員和開發人員就可以確切地知道如何使用圖示。用戶還可以自訂自己的圖標字體。

亮點：

綜合圖示管理工具
• #免費和付費下載選項
• 多種下載格式

12、Glyphish Icon Pack

#網址：

http://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顯示器的圖示

13、Ionicons##網址：

https://ionicons.com/

格式與型別：SVG and Webfont, Icon font 價位與授權： MIT

#Ionic 小組決定以稱為

Ionicons

的網頁字體的形式發布其圖示。自然，它們是完全免費的，並且可以在GitHub上使用。我們甚至可以使用CDN版本的樣式表將這些圖示直接新增到的網站中，它也支援 SVG 和 Web 字體。

亮點：

完全免費

• 透過複製和貼上連結輕鬆設定
• 以網頁字體的形式出現
• 自訂尺寸
• 超過1100個項目

#14、Angular Material Icons網址：

https://material.io/resources...

#格式與類型： SVG, Webfont, Material design價格與授權：Free, Apache License 2.0

Material Icon 是Google提供的免費圖示庫。為了確保可讀性和清晰度，這些圖標已進行了優化，以在所有平台和顯示器上看起來都很好。這些圖標是完全免費的，可以在GitHub上存取。這個圖示庫很大，有超過1,000個圖示涵蓋了廣泛的介面功能。

15、Linearicons

#網址：https://linearicons.com/
格式與類型： SVG, Webfont, Icon font
價格與授權：免費到59美元，Common Creative License

##Linearicons是用於個人或商業目的的最受歡迎和最佳圖標包之一。 Linearicons 有免費和高級版本，此驚人的圖標包的免費版本已獲得Creative Common許可。我們也可以根據需要選擇其他軟體包，例如「桌面軟體包」。

亮點：

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

16、Feathericons

#網址：

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

##Feather

是最受歡迎的開源圖示集之一。這些是在24X24網格上設計的開源圖示。這些圖示以SVG格式提供。它已獲得MIT許可，並且在開源中大約有250多個圖示。 這些圖示很容易編輯，無論大小都很清晰。它們首先被設計成一種圖標字體，所以它是作為一種web字體嵌入的。

17、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。如果找不到自己喜歡的東西，或者只是想要專門為我們品牌設計的自訂圖標，也可以與網站上的一些最佳設計師合作。

亮點：

免費和付費使用選項

• #靈活的搜尋功能
• 提供多種格式的圖標
• 很多類別和樣式
• 標記編輯器

#18、The Noun Project網址：

https://thenounproject.com/

#格式與類型：SVG, PNG, Marketplace價格與授權：Creative Commons License

#Noun Project

提供了網路上最大的圖示庫之一。網站的大多數圖示都以SVG和PNG格式以及黑白樣式提供。 該網站的庫由各種獨立設計師設計的圖示檔案組成。在這裡，創作者和創意專業人士可以合作銷售他們的設計，並找到看似無窮無盡的高級圖標庫。

搜尋這個龐大而全面的圖示庫非常容易。該圖標庫的其他主要功能包括免費和高級下載選項，許多大型圖標集，適用於Mac的應用程式等等。該圖標庫會定期更新，並且每天都會發布新的圖標和集。

亮點：

超過

150,000
• 個圖示SVG, PNG格式
• #搜尋和發現工具
• 免費和付費下載選項
• 幾乎每天都會上傳新圖示

19、Fontawesome Icons #

網址：https://fontawesome.com/icons
格式與類型：SVG, PNG, Icon font, Marketplace
價格與授權：SIL OFL 1.1

Font Awesome是周圍使用最廣泛，最受歡迎的圖示字體。這也是在引導時為團隊設定的預設圖示。它也可以作為SVG圖標以及其他格式使用。該許可證對任何商業或個人用途都是免費的。

每個圖示都是完全可伸縮的，並且可以直接在CSS中維護。我們可以使用純CSS3來改變顏色，陰影，背景漸層以及幾乎所有其他內容。使用此程式庫的另一個原因是，它已完全最佳化，並且完全不需要JavaScript，因此沒有相容性問題。

亮點：

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

20、Lineicons

網址：https://lineicons.com/
格式與類型：SVG, Web font, Icon fontace
價格和授權：免費

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

該圖示套件是完全免費的，並帶有450多個線型圖示。它涵蓋了來自不同類別的項目所需的每個基本圖示。 LineIcons 也提供免費的CDN和清晰的文檔，輕鬆上手。它帶有2個不同的可擴展軟體包–可以根據專案需要使用WebFonts和SVG檔案。

亮點：

• 450 個免費圖示
• SVG檔案
• 免費CDN

總結

選擇圖示庫時不應該是基於圖示庫受歡迎的程度，而是哪個圖示庫比較適合目前的開發項目，哪個圖示庫的風格更符合我們應用程式的風格。

希望這篇文章有助於選擇最適合你需求的解決方案。

英文原文網址：https://blog/top-icons-packs-and-resources-for-web/

#作者：Eugene Stepnov

譯文網址：https://segmentfault.com/a/1190000022273604

更多程式相關知識，請造訪：程式設計影片！ ！

以上是值得收藏的20個前端開發ICON圖示庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！