選單

Maki Icons 免費開放原始碼 300 圖示下載,採用 CC0 授權可商業用途

Maki Icons 免費開放原始碼 300 圖示下載,採用 CC0 授權可商業用途

前天剛介紹「Ionicons:700 個開放原始碼高品質圖示字型免費下載」,文章裡有提到我最近將網站使用到的圖示集整合統一,除了讓顯示效果一致,最主要原因是可減少載入太多圖示庫而拖慢網頁效能。如果你在 WordPress 安裝不少外掛工具或從沒檢視過目前使用的佈景主題,我想可以找時間好好整理一下網站,通常能找出可能用不到但又被迫載入的元件,要知道自己的網站速度如何?可參考我寫的這篇「16 個免費網站速度測試工具推薦!網頁效能評比,搜尋引擎最佳化必備」。

回歸正題,我在找到 Ionicons 前,還發現許多也很棒的免費圖示,本文要推薦的「Maki Icons」就是一款開放原始碼並採用 CC0 授權的免費圖示庫,比較特別的是這套圖示專為地圖設計者所開發設計,因此在這裡你可以找到許多具有代表性的標誌。

Maki Icons

為了讓閱讀者可以一目了然,這些圖示並沒有太多複雜的細節設計,即使沒有細看也能有極高的辨識度,就如同之前推薦過的「Noun Project for Mac 在桌面上快速搜尋免費圖示,免下載拖曳帶入應用程式」。Maki Icons 為了讓使用者能正確編輯、修改這些圖示,還準備完整的設計指南(Design Guidelines),教你如何在編修圖示後又不影響到原有的簡潔和易讀性。

整套 Maki Icons 大約有三百多個圖案,可以從專案官方網站預覽,下載後會有兩種尺寸的 SVG 向量圖示:11px 和 15px ,你也能夠使用向量圖軟體來編輯成其他大小或顏色。因為是採 CC0 授權,沒有任何版權或使用上的限制,作為商業用途也沒問題。

網站名稱:Maki Icons
網站鏈結:https://www.mapbox.com/maki-icons/

使用教學

STEP 1

開啟 Maki Icons 網站後可以預覽 Maki 圖示的所有圖案,不過因為它是以地圖設計師的需求而量身打造的,要放在地圖裡圖示看起來都會比較小一些(應該也可以用在其他地方,不過我暫時還沒想到)。

只要點擊右上角的「Download Maki」按鈕就能下載、獲取所有圖示 SVG 檔案。

Maki Icons

將滑鼠游標移動到圖示上方,也會顯示每個圖案的檔案名稱。下載後解壓縮,就能在「icons」資料夾裡找到對應的圖示檔案。

Maki Icons

STEP 2

我認為 Maki Icons 最有價值的部份除了三百個圖示,最重要的是「設計指南」相當用心,如果你想要修改圖案設計,務必要仔細閱讀這個頁面,它有非常詳細的 Maki 圖示風格設計準則。

Maki Icons

STEP 3

最後,再推薦一下 Maki Icons 網站提供的線上圖示編輯器(Editor),如果你想要先為 Maki 圖示進行一些小幅度的編修,或許就能從線上編輯器來快速完成,不用自己抓下來手動編輯。

從 Maki Icons Editor 可以編輯包括顏色、背景顏色、中空效果、深色背景或加入圓角及方形外框等等,編輯後可即時預覽,勾選你需要的圖示然後點擊右上角的「Download」打包下載。當然在線上編輯器可修改的範圍較小,效果也不一定令所有人滿意,有興趣的朋友可以試試看。

Maki Icons

值得一試的三個理由:

  1. Maki Icons 收錄超過 300 種圖案,微小卻易於辨識
  2. 提供 11×11、15×15 兩種尺寸大小的 SVG 向量圖
  3. 收錄設計指南教你如何在編輯後仍保留 Maki Icons 特色
分享本文