網路上有不少免費圖示網站可以下載設計好的圖示集，繪製圖示並不是一件容易的事，需要素材時大部分使用者可能會轉向國外網站來進行搜尋或找尋靈感，例如：Easyicon 就是我個人非常推薦的圖示搜尋功能，另外還有像是 FlatIcon、Iconfinder 也是知名搜尋服務，這些搜尋引擎會在輸入關鍵字及設定篩選條件後準確找出各種圖示選項，提供多種大小圖示讓使用者免費下載，非常方便。
本文要介紹的這款 Icon Ninja 是一個免費圖示搜尋引擎，共收錄高達89萬個圖示！數量非常可觀。使用者只要輸入搜尋關鍵字，即可找出所有類似圖案，無須註冊就能快速下載取得特定大小的圖示。
比較特別的是 Icon Ninja 將圖示格式分為一般點陣圖（PNG）和向量圖兩種，預設情況應該只會搜尋較多人使用的點陣圖，如有需要，也可以將搜尋 SVG 圖示功能開啟。向量圖一大特色是不會因放大縮小而造成圖片失真，因此更適合用在印刷或應用程式、網頁開發。
此外，Icon Ninja 還能將你選取的所有圖示合併為單張 PNG 圖，利用 CSS Sprites 處理技巧應用於網站以提高載入速度，開發者無須自行拼湊圖片，直接在線上就能完成前置作業。
網站名稱：Icon Ninja
網站鏈結：https://www.iconninja.com/
使用教學
STEP 1
開啟 Icon Ninja 網站後，直接於首頁搜尋框輸入要查找的關鍵字，如果要搜尋 SVG 向量圖格式的話，記得把右邊選項切換到開啟。輸入後按下確認就會出現相關的搜尋結果。
若你沒有任何靈感，也可以點選首頁左上角「View All Icons」來查看 Icon Ninja 網站收錄的所有圖示集，上方選單切換「向量圖示（Vector Icon）」或「PNG 圖示」，用途及使用情境應該不太一樣。
剛才特別看了一下，圖示集就有超過一千個頁面！看來不是很容易從瀏覽來找到自己需要的圖案，搜尋會是比較快且省時的方法（或者也可以利用上方的 All tags 來檢索標籤）。
STEP 2
例如我任意輸入一個關鍵字後，Icon Ninja 就跑出所有相關圖示，將滑鼠游標移動到圖案上方，點選「View icon detail」可以查看圖示集內完整圖片。
STEP 3
進入圖示的詳細資訊頁面後，點選你要的圖示大小即可一鍵下載、保存，依照不同圖示而有不一樣的大小可以下載，例如：16×16、32×32、48×48、64×64、72×72 和 96×96、128×128 等等。另外，下方還會顯示同一套圖示集的其他圖案（或者點選 Belong to Icon sets 後面的圖示集鏈結也能找到）。
STEP 4
比較可惜的是 Icon Ninja 好像無法一鍵快速把圖示集裡的所有圖案下載回來，或許是避免被大量下載而造成負擔，無論如何，使用者仍然可以分開下載（沒有限制），將游標移動到圖示上選擇「Add to CSS Sprites」來組合成一張圖片。
STEP 5
下圖就是利用 Icon Ninja 內建的 CSS Sprites 功能把多個圖示組合到單一圖片裡的畫面，如果不知道如何在網頁中使用，也可點選 Usage 取得說明。
點選左下角「2* %」會出現 CSS 語法框，然後點選「Select Sprite」選擇其中的某一個圖示，就會顯示載入該圖示必須使用的語法範例囉！不過這裡無法很詳細的寫出 CSS Sprites 載入圖示的完整教學，如果有興趣的話，可以試著透過這關鍵字來 Google 更多參考資料。
