IcoMoon App 是一個線上的免費圖標資源網站，在網站當中提供了許多不同的圖標，同時可以讓你免費下載 SVG 與 PNG 格式。除了提供直接下載圖片格式檔案之外，IcoMoon App 還提供了 SVG 與 Font 字體的 CSS 樣式，這表示你可以直接複製 HTML 程式碼或採用 CSS 樣式就可以直接在你的網站或專案中顯示圖標，非常方便。

之前我介紹過其他非常好用的免費圖標庫，像是：Flaticon、IconPark、SVG Favicon Maker、Radix Icons、LineIcons、Emblemicons…等等，你也可以前往瀏覽尋找適合的圖標進行下載與使用。

IcoMoon App 非常獨特的地方在於，它可以允許你自己上傳 SVG 或 PNG 格式的圖標，完成後就可以自定義產生 ICON 字體，並幫助你產生 SVG、EOT、WOFF、TTF…等等格式，方便你將圖標轉換成 FONT 字體，並應用在專案與架設網站當中使用。

網站名稱：IcoMoon App – Icon Font, SVG, PDF & PNG Generator
網站網址：https://icomoon.io/app/#/select

IcoMoon App 簡介教學

添加免費圖標庫

在 IcoMoon App 當中除了本身所提供的免費圖標庫之外，還可以添加網站認證過的第三方免費/付費圖標庫，在當中可以添加各種不同的圖標庫來選擇，妳可以在使用前瀏覽每個圖標庫的 Lisense 授權方式。

Pin

當中大部分的圖標的是採用 CC0 的免版權授權方式，若選擇使用付費的圖標庫，則會根據所購買的不同方案而有不同的授權方式。你可以在選擇之前瀏覽所有的圖標庫授權方式來決定是否要加入使用。

選擇圖示產生 SVG 檔案

進入頁面後，你可以在當中瀏覽多達 5500+ 的免費圖標資源，選擇適合的圖標後，可以點擊一下圖標，就可以將其加入選擇清單當中，待會就可以批次產生 SVG 或是 Font 字體的相關連結：

Pin

產生 SVG 檔案或 Font 字體

批次選擇完圖標後，就可以點選下方的「Generate SVG & More」與「Generate Font」產生圖標的 SVG、PNG 檔案，或是產生 Font 字體：

Pin

下載 SVG 檔案與 HTML 程式碼

點選「Generate SVG & More」連結後，就會前往程式碼產生頁面，點選圖示下方的「Get Code」即可產生該圖標的 SVG 程式碼。你就可以複製 SVG 的 HTML 程式碼，將其貼至網站或專案中，即可直接顯示圖標：

Pin

此外，左下角就會變成「Download」按鈕，點選後就會下載妳所有選取的圖示的 SVG 與 PNG 格式檔案的 ZIP 檔案。

需要注意的是，若你要使用程式碼當中的 CSS Class 樣式，就需要載入 IcoMoon App 的 CSS 樣式表，此時就需要點選上方 Quick Usage 下方的「Enable Quick Usage」連結，就可以產生臨時的 CSS 樣式表，並可以產生 html、json、svg 連結。

Pin

臨時產生的 CSS 樣式表連結會存活 24 小時，時間到了就會自動移除，因此只能用來進行測試使用，需要長久使用的話，可以下載它所提供的檔案，並自行建立固定連結使用。

下載 Font 字體檔案與 HTML 程式碼

若點選右下角的「Generate Font」，就可以產生所選圖標的 Font 字體檔案。你可以點選右下角的「Download」按鈕將完整的 Font 字體檔案下載到電腦當中，可產生完整的 SVG、EOT、WOFF、TTF 字體格式檔案。

與 SVG 格式檔案一樣，點選「Get Code」就可以產生相對應的 HTML 程式碼與 CSS 樣式，同樣的也要先使用上方 Quick Usage 所產生的暫存 CSS 樣式表，Font 字體檔案有提供 html 與 json 連結，可以直接瀏覽使用。

Pin

上傳自訂圖示產生字體

IcoMoon App 獨特之處在於可以自行上傳圖標，再透過他的產生 SVG、Font 字體的功能。目前它僅接受 SVG 與 json 格式的檔案上傳。上傳完成後就會顯示於網站畫面當中：

Pin

上完成後就可以按照上述的步驟，產生 SVG 的 HTML 程式碼與 Font 字體檔案來使用，對於有需要客製化圖標需求的使用者來說，非常實用。