編輯導語：在B端設計中，往往離不開圖標的設計。那么，設計圖標都有哪些內容呢？關于B端圖標設計的設計難點是什么？B端圖標的搭建規(guī)范又是什么？帶著這些疑問我們一起來看本篇文章，希望作者能夠為你解答這些疑惑。

目前我主要深耕于B端設計中，深知B端圖標設計與C端有很大的不同，無論是應用的場景、設計的理念，都有非常大的差異。

而現(xiàn)在網上有不少關于C端圖標如何圖標繪制的文章，對于B端的方向少之又少，因此我們今天就來聊聊圖標，聊聊B端圖標究竟應該如何設計？

在我們的設計元素中由 色彩 color、文字 font、圖標 icon、圖形 shape、空間 space 這五個部分組成，而圖標的影響是整個產品的形象與氣質，起著畫龍點睛的作用。

在圖標的設計中，它既需要具備嚴謹?shù)脑O計態(tài)度，同時還要兼顧設計效率。

前者是提升產品的視覺表現(xiàn)，后者是節(jié)約企業(yè)開發(fā)成本，無論是我之前一篇文章講到按鈕，又或者是每個B端產品中的導航，都涉及到了圖標。今天我就和大家來聊聊如何嚴謹高效的設計B端圖標。

在設計系統(tǒng)中，基礎組件與業(yè)務組件遍布系統(tǒng)的各個角落。

因為大多數(shù)B端設計系統(tǒng)都是采取這樣的核心思想去構建，這樣更能夠滿足B端系統(tǒng)的實際工作需求，同時又能讓設計系統(tǒng)真正落地，符合B端產品“復用”的設計理念，使每條產品線都能夠高效的搭建。之后我會單獨出一期設計系統(tǒng)的文章，咱們之后單獨細講。

聊聊它們兩的定義：

• 基礎組件：每一個產品中都可以進行復用，是搭建整個系統(tǒng)的基礎；
• 業(yè)務組件：需要滿足特定產品的需求，同時在功能上，不會進行多場景復用，作為單獨的模塊進行分類。

這種思維方式在我們團隊中，被稱為基礎業(yè)務拆分法，運用到我們的每一個產品線中。

還沒理解到？我舉一個例子，在Teambition Clarity Design，就按照相同的思路構建的設計系統(tǒng)。

在Teambition Clarity Design設計系統(tǒng)當中，所有組件都分為：基礎組件、業(yè)務組件，我猜測正是通過這樣的劃分，才使得Teambition的設計系統(tǒng)能夠適用于更多的業(yè)務場景，滿足飛流、行云、thoughts、甘特圖、協(xié)作全景等多條產品線的設計需求。

回到圖標當中，我們可以使用相同的思維方式，對圖標進行相應的拆解分析。

• 基礎圖標：屬于整個B端圖標當中的基石，主要是頁面中最為基礎的圖標組成。

比如：設置、編輯、搜索、時間日期等都屬于基礎圖標，每個系統(tǒng)都必須有的基礎圖標，所以在繪制圖標庫的過程中，基礎圖標可以確定整個圖標的性格[1]。

[1] 圖標性格：為圖標整體給人的視覺感受（在本文第二章會著重講到）

• 業(yè)務圖標：屬于B端圖標設計中的業(yè)務分支，和我們每個產品的業(yè)務模塊都保持一致，通常是每個系統(tǒng)都會有一套獨有的業(yè)務系統(tǒng)圖標。

比如：公海池、線索池、歸屬人管理、商機管理、客戶管理等，都屬于業(yè)務圖標。業(yè)務圖標主要是要求設計師能夠進行快速拓展。

當然基礎圖標與業(yè)務圖標之間也并不是一塵不變的，很多業(yè)務圖標在產品中頻繁的使用會被提升到基礎圖標當中，同理使用減少也會進行相應的剝離。

一、B端的圖標與C端平臺圖標的差異

1. 圖標內容不同

1）B端圖標求同

B端產品要與同類型的圖標盡量保持表意一致，在圖標表達形式上差距不要太大，相似性要高。

因為B端產品的本質是滿足客戶對于工作、效率的需求，因而在B端圖標中，需要與行業(yè)中的設計語言和思路保持高度的一致，做到圖標之間 “形似”，這樣用戶在多個B端軟件進行切換過程中，會減小用戶的切換成本。

2）C端圖標存異

C端產品是要在同樣的文字上進行形式上的求變，與別的產品形成個性差異。因為在目前的C端市場中，圖標的同質化異常嚴重。

想要圖標獨具一格，就必須突出自己的設計理念，讓用戶快速記住你這個品牌。因此需要考慮的是怎么樣在同樣的內容情況下，設計出更獨特的圖標風格。

比如在下面的例子中，就是因為C端追求風格的原因，追趕者都會緊貼行業(yè)頭部的設計風格，在設計風格上做到 “神似”，但是在每一個圖標的內容上，他們都會存在巨大差異。

2. 設計難點不同

1）B端變化多

B端圖標的設計難點在于業(yè)務名稱復雜且多變，在B端圖標的設計場景中，會與各種業(yè)務名稱進行關聯(lián)，因而需要去思考每個業(yè)務所表達的特殊含義，遇到各種生僻字與英文縮寫時，圖標往往是需要去多維度的探究與思考。

比如：在B端云產品當中，MySQL、MongoDB、SQL Server 是常見的云產品，如果你是第一次接觸，需要去深入理解業(yè)務才能夠準確去表達圖標的含義，去理解每一個圖標在行業(yè)當中設計的形式并加以設計。

2）C端趣味強

C端圖標更多偏向與趣味性的表達，比如大多數(shù)的圖標會采用去做圖標視覺上的優(yōu)化，而不會去考慮業(yè)務層面的東西，也因此兩者的難點也存在不同的差異。

3）設計側重點不同

• B端講究擴展性

由于B端產品使用圖標場景較少，但在圖標的數(shù)量上會比C端圖標多上好幾倍，同時你還需要使用圖標去表達不同業(yè)務間的關系，因此B端圖標更講究 擴展性。

比如同樣是流程申請，在快遞信息流程申請、采購備料流程申請、采購流程申請的圖標之間，需要存在一些相同點與不同點，這就需要你多去思考，在同時來了多個圖標設計需求時，如果通過分區(qū)實現(xiàn)圖標的快速設計。

• C端講究整體性

C端圖標雖然圖標數(shù)量較少，但是使用圖標的場景卻又十分復雜。

比如品類區(qū)、我的頁面中、各種功能圖標以及二級頁面圖標，因此需要通過整體性的考慮，將多場景的圖標進行串聯(lián)，形成一整套視覺圖標體系。

4）設計風格不同

• B端更直接

B端產品因為用戶的屏幕顯示參差不齊，會直接影響設計師對于顏色的直接判斷，較細的圖標會直接影響用戶的閱讀體驗，因此圖標形式建議多采取面性圖標或者2px的線條圖標，能夠增加圖形的識別度。

圖標的對比度需要滿足W3C的AA、AAA原則，用戶才能更好的識別。

• C端更多元

C端產品因為手機屏幕分辨率的不斷進步，已經進入高分辨率時代，手機屏幕色彩也更加地準確，因此圖標的視覺風格會更加多元，更能讓視覺設計師得到一個很好的發(fā)揮。

二、B端圖標規(guī)范

在B端圖標設計中，我們一直在追求系統(tǒng)、高效、高質量地輸出。

一方面對于B端產品而言，往往優(yōu)先聚焦于主要流程的核心體驗， 圖標往往是低優(yōu)先級的需求；另一方面，出現(xiàn)不統(tǒng)一、不美觀的圖標，無一例外都是在損耗著用戶對于產品的體驗與感受。

比如最近設計圈的 “有贊審美缺失部”事件，也從正面反應了B端設計師對于圖標的認識不夠清晰，但透過現(xiàn)象看本質，是有贊部門對于圖標規(guī)范的缺失。因此，B端的圖標規(guī)范就顯得尤為重要。

我們再從圖標出發(fā)，從宏觀上講，圖標是一門全球通用的“符號語言”，而在每一種語言當中，必定會有它的“語法”以及“單詞”，圖標中的“語法”與“單詞”一般包含有那些呢？

1. 圖標中的“語法”

它就是我們常見的圖標規(guī)范文檔。一般需要包含：設計原則、輪廓模版、操作熱區(qū)、命名規(guī)則。

1）設計原則

在設計原則中，一般是貫穿整個產品的始終，因此需要設計師深入提煉，設計原則能夠幫助我們確定產品方向，通過設計原則的落地，有利于我們高效做出決策。

在圖標的設計原則中，主要通過設計的核心理念進行傳達，例如在Antdesign中，確定了圖標設計的四條原則。

• 準確：設計造型準確的圖標（保持偶數(shù)原則，去小數(shù)點）；選擇表意準確的圖標，不對用戶的認知造成困擾；
• 簡單：在表意清晰準確的基礎上，盡量保持圖形的簡潔，不做多余的修飾；
• 節(jié)奏：挖掘構圖中的秩序之美；
• 愉悅：賦予適度的情感。

2）輪廓模版

輪廓模版是為了明確圖標視覺尺寸。我們通過 Keyline作為形狀的基礎，去規(guī)范我們圖標的核心形狀，這樣能夠幫助我們設計出大小統(tǒng)一的圖標，在多條產品線之間也能保證統(tǒng)一的視覺重量。

3）操作熱區(qū)

這是經常被B端設計師忽略的的細節(jié)：

一方面操作熱區(qū)最開始興起于移動端，不知道大家還記得一句很經典的話嗎？“iOS的最小操作熱區(qū)為44px，安卓則為48px”；另一方面到了桌面端后，因為屏幕分辨率的不同，沒有規(guī)定最小操作熱區(qū)。

但受到文字落地方式[2]的限制，12px漸漸成為大家公認圖標操作熱區(qū)的最小值。

[2]落地方式：因為在Chrome瀏覽器中，文字受到瀏覽器大小的限制，最小的字體為12px，而在12px中的文字，與12px的圖標搭配最為合適，圖標都會與文字進行搭配使用，所以12px為PC端圖標最小尺寸。

4）命名規(guī)則

命名規(guī)則是屬于一項最為基礎的技能，一般有經驗的設計師都會有他自己的一套命名規(guī)則，而在圖標規(guī)范中，需要明確多項目之間有哪些不同。

比如每個產品項目有自己單獨的后綴，在公共的基礎圖標部分又使用相同的命名規(guī)則，這樣既能夠讓圖標應用到各個產品，同時每個圖標之間也能追尋到最終的源頭。

比如常見的命名規(guī)則：組件_類別_功能_狀態(tài)，但是在B端產品中通常為：組件_類別_狀態(tài)，這里將大量的組件、類別、狀態(tài)的英文命名都集合到一起，建議收藏。

2. 圖標中的“單詞”

它是我們常見的圖標資源。一般由：圖標性格、圖標場景兩部分組成。

1）圖標性格

在圖標的設計中，圖標性格尤為重要。我們要根據自身產品特性，選擇與特性相匹配的圖標性格。

我將圖標的所有性格羅列出一個坐標軸，通過圖標的粗細以及圖標圓滑程度的不同，將圖標分為四種不同的風格：粗曠、可愛、精致、商務。

在B端圖標設計中，粗曠與商務是更適合的圖標性格。在圖標性格的選擇中，我們要與產品的設計理念相融合。通過對圖標性格的確立，我們也能更好的縮小范圍減少設計資源浪費。

ps：當然你應該根據自身產品的視覺表現(xiàn)進行相應優(yōu)化，拒絕生搬硬套。

2）場景不同含義不同

圖標是一門全球通用的“符號語言”，所以也具有多語意的特性，一些語言在不同的場景有著截然不同的意思。圖標也一樣，我們需要根據不同的場景去表達不同圖標的含義，因此就需要對B端圖標的場景進行一個系統(tǒng)梳理。

先來看一個例子：

在這個例子中，相同的五角星在不同的場景對應著不同的意思，比如在淘寶詳情頁中星星代表著收藏；在美團點評中代表著每一個評價的評分，這樣場景的不同含義也不同也，因此我們需要去梳理B端圖標的場景：

• 基礎組件場景 – 象形圖標

在文章開始“咱們老規(guī)矩”中講到：基礎組件與業(yè)務組件之間的差距，這里就不再贅述兩者區(qū)別。

B端產品中，基礎組件需要涉及很多圖標，比如：日期組件中，需要有日期圖標作為組件的屬性展示；下拉菜單中，需要有一個下拉箭頭來代表。而這些基礎組件中都使用基礎圖標，又因為這些圖標都采取象形的手法簡化而來，因此基礎圖標大多數(shù)為象形圖標。

象形圖標：象形圖標是根據實際生活中物體的提煉所得，比如我們說的編輯，是通過鉛筆象形而來，經過大家對于鉛筆編輯的不斷理解，久而久之形成；篩選是通過漏斗象形而來；在象形圖標的設計中，需貼合真實使用場景。

• 運營模塊場景 – 表意圖標

通常出現(xiàn)在各種插件市場以及運營商城的頁面中。也是B端產品盈利的一個關鍵所在，在行業(yè)內常說的一句話：“Saas產品基本不掙錢，就是交個朋友，掙錢全靠后期運營與維護”。

因此，在運營模塊使用的圖標也格外被重視，比如我舉幾個例子，他們在運營模塊中，都采取了“表意圖標”進行展示。

表意圖標：

表意圖標是生活中原本不存在的物體，通過不斷發(fā)展，大家將某類東西約定俗成創(chuàng)造出的一個圖標，通常表示某類事物或某類行為比如：砍價、社群等等。

要提醒大家的一點，這類圖標基本都是約定俗成，所以在設計上不要有過多變動，以免讓用戶感到疑惑。

• 專業(yè)性場景 – 文字圖標

在B端圖標場景中，還存在一類特別專業(yè)性的圖標，這類圖標在行業(yè)中往往沒有約定俗成的表達形式，而在設計表達上，也無法去使用簡單的圖形，因此使用圖標存在很大認知成本。比如：拼團、清倉。

這時最好的解決辦法就是將相應的專業(yè)詞匯文字化，使用“文字圖標“將關鍵詞表示出來。

文字圖標是使用文字化的圖標直接表達含義，在一些垂直專業(yè)領域，常用文字的縮寫形式進行表達。比如美團外賣中的“打折”作為大眾都需要使用的一個圖標，很難去使用圖形符號去描述。

因此使用“折”就能夠準確直接的表達，文字圖標雖然使用起來過于簡單粗暴，但是它的信息傳達比其他形式要高，因此在B端環(huán)境復雜的圖標生態(tài)中，是常用的方式。

而在現(xiàn)在很火的下沉市場中，也多采取文字圖標的形式，這樣不會因為用戶的認知水平的高低產生立即上的偏差。

• 導航菜單場景 – 組合圖標

組合圖標在B端場景中經常存在，因業(yè)務復雜，常常需要將圖標進行公用，同時進行相應的思考，關于組合圖標與場景我會在第三章講到，這里就不細細展開。

三、B端圖標如何搭建規(guī)范

1. 根據公司不同階段進行搭建

在團隊中建立一整套圖標規(guī)范通常會有兩種模式：開源與自主搭建，我會從效率、品牌、完整度三個方面來進行分析與評價：

開源圖標：站在巨人的肩膀上，能夠為自身產品建立一套快速的圖標規(guī)范。

通過圖標庫的引用，減少公司的設計成本，能夠有較高的設計質量與效率，但使用開源圖標主要針對的是公共業(yè)務，對于一些特定業(yè)務而言，會有相應的局限性，我會在第四章與大家獨家分享一些開源高質量的B端圖標庫。

• 效率：★★★★★
• 品牌：★★★☆☆
• 完整度：★★★☆☆

自主搭建：自主搭建會擁有自己獨特的視覺風格與表達形式，但需要耗費一定的設計成本，自主搭建是一個循序漸進、反復打磨的過程，也常會推翻重來，因此需要大量的時間人力成本。

對于公司而言獨特的符號語言更有利于產品的對外營銷。但自助搭建更考驗設計師的能力，如果能力欠佳，會得不償失。

• 效率：★★★☆☆
• 品牌：★★★★★
• 完整度：★★★★★

明白了兩種搭建方式后，在我們搭建B端圖標規(guī)范之前，需要明確自身的產品的“定位”，根據產品的不同階段，我們會采取不同方式進行規(guī)范的搭建。

在我了解的產品階段中，一般分為三種：初創(chuàng)期、成長期、成熟期

• 初創(chuàng)期的產品：因為處于試探階段，產品需要經常迭代，所以處于一個變化的節(jié)奏中。為了應對這種變化，引用開源圖標庫便成為一種較好的解決方式；
• 成長期的產品：成長期的產品會從混亂到逐漸的穩(wěn)定。設計師也會逐漸意識到產品的整體形態(tài)以及后續(xù)的規(guī)劃方向。這時候就需要整體考慮，去優(yōu)化掉初創(chuàng)期所遺留下的問題，同時提升產品的設計競爭力；
• 成熟期的產品：成熟期的產品需要構建一套自己的方法論。并且要脫離圖標這個單一維度。去多維度多層次的思考，通過自主搭建，形成多條產品線的統(tǒng)一，建立完整成熟的設計系統(tǒng)來滿足業(yè)務發(fā)展的需要。

2. 圖標資源如何設計

在圖標資源設計當中，我把圖標分為基礎圖標與業(yè)務圖標的分類進行講解，讓大家能夠更好理解。

1）基礎圖標

在我們的基礎圖標中，保證圖標性格一致的前提下，又牽涉到直角拐角以及圖標粗細等設計細節(jié)，因此在這里和大家細講這方面的內容。

形大角大、形小角小。

在基礎圖形設計中，圓角是一個經常被忽略的細節(jié)，我們要根據圖形的面積大小去設計我們圓角的大小，而不是拿到圖標就是2x的圓角，這時候就需要講到圖形與圓角之間的關系。

當基礎圖形占的面積過大同時為正方形時，建議使用3x的圓角；當基礎圖形變小時，比如滿高(寬)矩形時，建議使用2x的圓角。當基礎圖形為較小(小于1/2寬高)矩形時，建議使用1x的圓角。

* 這里的3x是指與描邊的大小比例

透視正確

在圖標的透視中，優(yōu)先選用正視的圖標進行繪制，這樣能夠保證圖標庫的風格一致但對于有些圖標不能通過正視角度進行表達時，使用立體圖標表示，一樣符合透視一致性的原理，但需要極力避免。

2）業(yè)務圖標

業(yè)務圖標因其特殊性，一般都為組合圖標，通常組合形式為A+B+C的模式，如果采取單個圖標繪制，難以保證圖標的一致性，同時產出效率極低，因此業(yè)務圖標會采取模塊化的方式進行設計。

業(yè)務圖標在B端產品的菜單導航最為常見：比如在我接手到的CRM產品中，一共有50多個業(yè)務圖標，你是單一思考還是全局思考，就顯得尤為重要。

我將圖標模塊化的方法分為以下幾步：

第一步：拆解整理

當我們拿到需求時，因為圖標數(shù)量龐大，所以需要尋找到圖標中的共性與個性。

舉個例子：銷售簡報管理、銷售訂單管理、銷售權限管理、銷售公海池管理、業(yè)務銷售插件、商機銷售階段，他們基本都是頭部以銷售開頭，最后都會跟一個管理進行動作的描述。而中部的描述不同，也會在產品中的其他部分找到與之對應的文案。

因此我們就發(fā)現(xiàn)了圖標當中的一個共性，而在一個龐大的B端圖標庫中，有這樣的共性的地方還有很多，我們通過一點點的拆解整理，整理出一個圖標間共性表格，完成拆解整理的工作。

第二步：模塊分區(qū)

通過模塊分區(qū)，了解到圖標的結構，模塊分區(qū)的思路來源于Ant Design 圖標規(guī)范2.2 中講到的圖標韻律。

在一次偶然的機會，看到Ant Design對于相同類型的圖標給出想類似的展現(xiàn)形式，因此想到我們圖標對于自身應該采取模塊的方式進行分區(qū)。

通過一周的時間總結，對于市面上大多數(shù)B端圖標進行的拆解，我將整個模塊分為三個區(qū)域：一個主分區(qū)與兩個次分區(qū)。

通過主次分區(qū)間的不同組合，能夠滿足絕大多數(shù)B端圖標的使用場景。

• 主圖標：主要表達圖標的主要功能，會根據業(yè)務不同產生不同的主圖標；
• 次圖標：代表與主圖標相對應的功能，比如常見的：管理、權限、規(guī)則。

這樣通過主、次圖標的組合，就能夠將組合圖標進行高效的繪制。

第三步：分區(qū)繪制

使用分區(qū)繪制，落地分區(qū)的圖標形式。

在一個圖標中，如果讓你單一繪制例如銷售、審批、數(shù)據等圖標時，難度比雜糅到一起的組合圖標要低，因此分區(qū)繪制會時圖標的難度降低，可以讓團隊中其他水平較低的設計師一同參與。

在繪制中，我們以24px大小的圖標為例：

• 主圖標的大小為：16px
• 次圖標的大小為：8px

按照相對應的大小尺寸，主圖標在圖形上要設計得更明確，因為外部還要與次圖標進行疊加，同時需要在多個圖標中出現(xiàn)同樣的圖形，也因此在造型上不能過于復雜。

次圖標以簡潔為主，因為較小的面積，更多狀態(tài)的展示，需要它能夠簡潔易識別，這樣才使圖標在疊加的過程中，使兩者圖標更具代表性。

第四步：細節(jié)調整

因為是多個圖標進行重疊形成，所以也會存在許多圖標連接間細節(jié)毫無規(guī)律的情況，因此保留相應的細節(jié)，比如圖標間的間距、圖標未來的擴展性等。

四、市面上的圖標規(guī)范、圖標庫與圖標

1. 圖標規(guī)范

1）Lightning

https://www.lightningdesignsystem.com/guidelines/iconography/

salesforce是一個值得仰望的B端產品，而伴隨著salesforce的不斷發(fā)展，Lightning設計系統(tǒng)也不停地在迭代，Lightning中的圖標規(guī)范不僅全面，而且落地，同時它也擁有500+個圖標資源。

關于圖標規(guī)范，Lightning系統(tǒng)一直做到十分落地，因為Salesforce已經成型多年，設計規(guī)范一直十分穩(wěn)定，關于它規(guī)范當中的每一個細節(jié)，都值得細細品味，感興趣還可以去多研究設計系統(tǒng)的迭代更新記錄，里面有寶藏～

2）ATLASSIAN

https://atlassian.design/foundations/iconography/

ATLASSIAN在我心中一直是B端行業(yè)的頭部產品，無論是產品還是設計，它旗下的Jira、Confluence、Trello，都有著很高的設計水準，同時作為多個產品的設計系統(tǒng)，它的包容性也值得大家去學習，可以多去實際頁面去深入體驗，會有很多不一樣的收獲。

3）Material Design

https://material.io/design/iconography/system-icons.html#icon-themes

在B端產品中，為什么我不推薦apple又或者其他的設計語言，相比而言，Google的Material Design一直擁有著很高的水平。

與實際情況相比，Material Desgin 設計的背景與B端實際情況十分類似，同樣擁有著混亂的屏幕分辨率，亟待解決的頁面層次，卡片化的設計思路，因為MD設計設計在對這些特殊情況都有深入的考慮。

2. 圖標庫

1）REMIXICON

https://remixicon.com/

Remix Icon是國人設計師章蕭醇開源的一款圖標庫，目前這個圖標庫里共有2271個圖標。圖標涵蓋建筑、商業(yè)、通訊、設計、文檔編輯、財務、健康等十多種圖標類型，可以直接下載SVG或PNG版本或者復制SVG代碼。

從圖標質量上來看，Remix Icon的質量算是我見過開源圖標庫中最高，擁有線性和面性兩種不同版本，兩千多個的圖標里，一定有你需要的～

2）Fearher

https://feathericons.com/

https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-Component-Librar

Feathericons是一個漂亮和簡單的開源圖標庫，每個圖標均以24×24網格設計，它包含282個SVG圖標，你可以使用右側的設置去調整圖標的粗細以及圖標大小，你還可以通過單擊網站右上角的月亮圖標來切換明暗模式。

如果你是Figma的用戶，作者也提供了Figma插件，在使用上的體驗會更加的友好。

3）EVA Icons

https://akveo.github.io/eva-icons/#/

Eva Icons是Eva Design System中的圖標部分，一共有480個開源圖標，分別以SVG和PNG格式展示。

在圖標類型上，你可以選線性和面形兩種風格圖標，很有趣的一點，你可以將鼠標Hover圖標上去，你可以自己設定圖標的動畫效果，如：放大、晃動、翻轉，這大概就是設計師的情懷吧～

4）heroicons

https://heroicons.dev/

Heroicons是由Tailwind CSS的創(chuàng)建者構建的另一個很棒的開源圖標庫。它具有超過165個具有填充和輪廓樣式的獨立圖標，但每個元素也提供深色和白色版本，圖標的外觀非常優(yōu)質且制作精良。

這些圖標的入門非常簡單，他們還提供了Figma中的庫。如果你想包含所有的圖標，你可以從公共資源庫中下載所有的SVG文件。

5）Ikonate

https://ikonate.com/

最后但并非最不重要的是，Ikonate是另一個令人敬畏的開源圖標庫，它擁有約100個基于平面設計的高級圖標。它是根據非常寬松的MIT許可證慷慨授權的。

導出之前，你可以輕松配置圖標的大小，邊框寬度，邊框和邊角以及顏色。

6）IconPark

http://iconpark.bytedance.com/

字節(jié)跳動在9月3日開放的圖標庫，很大多數(shù)人都不知道，圖標風格有線性、填充、雙色、多色可選，圖標質量也十分的高，支持批量下載，網站還處于初期，感覺目前還是針對內部人員使用，只是目前將其開源出來，效果還不錯。

因為篇幅關系，還有幾十個圖標資源網站放在http://youthce.com，這里就不做過多展示。

3. Iconfont上優(yōu)質的圖標資源

先說一句，由于iconfont的鏈接放到公眾號后老是打不開，因此大家可以通過我提供的作者名稱，進行iconfont 用戶搜索找到。

1）阿里云設計中心

先這個是阿里云的賬號，很多B端同學做云產品的可以多多參考：

2）musongtao

他的OA辦公系列圖標給我留下了很深刻印象，之前也嘗試過臨過一些。

3）Mokki

4）Hi劉老爺

5）iconfont 官方圖標庫

五、圖標發(fā)展史

1. 遠古時期-圖片與雪碧圖

之前，在與一些設計前輩聊天時，談到過這個話題，那時候的圖標還原都采取圖片的形式，隨著網站頁面不斷增加，大家就會發(fā)現(xiàn)圖片十分占據請求資源：

一方面網頁中每當有一個圖標都會去請求一次請求頻率十分的高，另一方面圖標本身體積很小，這樣頻繁請求后臺服務器會成承受更大的壓力，這樣顯然是不劃算的，隨后雪碧圖就出現(xiàn)了。

雪碧圖：就是將多個圖標合成成為一個圖表，然后前端利用 css 的 background-position 定位去顯示不同的 icon 圖標。雖然解決頻繁請求的問題，但還是存在一個巨大的痛點，難以維護。

因為當設計師每增加一個圖標，都需要修改原始圖片，而且通常雪碧圖是前端使用工具生成，工具稍稍不對就會影響前面定位好的圖片，同時雪碧圖的修改直接影響到之前的緩存，長此以往就會變得難以維護。

2. 發(fā)展時期-字體圖標

因為使用圖片落地圖標還是會有種種問題，字體圖標便開始問世，第三章剛講到圖標本質也是一種“文字符號”，所以在屬性上是極為符合的。

在前端CSS開始支持@font-face引入web font中后，字體圖標就來到了高速發(fā)展的時期，比如Font Awesome就在這時候崛起，這時候國內出現(xiàn)了一個圖標托管網站：iconfont。

3. 成長時期-iconfont的興起

Iconfont已經陪伴我們7年，它集合了圖標托管、共享、管理平臺，算是解決了國內大多數(shù)設計師圖標管理的需求，iconfont是“阿里爸爸”旗下的產品，主要是有很多圖標資源提供給大家下載。

當然強烈建議iconfont能夠擁有排序功能，對于我這種強迫癥來說，不能忍受圖標類型是混亂的。

4. 崛起時期-svg

svg源本就是圖標的最好歸屬，一方面svg本身就是擁有伸縮的特性，能夠滿足圖標任意放大縮小的功能；另一方面在眾多編輯繪圖軟件中，都支持svg的任意編輯，非常適合設計師再修改。

同時svg可以直接使用，也會避免字體圖標那樣需要需要通過管理平臺進行維護。

svg真正的崛起還是在內聯(lián)svg的出現(xiàn)，在2016年Github全面啟用了內聯(lián)圖標，可以將圖標直接嵌入到HTML的內容中，是它的文檔模型能夠被JS/CSS訪問操作，前端就可以通過CSS的控制實現(xiàn)圖標顏色、樣式，滿足圖標的多種需求。

如果大家感興趣，可以出個番外篇與大家聊聊font icon 與 svg的對比，想要的就在下面討論區(qū)留言～（待定）。

在圖標的設計中，我崇拜過Susan的細膩，能夠在如此低的分辨率中做著設計，而對于后續(xù)的mac圖標的設計中，都有著深遠的意義。

我也敬佩錘子，將具象的圖標刻畫的細致到位，以至于很多時候看著圖標發(fā)呆，細細研究它的技法。希望B端的圖標不要因為門檻而困擾著大家，我曾經深受圖標困惑，希望這篇文章你會有所收獲。

參考文獻：

[1] https://www.zcool.com.cn/article/ZOTU1OTMy.html

[2] https://www.zhangxiaochun.com/icon-style-guide-1/

[3]https://www.uisdc.com/b-end-illustration-system

[4]https://www.dazhuanlan.com/2019/10/06/5d99a15b097fd/

作者：CE，2B行業(yè)的2B設計師～公眾號：CeDesign

本文由 @CE 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議。