網頁 icon 資源分享 (一) – iconbros 及 ElegantThemes 介紹與使用方式

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略，你常常因為找不到適合文案或是不夠美觀的 Icon 而煩惱嗎？或是在設計業主的案子時浪費太多時間繪製 Icon 導致案子延遲嗎？別擔心，還記得我們之前分享過的 『網頁素材分享 – 可商用免費下載 icon 圖示，IconStore 網站介紹』 不管是平面、簡報、網站、 UI 等設計，常需要使用圖標 – Icon 來進行視覺的編排及重點整理，才能讓畫面有更多美觀的圖樣來吸引讀者的注意，為了讓設計師們有更多的素材可以使用，減少搜尋及繪製時間成本，鵠學苑分享另外兩個不同風格、可免費商用 Icon 資源網站。接下來跟著鵠學苑的腳步，讓我們開始學習吧！

Simple Icons 網站連結
https://www.iconbros.com/
Brand Colors 網站連結
https://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free

iconbros 網站介紹與使用方式

第一步：iconbros 裡的 Icon 設計以線條或是單色視覺為主，雖然風格簡潔，但是每一個圖標都是經過精心設計，造型也不會過於俗氣，喜歡簡約風的設計師們一定不能錯過這個網站。

第二步：雖然 iconbros 沒有直接篩選與分類的功能，可能會花上一些時間在查找上，不過上方提供了快速的搜尋功能，可以輸入關鍵字後按下 enter 鍵，就能幫你找出相關的 Icon 了。不過要注意的地方是，因為 iconbros 是屬於外國網站，需要使用英文進行搜尋，輸入中文是找不到任何東西的喲!

第三步：點選需要的 Icon 進入頁面後，主要會呈現該 Icon 放大的樣子，圖下面則會出現一排關鍵字，點選後可以進入關聯的清單頁面。

第四步：提供兩種檔案下載，一種是 .png 透明圖檔，下載後可以直接使用；另一種則是 .Svg 檔案，可以使用 Adobe Illustrator 修改顏色或是造型。建議下載之前先閱讀上方 License 條文，畢竟是其他設計師的心血，要遵守使用規範才行。

第五步：下方列出同類型的 Icon ，若不喜歡這個樣式可以馬上選擇另一種款式，非常方便。

第六步：Iconbros 還有一個易於使用的功能，點選選單 collections 頁面，已經將相同使用類型與風格的 Icon 都打包整理在一起，不用費心尋找，這樣子就不用擔心同個網站找了很多不同 Icon 但風格卻不符合的情況發生。

>Iconbros 雖然風格較單一，更新的速度不快，但是設計質感對於網站已經夠使用了。

elegantthemes 網站介紹與使用方式

第一步：elegantthemes 其實是 WordPress 主題產品的網站，但它提供了網頁常使用主題圖示，並以扁平化風格與單色為主。

第二步：直接點選 Download ，即可整包下載。下載的檔案類型包括 ai、.eps 、.pdf 和 .png 檔案，尺寸包括 64px 和 128px ，方便設計師修改使用。

結語：

挑選好的素材使用能提高網站的設計質感與縮短製作時程，搜集與素材的整理也是設計師日常工作中重要的一環，鵠學苑也會持續地分享更多好用與易用的素材網站給大家。
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～