網頁圖示（Web icons）已經成為這幾年網頁設計相當重要且不可或缺的元素，印象中早期是採用插入圖片的作法，但這會因為載入大量圖片而造成請求數大幅增加等問題，連帶也會拖慢網頁速度，後來有人想出「CSS Sprites」將所有圖片合併成一張，再以 CSS 語法調整顯示的位置，就能讓圖片載入一次情況下做更有效率的應用。
Flat Design
Omg-img 用一段程式碼快速插入免費圖示，可自訂顏色、大小和樣式
相信大家對於之前介紹過的「Icons8 免費圖示 iOS、Windows、Android 扁平化風格打包下載」還有印象，簡單來說 Icons8 是一個收錄大量免費圖示的網站，除了直接從網站下載圖片檔的傳統用法，還提供免費的 CDN 網址能直接取用、將圖示放入自己的網站或開發專案，這項功能可加速圖示載入速度，節省網站流量，同時讓圖示運用變得更省事，最近才發現原來 Icons8 還提供另一個很方便的免費圖示小工具。
HTML Color Codes 全方位免費線上選色器，輕鬆獲取色彩代碼、RGB 和 HSL
（Copyright: alessandroguerriero / 123RF Stock Photo）
不知道你會不會經常用到選色器或選色工具（Color Picker）呢？對我來說，我在編輯網頁樣式表 CSS 時才會找顏色，通常會從一些網站配色服務尋找看起來合適且舒服的色碼，顏色雖然看似不多，但相差一些些就可能有完全不同的感覺，例如前幾天介紹的「Colors.css 符合當前網頁設計風格的預設 16 種顏色調色盤」就提供許多很適合現代網頁設計的預設配色，我最近也開始使用；另外像是 Colorable 可產生符合 WCAG 規範的配色組合也是很推薦的配色工具，假如你偏好日系風格，NIPPON COLORS 則有代表日本的 250 種配色組合。
100% 免費！illustrio 提供完整可自訂性免費圖示素材下載
如果你曾仔細觀察，免費圖示網站早期多以素材數量為賣點，近年則逐漸轉型成具自訂性，可快速調整配色風格的工具，當然圖示本質上沒有改變，只是多了客製化功能，既能滿足不同使用者的需求，更能讓圖示素材發揮最大效益。這些自訂功能都設計得非常易於操作，對於像我沒什麼繪圖軟體使用經驗的一般用戶來說，新型態免費圖示工具簡直是救星！例如之前介紹過的 Iconshock、Iconfiner Icon Editor 都讓線上設計圖示變得更快更簡單。
Iconshock 超過 200 萬個免費圖示下載！可自訂顏色、大小或加入配件特效
（Copyright: rvlsoft / 123RF Stock Photo）
想找免費圖示嗎？其實免費資源網路社群介紹過不少，或許你可以從網站搜尋或分類中找到，既然有免費圖庫搜尋工具，那有免費圖示的搜尋引擎嗎？其實也是有的，例如之前介紹過「Icon Ninja 推薦免費圖示搜尋引擎，收錄將近 90 萬個 PNG、SVG 圖案下載」就很好用，或是「Easyicon 超過四十萬個免費圖示，打包快速下載」，大部分我文章介紹的都是圖示集或免費圖示網站居多。近期介紹的 Ionicons 擁有超過七百個開放原始碼圖示字型就很適合網站開發使用，如要尋找 SVG 向量圖格式的免費圖示也可參考像是 Zondicons、Feather 和 Evil Icons 等精美設計的免費圖示集。
Material UI 收錄 Google、微軟及社群網站等常見設計風格配色組合
（Copyright: mbaysan / 123RF Stock Photo）
最近在設定社群分享按鈕時，因為要指定不同社群網路按鈕使用的顏色，上去 Google 後找到一個完整的標準色表，對於一般使用者來說，你可能記得 Facebook、Twitter 和 Google+ 各自的深藍色、淡藍色和橘紅色，但很難精確轉換成色碼值，我找到一份「Social Colors」記錄各種常見的社群網站代表色，而這網站還有收錄其他好用的色碼表。