什麼時候會用到免費圖示呢?可能是開發網站、應用程式,或是設計產品、製作商業簡報和學術研究,其實網路上也能找到不少好看好用的圖示集,像 Icons8 就有不少圖片可搜尋、免費下載使用, Google Fonts 亦將自家 Material Icons 釋出直接設計為字型,使用者除了可取得 SVG 和 PNG 格式,也能透過一段簡單的程式碼在網頁任何位置載入需要的圖案。
本文要介紹的「Emblemicons」是一套開放原始碼免費圖示庫,收錄超過 1000 個最常用到的圖案,使用者可以從網站搜尋、檢索並找到想要使用的圖示,免費下載 PNG、JPG 格式且具備六種尺寸 12px、18px、24px、36px、48px 和 72px,也能下載 SVG 格式透過 CSS 調整樣式,或是取得 PDF 格式和 HTML 程式碼。
Emblemicons 提供的圖示設計都很簡單,也能從圖案就識別代表的意思,如果你是 Figma 使用者可以從社群取得 Emblemicons 圖示副本,將一千多個圖示直接加入軟體使用。這項計畫提供的圖示圖案皆可使用於個人、學術和商業用途。
Emblemicons
https://emblemicons.in/
使用教學
STEP 1
開啟 Emblemicons 網站後往下捲動頁面,會出現所有圖示預覽和搜尋框,輸入關鍵字可查找類似圖案,點選圖示下方的名稱連結到圖示頁面。
STEP 2
在圖示頁面中會看到 12px、18px、24px、36px、48px 和 72px 不同圖示大小的預覽效果,點選每個圖案下方對應格式就能下載 PNG、JPG、PDF 或 SVG 。
STEP 3
如果你想直接取得某個圖示的 HTML 程式碼,在頁面最下方有 HTML Code,只要將代碼複製、貼到你的專案中就能直接顯示某個圖案。
值得一試的三個理由:
- 開放原始碼免費圖示庫,收錄超過 1000 個常用圖案
- 可下載 PNG、JPG、PDF 和 SVG 格式,收錄六種圖示尺寸
- 複製 HTML Code 就能將圖案快速帶入你的開發專案