Iconset – 免費 SVG 圖示管理軟件

Posted on by Constance

UI 設計師時常需要收集和使用圖示集 (icon set)，如 Font Awesome、Material Design Icons，但要從多個圖示集中搜尋同類型的圖示是很費時和困難的。圖示管理軟件如 IconJar 可以讓你整理圖示集，以關鍵字搜尋圖示，節省時間，提高工作效率。

以下介紹另一款圖示管理軟件 Iconset，雖然功能沒有 IconJar 那麼齊全，但Iconset 是免費、支援 macOS 及 Windows 雙平台，並且能夠跨裝置同步圖示素材，讓你輕鬆同步公司和個人電腦的圖示，或者跟同事共用素材。

Iconset 基本功能

Iconset 介面

Iconset 與其他圖示管理軟件類似，以資料夾 set、子資料夾 group 和標籤 tags 來管理圖示、支援「黑暗模式」、將圖示設為「最愛」及調整預覽尺寸等功能。要在 Sketch、Figma、Affinity Designer 或 Powerpoint 等軟件使用圖示，只需拖拉圖示到軟件中即可。

與 IconJar 不同的是，圖示集都會自動按名稱排序，不支援手動排序，所以見仁見智。

同步圖示庫，協作必用！

進入設定後，你會看到圖示庫 Icon Library 有兩個選項：移動 Move 和切換 Switch，圖示庫也就是程式中所有圖示集的集合。

移動：將現在的圖示庫移動到別處。
切換：切換到另一處的圖示庫（替換現在的圖示庫）。

從下圖可見，我現在的圖示庫放在 Dropbox 中，因此你只需將本地圖示庫放到 Google Drive、Dropbox 等雲端儲存空間，即可以跨裝置或跟團隊同步圖示庫。

（右欄）放在 Dropbox 的圖示庫

如果你不想跟人分享整個圖示庫，你也可以選擇分享個別的圖示集，只需從右鍵選單中選擇「Copy Link to Set」，並與有安裝 Iconset 軟件的人分享連結，對方打開連結後便能匯入圖示庫到軟件中。

複製圖示集的連結
同步圖示庫後，可透過分享連結打開指定的圖示集

一鍵匯入圖示集

從網頁一鍵匯入圖示集
Iconset 的圖示集資源頁 – Icon Sets

這個功能很貼心，將程式視窗縮窄或使用 macOS 的分割畫面，便可以拖拉圖示到旁邊的圖像設計軟件裏，跟設計軟件的插件 Icondrop 和 Kitchen。

面板模式 (Panel Mode)

這個功能也蠻貼心的，你可以將程式視窗變窄或者分割畫面也沒問題。這時候就可以拖拉圖示到旁邊的程式或圖像設計軟件裏，概念跟設計軟件的圖示類插件 Icondrop 或 Kitchen 有異曲同工之妙。

既然功能差不多，買 IconJar 不是蝕慘了嗎？其實 Iconset 有這些分別…

不要再問有沒有 PNG，功能全為 SVG 圖示而設

你有沒有發現 Iconset 沒有匯出功能？

與 IconJar 不同，Iconset 沒有一次性匯出多個尺寸的功能，甚至不能獨立匯出為 PDF、PNG 或 JPG。你只能拖曳或複製 SVG 圖示，或者複製為 Base64、Data URI、JSX 等程式碼，方便在網頁上內嵌和引入 SVG。

複製選項

基本功能還待日後補齊

Iconset 沒有換色和更改圖示尺寸的功能，匯出時都會跟隨原圖，所以設計師需要自行再手動調整一下，但鑑於 Iconset 是免費使用，所以我覺得還可以。

拖放圖示時會使用匯入時的原有尺寸

身為 UI/UX 設計師，我覺得 Iconset 值得一用！

  1. 如官網所言，搜尋速度真的很快，隨打隨搜。
  2. 同步圖示庫，Iconset 是不二之選。
  3. 方便複製程式碼，並以內嵌方式在網頁上置入 SVG。
  4. 造福 Windows 用家的設計軟件。
  5. 免費，個人使用是很不錯的！

雖然功能不及 IconJar 齊全，但免費用很化算。請大家當個乖乖設計師，不要下載盜版，沒錢也有免費工具可用啊！

Iconset – 圖示管理工具
https://iconset.io/

澄清一下，這文章不是業配喔！只是身為一位懶懶的設計師，為了令工作愉快，我會嘗試各種設計工具使工作變得有效率，所以我想和同行分享一些不為人熟悉的設計軟件。

如果你對設計工具有興趣，歡迎閱讀我的另一篇文章：