圖標系統與 SVG 使用:5 個好用 Icon Set + 效能優化

TL;DR圖標不是裝飾,是視覺路標——不同來源的圖標混用,就像文件裡混用不同字型。

5 個好用的圖標庫

1. Lucide(推薦):Feather Icons 分支、免費、風格中性 2. Heroicons:Tailwind 團隊做的、Outline + Solid 兩種 3. Tabler Icons:3000+ 圖標、風格一致 4. Font Awesome:老牌、Elementor 內建、但檔案較大 5. Iconoir:手工繪製、風格特殊

5 個好用的圖標庫

SVG 使用與效能優化

內嵌 vs 外部檔

  • 內嵌<svg> 直接寫在 HTML):可 CSS 控制顏色、無額外請求
  • 外部<img src="icon.svg">):可快取、但不能 CSS 改色

推薦組合

  • 首屏用內嵌(減少首次渲染時間)
  • 非首屏用外部(節省 HTML 大小)

SVG 優化

  • 用 SVGO 或 Squoosh 壓縮(移除多餘資料,通常瘦 40-60%)
  • 移除 <title>(除非要無障礙、否則用 aria-label
  • viewBox 而不是 width / height(響應式)

Sprite 合併:多個圖標合併成一個 <svg><symbol> sprite,用 <use> 引用——省 HTTP 請求。

SVG 使用與效能優化

為什麼要找 LOOKME 做網站與數位行銷?

看完上面的內容,你會發現——現代網站不是「架起來就好」。設計要顧美感與轉換、SEO 要顧結構與內容、行銷要顧公域與私域,每一步都要有數據驗證。單點外包 5 個廠商,通常不會贏過一個真正整合的團隊

LOOKME 數位行銷的 5 個差異:

  1. 一站整合,不用你當專案經理:網站、內容、SEO、短影音、LINE 官方帳號,一個窗口對到底
  2. 我們自己就在跑:所有策略先在我們自家品牌驗證過才提案
  3. 交件即帶走:網站、內容、影音原始檔全部給你
  4. 月報說人話:直接告訴你這個月哪 3 件事有效、下個月做什麼
  5. 不強推方案:預算不夠時我們會告訴你「先做這一項就好」

服務項目對應

想聊聊你的狀況?先聊,不收費、不推銷

留下你的產業、目前遇到的狀況與預算範圍,我們會依實際情況給出具體的優先順序建議,而不是一開口就先報價。

也可以直接點文字連結:LINE 諮詢 →聯絡我們 →

讓好想法,被看見。—— LOOKME 數位行銷

返回頂端