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

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

Iconshock

https://www.iconshock.com/

STEP 1

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

STEP 2

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

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

STEP 3

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

STEP 4

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

STEP 5

Iconshock 還有另一個有趣的玩法，從上方中間挑選「配件」來加入圖標(biāo)，讓它在組合后成為一個全新的圖標(biāo)。當(dāng)然每一套圖標(biāo)可以加入的配件不同，稍微搭配幾種發(fā)現(xiàn)組合起來效果很搭，不會有感覺突?；虿蛔匀坏臓顩r，搭配上個步驟的配色工具，還能讓這個新圖標(biāo)呈現(xiàn)出不同感覺。

STEP 6

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

值得一試的三個理由：

Iconshock 收錄超過 200 萬個免費圖標(biāo)，400 套以上圖標(biāo)庫。

線上快速變更圖標(biāo)顏色風(fēng)格，可加入配件或調(diào)整大小。

免費下載 72px 以下的 PNG 格式圖示。

Devicon

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

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

Devicon

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

STEP 1

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

STEP 2

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

STEP 3

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

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