天天看點

前端圖示方案選型

本篇文章給大家推薦20個适合前端開發/設計的 ICON圖示庫。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

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

前端圖示方案選型

最佳圖示庫的清單

0、阿裡iconfont

http://iconfont.cn/

前端圖示方案選型

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

32p

x三種尺寸。我們還可以選擇填充或描邊圖示。

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