超多福利！1000個(gè)高質(zhì)量的圖標(biāo)素材免費(fèi)下載

本文要推薦的「Maki Icons」是一款開放原始碼并采用 CC0 授權(quán)的免費(fèi)圖標(biāo)庫(kù)，比較特別的是這套圖標(biāo)專為地圖設(shè)計(jì)者所開發(fā)設(shè)計(jì)，因此在這里你可以找到許多具有代表性的標(biāo)志。

為了讓閱讀者可以一目了然，這些圖標(biāo)并沒有太多復(fù)雜的細(xì)節(jié)設(shè)計(jì)，即使沒有細(xì)看也能有極高的辨識(shí)度，Maki Icons 為了讓使用者能正確編輯、修改這些圖標(biāo)，還準(zhǔn)備完整的設(shè)計(jì)指南（Design Guidelines），教你如何在編修圖標(biāo)后又不影響到原有的簡(jiǎn)潔和易讀性。

整套 Maki Icons 大約有三百多個(gè)圖案，可以從項(xiàng)目官方網(wǎng)站預(yù)覽，下載后會(huì)有兩種尺寸的 SVG 矢量圖標(biāo)：11px 和 15px ，你也能夠使用矢量圖軟件來編輯成其他大小或顏色。因?yàn)槭遣?CC0 授權(quán)，沒有任何版權(quán)或使用上的限制，作為商業(yè)用途也沒問題。

Maki Icons

STEP 1

開啟 Maki Icons 網(wǎng)站后可以預(yù)覽 Maki 圖標(biāo)的所有圖案，不過因?yàn)樗且缘貓D設(shè)計(jì)師的需求而量身打造的，要放在地圖里圖標(biāo)看起來都會(huì)比較小一些（應(yīng)該也可以用在其他地方，不過我暫時(shí)還沒想到）。

只要點(diǎn)擊右上角的「Download Maki」按鈕就能下載、獲取所有圖標(biāo) SVG 素材。

將鼠標(biāo)移動(dòng)到圖標(biāo)上方，也會(huì)顯示每個(gè)圖案的文件名稱。下載后解壓縮，就能在「icons」資料夾里找到對(duì)應(yīng)的圖標(biāo)。

STEP 2

我認(rèn)為 Maki Icons 最有價(jià)值的部份除了三百個(gè)圖標(biāo)，最重要的是「設(shè)計(jì)指南」相當(dāng)用心，如果你想要修改圖案設(shè)計(jì)，務(wù)必要仔細(xì)閱讀這個(gè)頁(yè)面，它有非常詳細(xì)的 Maki 圖標(biāo)風(fēng)格設(shè)計(jì)準(zhǔn)則。

STEP 3

最后，再推薦一下 Maki Icons 網(wǎng)站提供的在線圖標(biāo)編輯器（https://www.mapbox.com/maki-icons/editor/），如果你想要先為 Maki 圖標(biāo)進(jìn)行一些小幅度的編修，或許就能從在線編輯器來快速完成，不用自己抓下來手動(dòng)編輯。

從 Maki Icons Editor 可以編輯包括顏色、背景顏色、中空效果、深色背景或加入圓角及方形外框等等，編輯后可實(shí)時(shí)預(yù)覽，勾選你需要的圖標(biāo)然后點(diǎn)擊右上角的「Download」打包下載。當(dāng)然在在線編輯器可修改的范圍較小，效果也不一定令所有人滿意，有興趣的朋友可以試試看。

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

• Maki Icons 收錄超過 300 種圖案，微小卻易于辨識(shí)
• 提供 11×11、15×15 兩種尺寸大小的 SVG 矢量圖
• 收錄設(shè)計(jì)指南教你如何在編輯后仍保留 Maki Icons 特色

Ionicons

「Ionicons」是一款收錄 700 多個(gè)高質(zhì)量圖案的免費(fèi)圖標(biāo)集，它是為「Ionic Framework」開發(fā)框架設(shè)計(jì)的圖標(biāo)字體（Icon font），由 @benjsperry 設(shè)計(jì)，100% 免費(fèi)且開放是它的特色。

Ionicons 目前已經(jīng)有超過 700 種圖標(biāo)圖案，除了使用者界面開發(fā)會(huì)用到的按鈕圖標(biāo)外，它也收錄幾個(gè)常見的社群網(wǎng)站圖標(biāo)，例如：Facebook、Twitter 和 Google+ ，對(duì)于想加入社群按鈕來說就很方便，不用再額外載入其他圖標(biāo)拖慢網(wǎng)頁(yè)開啟速度。

另一方面，Ionicons 也和 MaxCDN（現(xiàn)已被 StackPath 收購(gòu)）合作提供免費(fèi) CDN 網(wǎng)址，各個(gè)地區(qū)的使用者在取用圖標(biāo)庫(kù)時(shí)速度就會(huì)更快、更順暢，當(dāng)然也不會(huì)消耗自己的網(wǎng)站流量。

STEP 1

開啟 Ionicons 圖標(biāo)集網(wǎng)站，點(diǎn)擊「Download」就可取得這套完整圖標(biāo)。不過如果你是要使用于網(wǎng)站開發(fā)或在網(wǎng)頁(yè)里使用，建議直接將 CDN 鏈結(jié)嵌入網(wǎng)站就能載入你要的圖案（稍后說明）。

一般來說，我在決定要使用這套圖標(biāo)集以前，會(huì)先輸入幾個(gè)關(guān)鍵字來查詢我需要的圖案有沒有被收錄，或者圖案設(shè)計(jì)上是不是符合我的網(wǎng)站風(fēng)格。Ionicons 圖標(biāo)設(shè)計(jì)都比較精簡(jiǎn)一些，看起來很簡(jiǎn)潔，對(duì)于大部分設(shè)計(jì)來說應(yīng)該都很適合。

STEP 2

點(diǎn)擊網(wǎng)站上方的「CDN」或直接拖曳到 Ionicons 網(wǎng)頁(yè)最下方，可以找到 MaxCDN 贊助的鏈結(jié)，這個(gè)鏈結(jié)也支援 SSL。如果你覺得這個(gè)托管服務(wù)不夠快，也可以直接從 GitHub 將完整檔案下載下來上傳到自己的主機(jī)空間使用，兩種方法基本上是相同的。

STEP 3

要如何在網(wǎng)頁(yè)里調(diào)用某個(gè)圖標(biāo)呢？這部份可以參考 Ionicons 說明文件，里頭會(huì)有一些基本使用范例。

再回到 Ionicons 網(wǎng)站點(diǎn)擊你要的圖標(biāo)，就會(huì)出現(xiàn)該圖標(biāo)名稱，將這名稱作為樣式就能載入圖案，例如最簡(jiǎn)單的用法：<i class="icon ion-social-facebook"></i>，照著樣式名稱做修改調(diào)整。

STEP 4

最后，我再推薦一下 Ionicons 提供的「Cheatsheet」也就是小抄頁(yè)面，非常好用！這個(gè)頁(yè)面里會(huì)有每個(gè)圖標(biāo)在不同大小的顯示樣式預(yù)覽，以及樣式名稱（Classname）、HTML 和 CSS Content，對(duì)于開發(fā)者來說應(yīng)該會(huì)用到。

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

• 免費(fèi)頂級(jí)圖標(biāo)集，收錄超過 700 種圖標(biāo)圖案
• 可直接使用 CDN 網(wǎng)址嵌入使用，無須下載任何素材
• 圖標(biāo)輕巧，開啟速度快，適用于任何大小的屏幕顯示

「優(yōu)設(shè)最新神器推薦」

1. 《這款國(guó)人開發(fā)的EAGLE，堪稱收集和管理素材靈感的最佳利器！》
2. 《超過5萬張！免費(fèi)高清可商用圖庫(kù)ZOOMMY 3.0重磅來襲！》
3. 《超好用的PS字體管理插件FONTAGS（附安裝方法）》

原文地址：free.com.tw