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

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

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

最佳圖標庫的列表

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

Flaticon

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

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

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

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

亮點

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

Jam Icons

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

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

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

Fontisto Icon Pack

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

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

Fontisto 是矢量圖標包。可以立即自定義圖標:大小,顏色,陰影以及 CSS 可以完成的所有操作。該產品不需要 Javascript。Fontisto 圖標是矢量,這意味著它們在高分辨率顯示器上看起來會很好。

在該網站上,我們可以找到有關如何啟動和自定義產品的完整文檔和各種指南。我們只需將鏈接粘貼到網站上即可開始使用該產品。此外,還可以將 Fontisto 與適合的軟件包管理器一起使用:npm,yarn,bower等。

Iconmonstr

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

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

Iconmonstr通過其強大的搜索功能使搜索圖標變得簡單。我們還可以將自己喜歡的圖標保存在個人收藏夾中,以備將來使用。

亮點:

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

Pixsellz Material Icons Library

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

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

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

亮點:

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

Entypo

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

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

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

Evil Icons

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

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

這個庫很大包含所有內容-包括SVG和原始源文件。這意味著我們可以下載SVG以及Illustrator文件和Sketch的.sketch文件。

 Streamline Icons

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

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

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

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

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

亮點:

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

Smashicons

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

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

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

Smashicons 在其庫中提供了超過219000+個圖標的全面圖標集合。Smashicons 的工作方式與其他產品略有不同:其定價基於每月5美元的月度計劃。這意味著您每月只需支付5美元,就可以訪問他們現有圖標的整個集合以及他們發佈的任何將來的圖標。

亮點:

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

Icons8

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

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

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

亮點:

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

Icomoon

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

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


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

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

亮點:

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

Glyphish Icon Pack

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

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

Glyphish提供了各種不同的圖標庫。每個庫都有各種不同的格式,包括PNG,SVG,PSD和AI。基本圖標的價格為25美元,而最終的圖標包的正常價格為99美元。免費演示包含50個圖標。設計人員可以輕鬆編輯所有圖標。

亮點:

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

Ionicons

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

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

Ionic 小組決定以稱為Ionicons的網絡字體的形式發佈其圖標。自然,它們是完全免費的,並且可以在GitHub上使用。我們甚至可以使用CDN版本的樣式表將這些圖標直接添加到的站點中,它也支持 SVG 和 Web 字體。

亮點:

  • 完全免費
  • 通過複製和粘貼鏈接輕鬆設置
  • 以網絡字體的形式出現
  • 定製尺寸
  • 超過1100個項目

Angular Material Icons

網址:https://material.io/resources/icons/?style=baseline格式和類型:SVG, Webfont, Material design價格和許可證:Free, Apache License 2.0

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

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

Linearicons

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

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

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

亮點:

  • CloudFront CDN
  • 提供免費版本
  • 帶有不同的格式:SVG,PDF,Webfont。

Feathericons

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

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

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

這些圖標很容易編輯,無論大小都很清晰。它們首先被設計成一種圖標字體,所以它是作為一種web字體嵌入的。

Iconfinder

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

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

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

圖標文件提供SVG,PNG,ICO,ICNS和Adobe Illustrator格式,尺寸範圍為16×16到512×512。如果找不到自己喜歡的東西,或者只是想要專門為我們品牌設計的自定義圖標,也可以與網站上的一些最佳設計師合作。

亮點:

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

The Noun Project

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

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

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

該網站的庫由各種獨立設計師設計的圖標文件組成。在這裡,創作者和創意專業人士可以合作銷售他們的設計,並找到看似無窮無盡的高級圖標庫。

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

亮點:

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

Fontawesome Icons

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

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

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

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

亮點:

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

Lineicons

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

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

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

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

亮點:

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

總結

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

希望本文有助於選擇最適合你需要的解決方案。


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


分享到:


相關文章: