應用圖標，如搜狐、新浪、網易等網站的logo
功能圖標，如各種音樂播放器的“開始”、“暫停”、“快進”圖標；
根據設計風格分類可分為
剪影圖標；
輕仿圖標:在原有仿圖標的基礎上，減少了厚重的紋理，去除了投影、漸變，將紋理轉化為扁平的圖標；
輕紋理圖標:漸變/投影/不透明等圖標比較獨特，細節較多；
準物化圖標:有風格、有質感的有形彩色圖標；
覆蓋圖標；
以文字為主體的圖標，如支付寶、淘寶圖標；
插畫圖標，通常是遊戲應用，直接用遊戲中的人物、道具或圖片作為圖標。
圖標類型和樣式總結本文來自Youyou.com，主要是因為近期工作中經常使用圖標，但是設計給出的圖標在頁面上總是有點不協調，所以看到這篇文章就想收藏分享壹下。
作者寫的還是很詳細的，喜歡的可以關註他。鏈接地址如下。
編者按:圖標類型千變萬化。其實上萬個圖標都是從線性、面狀、線面結合三個方面，結合透明、漸變、色彩疊加、紋理、多維空間等表現形式來設計的。這篇文章將近6000字，壹篇文章就能看懂所有的設計風格！
圖標是UI設計中極其重要的壹個環節。我們做的每壹個界面設計，幾乎都涉及到圖標的表達。優秀的圖標設計可以讓界面表達更加精致有趣。
圖標設計往往體現了設計師的基本功。所以，除了每天多畫壹些圖來提高對圖標造型的控制，我們還需要了解和學習圖標設計的潮流類型，從而幫助我們提高設計中的效率。
出於自學的目的，我壹般在瀏覽壹些設計網站的時候會做相應的收集。因此，本文主要梳理了圖標設計的“類型和風格”，以及我自己對每種圖標類型的思考。
圖標分類
設計網站上的圖標可以說是五花八門，不同類型的圖標有著獨特的魅力。比如線狀圖標簡單輕巧，區域圖標厚重直接。當然，同類型的圖標也有很多不同的表現形式。
所以根據我對圖標的理解，大致可以分為三類:線狀、面狀、線面結合。通過組合三種基本類型的表達式，可以創建各種各樣的表達式。
線性圖標
使用淺色線條勾勒出的圖標，整體感覺趨於精致、細致、犀利。不同的線條有不同的視覺感受，細線輕，直線硬朗，曲線柔和。
1.線性圖標的基本分析和思想
厚度對比
粗細不同，圖標的力度和重量也會不同。粗線圖標在視覺關註度方面會更突出，但與細線圖標相比也會顯得厚重。細線圖標精致、透氣、美觀。
但是在設計的時候，線條的粗細要根據整體UI風格來決定，而不是單純的考慮圖標的關註度，更需要從整體上考慮圖標和界面的平衡。
靈活性對比
直角和圓角決定了外觀的觀感和風格的走向。從下圖的對比可以看出，圓角越大，圖形越傾向於可愛和柔和(如下右圖所示)，圓角越小，則越直接、硬朗和陽剛(如下左圖所示)。所以剛柔或中的數值完全取決於整體風格的前期調教。
復雜與簡化的比較
除了輕巧簡潔，圖標的識別也是極其重要的。如下左圖所示，“過於簡潔”導致圖標失去了應有的辨識度，變得模棱兩可，而右下圖的元素疊加則讓圖標略顯復雜。在復雜與簡單的平衡中，在不影響圖標識別度的前提下，最大程度的提高圖標的簡單性。
特征識別度
除了簡潔，我們還需要考慮圖標的特性。比如下圖的“評論”圖標，當我把圖標上的“三點”去掉後，圖標還是有“對話/評論”的意思，但當我把下面的“箭頭”去掉，保留“三點”時，就會有歧義，可以表示為“更多”，所以設計圖標時要準確把握意思，避免歧義。
保持圖標特有的美感。
比如下面的“心形”圖標，下面左邊的圖片就是我們壹般的圖標，與圓圈結合後依然保持了原有的美感。但是，時不時的，我們會看到第三種設計。雖然整體造型保持了愛情，但為了“符合”整體風格，在審美上與原圖形略有不同，這也是我們需要思考的重點。
組合比例
組合的比例會影響圖標的精致程度，準確的“比例值”可以使整體造型趨於平衡，更具美感。如下例所示，嘗試了兩組不同尺度的效果，以圖標的窄邊作為“基準值”進行嘗試。當內部形狀為外部形狀的1:2時(如下圖2)，圖標的整體視覺效果比較均衡；當大於1:2，接近4:3時，圖標內部結構會顯得過於飽滿。但當小於1:2，接近4:1(下圖3)時，會產生稀疏和緊湊的效果。(此處比例僅為案例要求，實際設計以最終視覺感受為準。)
2.線性類型擴展
基礎理論，結合擴展應用，可以在generate中產生更多的創意。線性圖標並不只有壹種設計形式。通過以下案例，我們可以看到線條圖標設計類型的多樣性。
極簡風格
整體風格極其簡約，沒有多余的線條，通過線條還原圖形的本質。造型“簡單”卻有很強的辨識度，在視覺感知上輕松幹凈。
極簡風格圖標在於對圖形的控制。多壹筆可能復雜，少壹筆可能影響識別度。以上圖為例，圖標的組合元素保持在2個左右，整體比較幹凈。
實際應用:Instagram，Airbnb，臉書，Twitter。
兩顏色的
與“純色圖標”相比，更具表現力，細節更豐富，形式感更多樣。結合顏色的疊加、對比和互補，增強了圖標的層次感和豐富性。
同色系:同壹冷色系、暖色系或同色系的表現。如下圖案例所示，以深色為主色調，點綴亮色使圖標變亮，使圖標有壹種凸顯的感覺。
還有壹種情況是亮色的主色調與深色相結合，整體圖標效果還可以，但是沒有將亮色運用到圖標的關鍵特征上，使得圖標第壹眼的觀感稍微減弱。
對比互補色:色彩跨度更大，層次更分明。如下例所示，紅色和藍色的對比比單色圖標更有色彩，更有記憶點。
實際案例:騰訊動漫我的頁面
透明度變化
本質上是和上面壹種的壹種類型的設計。通過透明度的疊加和變化，增強圖標的層次感和空間感，減少圖標的壓迫感。
實際案例:愛奇藝9宮圖標
梯度分層疊加
漸變帶出圖標的質感，結合“深淺不同”或“飽和度不同”的變化，使圖標更加細致，更有層次感。
黑白+品牌色
黑白為主色調，結合品牌色作為點綴色。與常規的黑白圖標相比，不僅有所變化，還兼顧了品牌色彩。
實際案例:大眾點評攻略頁面圖標
線性漸變
結合漸變色，豐富了整個圖標的視覺表達，增強了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試。白色背景:粗線的視覺效果相對比細線更好，可以更清晰地表現漸變；黑色背景:細線的視覺效果比粗線更精致銳利。
實際案例:網易考拉、NAVER
壹次成型
這類圖標在視覺表達上具有較高的線性流暢性和設計感，重點在於整組圖標“開啟起點”的設置的壹致性。比如“從左到右”或者“從右到左”形成壹條完整連貫的線條，不壹致的打開起點會影響整組圖標的壹致性，應用到頁面上也會顯得淩亂。
斷點圖標
和上壹個差不多，但是沒有壹致性的要求。在線性圖標的基礎上，找壹個縫隙打破“全包裹圖標”的沈悶感，讓圖標具有滲透性和線條變化。縫隙的位置要盡量保持同壹個方向和大小，控制開口的數量，避免圖標的形狀過於碎片化。
實踐案例:騰訊體育，JD.COM。
區域圖標
區域圖標比線性圖標更能表達圖標的力度感和重量感，比線性圖標更容易吸引用戶的註意力。在識別方面，區域圖標更依賴於外輪廓的清晰度，所以打磨外形是設計中最重要的，清晰的外輪廓有助於提高識別度。
1.區域圖標的基本分析和思路
輪廓對比度
輪廓的不同會體現出不同的氣質，如下圖所示。壹種氣質比較直接硬朗，壹種氣質比較柔和可愛。平滑的形狀可以使整個區域圖標更加簡潔規則。如下圖所示，中間的圖標在輪廓處理上斷裂，整體輪廓造型缺乏連貫性。
中空對比
適當的鏤空不僅可以補充圖形的辨識度，還可以改善區域圖標的設計細節。另外，要控制鏤空部分占整體造型的比例。太小或太大都可能影響圖標的平衡。如下圖中右所示，鏤空過小對圖標的識別影響不大，不鏤空的話透氣性更少。
身體對比
形態差異也會有不同的視知覺。以“星”和“心”為例，單壹形狀的視覺感知比組合形狀更直觀，而組合形狀的圖標相對更精致，層次更多。日常設計中的經驗是:圖標形狀越小越好，越簡單越好，建議單體顯得更好；如果圖標的尺寸足夠大，可以采用組合設計來補充圖標的細節。
復雜與簡化的比較
設計區域圖標時，管理多余的細節也很重要。隨著細節的增加，區塊表面切割過多，會使整體圖標變得過於碎片化(如下右所示)。保持設計簡潔，提高圖標的辨識度，補充關鍵功能細節(下圖中的攝像頭閃光燈)。
2.區域圖標類型的擴展
表面圖標在設計上也可以結合各種表情，提升圖標的質感和創意，而不是簡單的填充顏色。
單色表面+點綴色
整體外觀使用統壹的顏色，結合圖標的屬性感知，使用不同的顏色進行點綴，通過點綴顏色增強圖標的視覺效果，做到既統壹又有區別。
多色雙色
通過對比色和相鄰色的搭配，營造出整體的圖標氛圍，提升了圖標的層次和豐富度，兩種顏色的表達也增加了圖形的趣味性。在日常app中很常見，簡單易出結果。
微觀紋理梯度
微弱的漸變增強了圖標的質感。漸變的方向會影響整體圖標的視覺效果，所以可以根據不同設計的需要進行調整。顯示了以下情況:
實際案例:全民k歌
透明度/灰度變化
隨著透明度/灰度的變化，原來的單色圖標變得更有層次感和空間感，設計細節更豐富，降低了單色平面圖標的厚度。
真實案例:企鵝FM我的頁面
透明度變化+漸變
漸變設計提高了區域圖標的質感，在色彩上有壹定的豐富性。在漸變的基礎上，區分組合類型的透明度，使圖標具有層次感。
透明疊加圖標+漸變背景
這種圖標通常應用於UI界面中的列表或頂部條目。
實際案例:全民k歌頁面。
顏色疊加滲透
圖標透明疊加後，產生交錯的負形，疊加第三表面。雖然整體設計保持扁平化，但增加了層次感和圖標細節。
實際案例:百度網盤
梯度分層疊加
整體效果接近改變透明度的圖標。通過深淺的漸變，在形狀的交界處有明暗的對比，所以圖標也有厚重感和層次感。
實際案例:NAVER，口袋生活
高斯模糊
這種圖標在APP裏基本見不到，比“透明度變化”或者“顏色疊加”更有層次感和空間感，圖標也有很強的設計感。
線面結合
結合了線性和平坦性的優點，既保持了平面的重量感，又有線性的精致和細膩。所以在設計的時候，我們可以根據圖標想要表達的具體感受來控制線面比例，不同的比例可以呈現不同的視覺感受。
1.線面組合圖標的基本分析與構思
線面比
隨著線面比的不同，圖形呈現的張力也會有不同的感覺。根據中間填充物的圖標形狀，嘗試了三種不同的比例。從下圖可以看出，當填充與形狀窄邊的比例為1:3(左圖)時，圖標呈現向內的感覺；當填充到形狀窄邊的比例為1:2時，(中間)圖標整體平衡；當填充與形狀窄邊的比例為2:3(大於1:2)(右圖)時，整個身體有向外膨脹的趨勢。
組合形式
可以用不同的組合繪制線條和表面。基於不同的組合形式可以設計出多種線和面圖標，不同的組合形式會體現出不同的設計風格。所以在設計的時候，盡量多思考，找出適合自己的組合方式。
復雜與簡化的比較
線與面的結合本身就是由兩種形式組成的，所以在設計的時候更需要控制整體的造型。單壹(線和面)的造型壹定要保持高度的簡潔，這樣最終組合形成的圖標才不會太復雜(左圖)。如果形狀本身過於復雜，會降低圖標的辨識度和視覺美感。
2.線-面組合圖標式擴展
線面結合的圖標結合了線性和曲面的優點，在設計上也繼承了兩者的優點。設計方法也是基於以上兩者的結合，所以可以結合更多的設計可能性。
黑白線+面部品牌色
接近“線性+品牌色”的做法，統壹的線性色與品牌色重疊。
實際案例:好好活著，靈魂
線和面雙色
在線和面的基礎上，對線和面的顏色進行區別。具體方法接近線性或平面雙色。
線面結合-陰陽
線面結合按50%的比例設計。根據上下、左右、居中等基本結構設計，整體圖標的視覺效果跳躍而不落俗套。
線和面雙色+位錯
在雙色圖標的基礎上，按照統壹的“百分比”縮放線條和曲面，進行透視和位移設計。整體視覺效果是交錯疊加，比普通雙色線和面更豐富。
實際案例:閑魚底部tab，面球底部tab。
線平面位錯+梯度
在之前風格的基礎上，逐漸設計出面或線的顏色，豐富了圖標的質感和色彩。
線-面透明度變化
它的設計方式與“線-面透明度變化”相同。下圖的案例中，“弱線強線”的第壹識別度較弱，而“弱線強線”的形狀識別度較高，更符合圖標的表達。
實際案例:新浪微博、騰訊新聞。
基於三種基本的表達方式，可以開發出不同的設計形式。除了以上案例，還收集了壹些其他的設計。
線-面組合C圖
總體來說偏向於插畫的感覺，細節和元素比較多，常見於壹些app的空白頁設計。
線面結合_卡通插畫
整體感覺很可愛，卡通，二次元，這在壹些二次元或者漫畫類app中很常見。
面_漸變強紋理
光影質感整體風格會比較強烈，經常出現在壹些活動或者小遊戲的界面中。
面對c平面現實主義
整體感覺比較平淡，細節的豐富程度接近現實感知。
線條和表面+漸變插圖
整體風格偏向於多彩的色彩風格，質感和細節都很豐富。
寫實風格
3D紋理圖標
因為C4D的制作成本比較高，目前在常規APP中很少見到。但3D作為主流的設計趨勢，在時間和能力允許的情況下，還需要更多的嘗試。
等距線-面組合
等距設計豐富了原有的線、面圖標，有立體透視的感覺。
除了以上，我們還會在實際場景中發現壹些特殊的圖標設計。
更多臉書頁面的列表圖標
整體風格偏向插畫風格+漸變紋理。因為更多的頁面設計為純列表，所以整個頁面在圖標設計上做了大膽的嘗試，比常規的單色圖標更吸引人。為了區分不同的服務，系統性質的功能圖標用色調區分。
APPStore遊戲和新應用界面中的類別列表圖標
整體是扁平化的設計表達，圖標的顏色還原了最基本的現實感知。
iOS系統中辦公軟件的起始頁圖標。
整體風格比較商務簡約，具象的圖形表達，略帶漸變的質感。
QQ移動版中的擴展功能圖標
整體風格傾向於輕寫實+輕微漸變。每個圖標都有豐富的細節，基於業務屬性和品牌顏色區分色調，整體上統壹又有區別。
40家自媒體商業素材網站視頻+插畫+圖片+圖標CreativeCommons(知識* * *享受)簡稱CC協議素材。如果創作者自願放棄作品的部分權利，仍然會有限制，比如要求標註出處和作者姓名。看到CC協議請閱讀說明。PD協議證明作品已經捐贈給了公有領域。
CC0協議是指創作者自願放棄作品的所有權利，可以無條件使用，包括商業使用。(但不允許上傳到其他素材網站，主張版權，或以非法方式使用。圖像所涉及的內容仍可能涉及商標權、公共利益和隱私權。
人物、風景、動物等的照片。
/
薩沙·武賈西奇高清視頻和圖片(中文網)
/
高清藝術攝影圖片(人們最常用)
/
視覺搜尋人物、風景、動物等的照片。
/
圖片、插圖、矢量、視頻
/
免費欣賞美麗的風景、植物和動物。
/
Skuawk專業攝影師的作品
/
高清靜物和風景圖片
/
kaboompics建築、靜物等小清新高清圖片。
/
經緯時尚流行攝影畫廊
/
美食美食攝影高清圖庫
Freelyphotos配宗教高清圖。
/
美學上涼爽的風景
/
自然風景，街道建築
/
Ins風圖片，靜物
/
波拉尤圖旅遊高清圖片
Lifeofpix風景，食物圖片
/
美麗的風景視頻
/
Fancycrave靜物、建築、復古風格
/
莫特斯托克有許多花和植物。
/
復古風格的圖片
馬格德萊納精美文藝圖片
設計師圖片靜物風景圖片
/
各種郵票的圖片
/
Imcreator人物、藝術、自然、矢量圖標
紋理有大量的樹木，石頭，金屬和其他材料的紋理貼圖，可用於2D和3D貼圖。
/
幹圖標各種圖標圖標材料
/
平面圖標-設計日本可愛的插圖風格圖標
/
插圖剪貼畫
/
圖標字體各種圖標圖標素材(中文網)
/
Flaticon是壹個完整的圖標。
/
圖標忍者圖標
覆蓋各種高清視頻資料。
/
Mixkit實拍高清視頻素材
視頻高清，4K視頻
/
Videezy各種場景，宣傳片
/
Undraw人物場景插圖
圖標8字符插圖
Drawkit角色場景
/
404-插圖網頁插圖