200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

文章來(lái)源于未知，感謝作者情非得已給我們帶來(lái)經(jīng)精彩的文章！

設(shè)計(jì)教程/攝影作品/其他資訊2017-09-14

今天推薦的Iconshock是一個(gè)國(guó)外免費(fèi)圖標(biāo)搜索網(wǎng)站，目前收錄超過(guò)200萬(wàn)個(gè)圖標(biāo)，圖標(biāo)素材超過(guò)400以上，涵蓋30種不同風(fēng)格類(lèi)型，從矢量圖到平面設(shè)計(jì)圖示甚至是現(xiàn)代化插圖應(yīng)有盡有。使用者可以從Iconshock免費(fèi)下載72px以下圖標(biāo)，而且不用注冊(cè)登入帳戶(hù)。

今天推薦的Iconshock是一個(gè)國(guó)外免費(fèi)圖標(biāo)搜索網(wǎng)站，目前收錄超過(guò)200萬(wàn)個(gè)圖標(biāo)，圖標(biāo)素材超過(guò)400以上，涵蓋30種不同風(fēng)格類(lèi)型，從矢量圖到平面設(shè)計(jì)圖示甚至是現(xiàn)代化插圖應(yīng)有盡有。使用者可以從Iconshock免費(fèi)下載72px以下（包括 24px、32px、48px 和 64px）圖標(biāo)，而且不用注冊(cè)登入帳戶(hù)。

另一個(gè)值得一提的是 Iconshock 允許使用者直接在線(xiàn)上變化不同的配色風(fēng)格，一般來(lái)說(shuō)，尋找圖標(biāo)時(shí)必須受限于它的設(shè)計(jì)風(fēng)格和顏色，但 Iconshock 可以讓使用者自定義顏色、大小或加入配件，使得圖標(biāo)看起來(lái)效果一致，也更能與你的網(wǎng)頁(yè)相襯。除此之外，Iconshock 也提供許多的免費(fèi)圖標(biāo)集，開(kāi)放讓搜尋圖標(biāo)的開(kāi)發(fā)者可以線(xiàn)上預(yù)覽、免費(fèi)下載！

Iconshock

https://www.iconshock.com/

STEP 1

開(kāi)啟 Iconshock 網(wǎng)站后直接從首頁(yè)上方搜尋框輸入要查找的圖標(biāo)名稱(chēng)或關(guān)鍵字，如果不知道要輸入什麼下方也有范例可供參考，頂部選單有社群網(wǎng)站、iPhone、iOS、Windows 10 等特定風(fēng)格（主題）的圖標(biāo)快速鏈接。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

STEP 2

例如下圖是我開(kāi)啟「Social」也就是社群網(wǎng)站相關(guān)的圖標(biāo)庫(kù)。可以看到風(fēng)格一致，預(yù)設(shè)情況下顯示的預(yù)覽圖為 72px 大小，可從左側(cè)選項(xiàng)調(diào)整大小、顏色或背景色。點(diǎn)擊上方「Free Full Pack」可一次打包、下載所有圖標(biāo)，不過(guò)最多只有 72px PNG 圖標(biāo)可免費(fèi)下載，不包含原始檔，如果要取得所有尺寸大小及原始檔必須付費(fèi)購(gòu)買(mǎi)「Premium Full Pack」。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

將鼠標(biāo)移動(dòng)到圖標(biāo)上方，會(huì)顯示 PNG、SVG 兩個(gè)按鈕，不過(guò) SVG 向量格式旁邊有個(gè)鎖頭，必須升級(jí)付費(fèi)會(huì)員才能下載，免費(fèi)用戶(hù)只能獲取一般 PNG 格式，但有各種大小可以下載其實(shí)還算耐用。若有特殊需求的話(huà)建議付費(fèi)升級(jí)。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

STEP 3

點(diǎn)擊進(jìn)入圖標(biāo)頁(yè)面，跟一般免費(fèi)圖庫(kù)不太一樣，Iconshock 可以讓我們直接從瀏覽器線(xiàn)上自訂，如果你不想修改，從右下角的「Download」就能選擇各種圖示尺寸，前面有提到：24px、32px、48px、64px 和 72px 這五種大小可以免費(fèi)下載，如果要更大的尺寸或 SVG 格式必須付費(fèi)升級(jí)。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

STEP 4

看到左側(cè)的「Color」嗎？如果你想要稍微調(diào)整一下圖標(biāo)配色風(fēng)格，可以從這里快速選擇、套用，而且網(wǎng)站已經(jīng)把各種顏色分類(lèi)好，例如平面化顏色、簡(jiǎn)單風(fēng)格、iOS、Material Design 等等，當(dāng)然也可以自己設(shè)定色值。當(dāng)選擇顏色后右側(cè)預(yù)覽及上方圖標(biāo)庫(kù)的顏色風(fēng)格就會(huì)統(tǒng)一，也能夠個(gè)性化更適合你網(wǎng)站或APP配色風(fēng)格的免費(fèi)圖標(biāo)。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

STEP 5

Iconshock 還有另一個(gè)有趣的玩法，從上方中間挑選「配件」來(lái)加入圖標(biāo)，讓它在組合后成為一個(gè)全新的圖標(biāo)。當(dāng)然每一套圖標(biāo)可以加入的配件不同，稍微搭配幾種發(fā)現(xiàn)組合起來(lái)效果很搭，不會(huì)有感覺(jué)突兀或不自然的狀況，搭配上個(gè)步驟的配色工具，還能讓這個(gè)新圖標(biāo)呈現(xiàn)出不同感覺(jué)。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

STEP 6

最前面介紹有提到，Iconshock 還有一些「免費(fèi)圖標(biāo)庫(kù)——Free Icons」可以下載，如果你比較不想自定義顏色或組合的圖標(biāo)，而是傾向?qū)ふ乙徽讏D標(biāo)的話(huà)，或許可從這個(gè)分類(lèi)開(kāi)始找起。點(diǎn)選上方選單的「Free Icons」就能開(kāi)始瀏覽。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

值得一試的三個(gè)理由：

Iconshock 收錄超過(guò) 200 萬(wàn)個(gè)免費(fèi)圖標(biāo)，400 套以上圖標(biāo)庫(kù)。
線(xiàn)上快速變更圖標(biāo)顏色風(fēng)格，可加入配件或調(diào)整大小。
免費(fèi)下載 72px 以下的 PNG 格式圖示。

Devicon

「Devicon」是一款免費(fèi)圖標(biāo)庫(kù)，以收錄程式語(yǔ)言、設(shè)計(jì)和開(kāi)發(fā)工具為主，常見(jiàn)的技術(shù)相關(guān)標(biāo)志圖標(biāo)都可在這個(gè)網(wǎng)站中找到。Devicon 提供兩種使用方式：字體圖標(biāo)或 SVG 向量圖格式，只要從網(wǎng)站上找到你要的圖案，直接將產(chǎn)生的代碼復(fù)制、貼上，就能快速取用圖案。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

值得一提的是無(wú)論是使用哪種格式，都可通過(guò) CSS 調(diào)整大小或顯示方式，讓它能使用于任何網(wǎng)頁(yè)。除此之外，字體圖標(biāo)也已經(jīng)支持 CDN，開(kāi)發(fā)者無(wú)須自行托管檔案，節(jié)省流量開(kāi)銷(xiāo)。如果你剛好需要取用這些圖標(biāo)，Devicon 是個(gè)非常方便的選擇。

Devicon

https://konpa.github.io/devicon/

STEP 1

開(kāi)啟 Devicon 網(wǎng)站（目前版本為 2.0），右側(cè)會(huì)列出所有圖標(biāo)，左側(cè)有「超級(jí)」快速設(shè)定方法，簡(jiǎn)單來(lái)說(shuō)，選擇你要的圖標(biāo)后，快速設(shè)定下方就會(huì)顯示出對(duì)應(yīng)的代碼，將代碼復(fù)制到網(wǎng)站適當(dāng)位置就能夠顯示。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

STEP 2

Devicon 也有提供 WordPress 的標(biāo)志，點(diǎn)擊后會(huì)發(fā)現(xiàn)圖標(biāo)字體有四種樣式，SVG 版本有三種，看起來(lái)顏色不太一樣，有些除了 Logo 外還會(huì)加入英文字體。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

STEP 3

我們把畫(huà)面再拉近一點(diǎn)，字體版本的圖標(biāo)使用方式會(huì)多一行代碼，主要是載入字型和 CSS，必須把這段樣式表鏈接放到你的網(wǎng)站 <head></head> 部分；接著再把底下的那段代碼加入網(wǎng)頁(yè)里要顯示圖標(biāo)的位置，重新整理頁(yè)面就能看到效果。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

如果你只想單獨(dú)取用一兩個(gè)圖標(biāo)，可能 SVG 版本會(huì)更適合，至少不用載入完整字體及 CSS 樣式表，在流量方面都能夠大幅節(jié)省。SVG 格式是直接以代碼繪制，因此只要三行代碼就能直接在網(wǎng)頁(yè)內(nèi)將圖標(biāo)繪制出來(lái)，非常強(qiáng)大，有興趣的朋友可將產(chǎn)生的 SVG 代碼復(fù)制到自己網(wǎng)站測(cè)試一下。

200萬(wàn)個(gè)高質(zhì)量的圖標(biāo)素材網(wǎng)站免費(fèi)下載

值得一試的三個(gè)理由：

提供各種技術(shù)及開(kāi)發(fā)人員可能會(huì)用到的標(biāo)志、Logo
兩種格式：Icon Font、SVG 復(fù)制代碼即可快速使用
免費(fèi)、開(kāi)放原始碼，已經(jīng)內(nèi)建CDN功能

情非得已