Boxicons 免費圖示集:超過 1600 個高品質 SVG 圖案可商用下載

Boxicons

Boxicons 是一套精心設計的開源免費圖示集,主打的是高品質、網頁友善,目前收錄超過 1600 種圖案,這些圖示依主題分類,方便設計師和開發者快速尋找所需素材,主題包括無障礙設計、警示標誌、動物、品牌、建築、商業、通訊、裝置、食物與飲料、表情符號、多媒體、自然、人物、交通工具等,對於要開發網站或應用程式會很有幫助。

Boxicons 如同大部分常見的圖示集,使用者透過關鍵字進行搜尋,找出一些可能會用到的圖示圖案,再將它們選取後打包一次下載。Boxicons 提供的每個圖示都有 PNG、SVG 和 HTML 三種格式,線上調整風格、樣式,例如 Regular(線條風格圖示)、Solid(實心風格圖示)和 Logos(包含各大品牌標誌),也有不同的圖示大小可供選擇。

如果要在網頁或應用程式中載入 Boxicons 圖示,官方提供了幾種方式,包括最推薦的 Web Component、透過 CSS 載入的傳統 Icon Font 方法,以及適用於前端框架的 NPM 安裝。詳細教學可以參考官方的 Usage 說明頁面。

Boxicons 使用 MIT License 授權方式。

網站名稱:Boxicons
網站鏈結:https://boxicons.com/

使用教學

操作步驟
搜尋與分類瀏覽圖示

開啟 Boxicons 網站後會看到所有圖示,可以從上方搜尋欄位輸入關鍵字查找相關圖片,或是從左上角「分類」下拉選單找到特定的圖示類別,目前一共有超過 1600 個圖示。

Boxicons
切換圖示風格展示模式

右上角切換線條風格、實心風格或是各大品牌標誌,會直接顯示於網頁上。

Boxicons
編輯與下載圖示

點選任一圖示後會在右下角顯示編輯功能,從編輯器可以取得 Web Component 和 Icon Font 載入方式,下方也會有調整圖示尺寸大小、下載 PNG 格式、複製 SVG 程式碼或 HTML 程式碼功能,如果你需要的圖示數量不多,單獨點選下載即可逐一將圖示檔案保存。

Boxicons

圖示編輯器左側有一列編輯功能,包括調整圖示顏色、切換線條或實心風格、旋轉、動態效果和翻轉(flip)。

Boxicons
動態圖示效果可即時預覽

Boxicons 動態效果很厲害,點選後可以即時預覽、播放,不過必須要使用 Web Component 來載入圖示,設定好之後程式碼會自動更新,將它複製後就能使用。

Boxicons
批次下載圖示

當使用者要下載的圖示數量較多,可以勾選每個圖示右上角的「+」,最後點選分類右側的「Collection」就能一次將所有圖示打包下載,在下載前還能預先調整圖示大小、顏色,可下載為 PNG、SVG 兩種格式。

Boxicons
進階使用建議參考官方說明頁

至於要如何導入 Boxicons 可以參考 Usage 說明,官方提供的說明文件相當完整,就不在這裡多做贅述。

Boxicons

值得一試的三個理由:

  • 超過 1600 個免費圖示,分類清楚、風格多樣
  • 可下載 PNG、SVG,也能透過 Web Component 或 Icon Font 輕鬆整合至網站
  • 完全免費且開源,適用於個人與商業用途無後顧之憂