Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Icons8 Animated Icons 完整教學：免費下載 3000+ 動畫圖標，GIF/JSON/AE 三種格式實戰應用指南
Animated icons 是一個專門提供動畫圖標 Icons 的免費資源網站，它是由 Icons8 所提供的一個專門提供免費動畫圖示的資源庫，因此，你可在此頁面當中尋找一些特別的動畫圖標，並將其免費運用在個人或商業用途中。
Icons8 Animated Icons 是一個提供 3,000+ 個免費動畫圖標的線上資源庫，支援 GIF、JSON (Lottie) 和 After Effects 三種格式下載，免費版附署名即可商用。如果你需要在網站或 App 裡加入動態圖示，這是目前格式最齊全、門檻最低的選擇之一。你也可以先看看我們介紹過的 Icons8 主站，了解他們完整的靜態圖標生態系，或是 Icons8 免費圖庫，那邊有大量高品質的免費照片。
目錄
Icons8 Animated Icons 是什麼？
Icons8 Animated Icons 是 Icons8 旗下的動畫圖標專區，與大家熟悉的 Icons8 靜態圖標庫屬於同一產品線。它提供現成的動畫圖標，讓設計師和開發者不需要從零製作 After Effects 動畫，就能直接取得可用的動態圖示。
截至 2026 年 5 月，Animated Icons 已發展到 3.0 版本，收錄超過 3,000 個動畫圖標，涵蓋 20 種設計風格，主題包括電子商務、天氣、社交媒體、商業、醫療等常見分類。每個圖標都提供三種格式：GIF（最通用）、JSON (Lottie)（向量動畫，適合網頁與 App）、以及 After Effects 專案檔（供進階編輯）。你可以直接前往 Icons8 Animated Icons 官方頁面 瀏覽全部圖標。
跟市面上其他圖標資源相比，Animated Icons 的定位很明確：它是為「動畫」場景量身打造的。多數圖標網站只提供靜態 SVG 或 PNG，例如 Heroicons 或 Tabler Icons 品質都很好，但都沒有動態版本。Icons8 把動畫圖標做成獨立產品線，格式從最簡單的 GIF 到工程師需要的 Lottie JSON 都有，是目前中文圈少數能一次滿足設計和開發需求的動畫圖標資源。
三種下載格式比較：GIF、JSON (Lottie) 與 After Effects
Icons8 Animated Icons 提供三種格式，每種的適用場景和技術特性不同。選對格式，能讓動畫圖標在你的專案裡發揮最大效果。
| 格式 | 檔案大小 | 畫質 | 透明背景 | 可編輯 | 最佳使用場景 |
|---|---|---|---|---|---|
| GIF | 較大（100KB-1MB） | 點陣，邊緣鋸齒 | 部分支援（半透明不佳） | 否 | 簡報、社群媒體、電子郵件 |
| JSON (Lottie) | 極小（5-50KB） | 向量，無損縮放 | 完整支援 | 可調色、速度 | 網站、App、現代 Web 專案 |
| After Effects | 中等（視內容） | 原始向量 | 完整支援 | 完全可編輯 | 設計師進階修改、客製化動畫 |
GIF 格式：最通用的選擇
GIF 是幾乎所有平台都能直接顯示的動畫格式，不需要額外的播放器或函式庫。在 PowerPoint 簡報裡插入 GIF 動畫圖標，投影片馬上就能動起來；在 Facebook 或 Instagram 限時動態裡使用 GIF，也完全不用擔心相容性。
不過 GIF 有幾個先天限制：檔案體積偏大、畫質是點陣格式所以放大會模糊、半透明背景的支援也不理想。如果你只是要在簡報或社群貼文裡用個小動畫，GIF 綽綽有餘；但如果要放在網站上追求高品質的使用者體驗，建議改用 JSON (Lottie) 格式。
JSON (Lottie) 格式：網頁與 App 的首選
Lottie JSON 是近年動畫圖標領域最主流的格式。它把 After Effects 動畫轉換成 JSON 資料描述檔，透過 Lottie 播放器（一個輕量級的開源渲染引擎）在任何平台上即時渲染向量動畫。動畫不會因為縮放而失真，檔案大小通常只有 GIF 的十分之一甚至更少，而且支援完整的透明背景。
如果你的專案是網站或 App，Lottie JSON 絕對是首選。搭配 SVG Repo 的靜態向量圖標一起使用，可以讓介面同時擁有靜態和動態的視覺元素。對於需要在不同裝置上保持一致視覺體驗的團隊來說，Lottie 格式的跨平台特性也省去了反覆調整的麻煩。
After Effects 格式：進階設計師的編輯利器
After Effects 專案檔是三種格式中最原始的版本。下載後可以在 After Effects 中打開，自由修改每一個關鍵影格、圖層、路徑和特效。對於有 AE 使用經驗的設計師來說，這是彈性最高的選項，可以調整動畫的 timing、改變顏色和形狀，甚至把多個動畫組合成更複雜的效果。這個格式需要具備 After Effects 軟體和一定的動畫設計能力，不適合不熟 AE 的使用者。
如果你正在尋找其他免費設計素材來搭配，CSS.GG 提供了 700 多個開源圖標，而 SVGOMG 則可以幫你壓縮和最佳化 SVG 檔案。
Icons8 Animated Icons 使用教學：搜尋、預覽與下載
使用 Icons8 Animated Icons 的流程就是「搜尋、預覽、下載」三個步驟，不需要註冊帳號就能直接下載。
- 搜尋圖標：打開 Icons8 Animated Icons 頁面 後，上方有搜尋框，輸入英文關鍵字（例如 “loading”、”check”、”arrow”）就能快速找到目標。不確定要找什麼時，也可以點擊分類標籤（Business、Social、Weather 等）直接瀏覽。這種分類瀏覽方式跟 iconmonstr 或 Flaticon 等圖標資源的操作邏輯很相似，有經驗的人應該很快就能上手。
- 預覽動畫：找到想要的圖標後點擊它，會彈出預覽視窗，你可以看到動畫的實際播放效果、相關標籤，以及相似風格的圖標推薦。如果想要更精準地找到適合的圖標，也可以參考 FindIcons 的搜尋技巧，把圖標找齊之後再從 Icons8 下載動畫版本。
- 選擇格式並下載：預覽視窗下方有三個下載按鈕：「Download JSON」、「Download GIF」和「Download After Effects Project」，根據需求選擇對應格式即可。整個過程不需要註冊帳號，點擊就能直接下載。
Icons8 在 Animated Icons 的設計上保持了統一的視覺風格，所有圖標都是由 Icons8 內部設計團隊統一繪製的。如果你之前用過 IconPark（字節跳動出品的圖標庫）或 Iconhub（支援多種樣式的自訂圖標），你可能會發現 Animated Icons 的風格更加一致，這對於需要在同一個專案中使用大量動畫圖標的設計師來說是個不小的優點。
如何在網站與 WordPress 中嵌入 Lottie 動畫圖標
拿到 Lottie JSON 檔案後，下一步是把它嵌入到你的網站或 WordPress 頁面中。底下介紹兩種主流做法。
HTML 嵌入 Lottie 動畫（純程式碼方式）
如果你有辦法編輯網站的 HTML 原始碼，使用 lottie-web 函式庫是最直接的方式。整個流程只需三步：
- 在 HTML 的
<head>中引入 lottie-web CDN：<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script> - 在頁面中建立一個容器元素：
<div id="lottie-icon" style="width:100px;height:100px;"></div> - 用 JavaScript 初始化播放器：
lottie.loadAnimation({container: document.getElementById('lottie-icon'), renderer: 'svg', loop: true, autoplay: true, path: '你的 JSON 檔案路徑'});
這樣就能在網頁上顯示一個自動播放、無限循環的 Lottie 動畫。你可以透過參數控制播放行為：loop: false 關閉循環、autoplay: false 關閉自動播放（改用滑鼠 hover 觸發）、renderer: 'canvas' 改用 Canvas 渲染以獲得更好的效能。這種程式化嵌入方式非常適合需要精確控制動畫行為的前端開發場景。
WordPress 安裝 Lottie 外掛教學
對於使用 WordPress 架站的讀者來說，不需要寫任何程式碼也能嵌入 Lottie 動畫。WordPress 外掛目錄中有好幾個 Lottie 專用外掛，使用方式大同小異：安裝外掛後，在文章編輯器中插入 Lottie 區塊，上傳 JSON 檔案或貼上 JSON 檔案的 URL，就能直接在文章中顯示動畫圖標。
如果你還沒有 WordPress 網站，可以先用 InstaWP 免費建立一個測試環境來試玩。已有網站的人，可以搭配 WordPress SEO 外掛推薦把搜尋排名做起來，而 WordPress 快取外掛 則能確保即使頁面裡放了很多 Lottie 動畫，載入速度也不會受到太大影響。
Icons8 Animated Icons 授權條件：免費商用與署名規則
授權條件是使用免費圖標資源時最重要的考量。Icons8 Animated Icons 的免費版採用 Creative Commons Attribution（署名）授權，意思是你可以在個人或商業專案中免費使用這些動畫圖標，唯一的條件是需要附上 Icons8 的署名連結。
署名的方式很簡單：在網站頁尾、App 的「關於」頁面、簡報的參考資料頁，或任何合理的位置加上一個連回 Icons8 的超連結即可。不需要在每個使用圖標的地方都逐一標註，只要確保使用 Icons8 資源的專案中某個地方有署名就行。如果你的網站使用了大量 Icons8 資源，直接在頁尾加一行「Icons provided by Icons8」並連結到官網，就符合授權要求。
這邊要特別提醒，Icons8 的署名授權和 CC0 公眾領域授權不同。像 Iconstore 和 Remix Icon 採用的是 CC0 或 MIT 授權，使用上完全不需要署名。Simple Icons 雖然也是 CC0 授權，但部分品牌圖標可能涉及商標使用規範，需要額外留意。Icons8 的免費版要求署名，如果你不想處理署名問題，就必須升級到付費方案。
Icons8 付費方案功能與價格分析
Icons8 的付費方案涵蓋圖標、圖片、插圖、音樂等完整產品線。截至 2026 年 5 月，Icons8 的主要方案如下：
| 功能 | 免費版 | 付費版 |
|---|---|---|
| 動畫圖標數量 | 3,000+ 個（需署名） | 完整圖標庫 + 免署名 |
| 下載格式 | GIF、JSON、AE | GIF、JSON、AE、SVG、PNG（多尺寸） |
| 授權方式 | 需署名（CC Attribution） | 免署名，完整商業授權 |
| 圖標客製化 | 有限（顏色、大小） | 完整客製化（顏色、大小、樣式） |
| API 存取 | 無 | 有（適合開發者整合） |
Icons8 目前的付費方案分為幾個等級：Icons 方案每月 15 美元，包含手繪圖標資源；AI & Graphics 方案每月 24 美元，額外提供 AI 工具和所有圖像資產（圖標、插圖、照片、3D）；Ultimate 方案每月約 89 美元，提供所有 AI 工具的完整存取權限。年繳方案可享 8 折優惠。
免費版對個人或小型專案來說已經夠用。3,000 多個動畫圖標涵蓋了大部分常見場景，三種格式的支援也很齊全，唯一的麻煩就是需要署名。但如果你是設計公司或大型商業網站，需要免署名授權或透過 API 批次取得圖標，付費版就值得考慮。如果你也有 Logo 設計需求，DesignEvo 提供了 10,000+ 個免費 Logo 範本，或試試 Instant Logo Design 快速產生器，都能和 Icons8 的圖標搭配使用。
Animated Icons 與其他動畫圖標平台比較
除了 Icons8 Animated Icons 之外，市面上還有幾個知名的動畫圖標平台。底下整理它們的主要差異，幫你判斷哪個最適合自己的需求。
| 平台 | 圖標數量 | 支援格式 | 免費授權 | 特色 |
|---|---|---|---|---|
| Icons8 Animated Icons | 3,000+ | GIF、JSON、AE | 需署名可商用 | 風格統一、三種格式一次滿足 |
| LottieFiles | 3,000+ | JSON (Lottie) | 部分免費可商用 | Lottie 生態系核心、社群活躍 |
| Lordicon | 400+ | GIF、JSON、SVG | 有限免費 | 高品質、互動式圖標 |
| Useanimations | 150+ | GIF、JSON、SVG | 需署名可商用 | 極簡風格、免費圖標較少 |
LottieFiles 是目前最大的 Lottie 動畫社群平台，圖標數量超過 3,000 個，全部都是 JSON 格式。它的優勢在於有一個活躍的設計師社群持續上傳新動畫，還提供線上預覽和編輯器。不過 LottieFiles 的免費版在商用授權上有一些限制，部分圖標需要付費才能商用。Icons8 Animated Icons 在這一點上比較大方，免費版只要署名就能商用，沒有圖標級別的限制。
Lordicon 的特色是動畫品質非常高，而且支援互動式圖標（hover、click 觸發動畫），但免費版大約只有 50 個左右的免費選擇。Useanimations 走極簡路線，風格乾淨俐落，但整體數量偏少，適合只需要幾個基本動畫圖標的使用者。
如果你需要更多靜態圖標來搭配使用，Ionicons 有 1,200+ 個精美開源圖標，LineIcons 提供超過 2,000 個線形圖標，而 Unicons Solid 更是收錄了 3,300+ 個圖標，都是不錯的靜態圖標來源。
動畫圖標適合誰？不適合誰？
動畫圖標不是每個專案都需要的。底下從使用情境來說明，幫你判斷是否該花時間導入。
適合使用的情況：
- 網站微互動：當使用者點擊「喜歡」按鈕，圖標從空心變成實心並帶有彈跳動畫，這種視覺回饋讓操作感更加明確。載入狀態也是一樣的道理，一個旋轉的齒輪或彈跳的圓點，比靜態的「載入中」文字更能抓住注意力。你可以參考 UI Design Daily 的每日設計資源，獲取更多 UI 動畫靈感。
- 簡報與文件：在 PowerPoint 或 Keynote 中，GIF 動畫圖標可以讓原本枯燥的頁面瞬間生動起來。電子報也是一樣，在 Email 中嵌入 GIF 動畫圖標（注意 JSON 格式在 Email 中不相容）可以讓版面更有變化。若需要搭配其他設計素材，Pixel True 的免費向量插圖和動畫圖標搭配使用效果很好。
- App 介面設計：動畫圖標最常被用在空狀態頁面、操作引導流程、以及狀態切換動畫。一個精美的「歡迎」動畫圖標能讓新使用者的第一次體驗更加溫暖。Free Deca UI Kit 是一個不錯的 UI 設計素材包，可以和 Icons8 的動畫圖標搭配出完整的 App 介面設計。
不適合使用的情況：
- 追求極簡載入速度的純文字網站：如果你經營的是以內容為主、追求極致載入速度的資訊型網站，動畫圖標可能是不必要的負擔。靜態 SVG 圖標的效能表現會更好。
- 需要大量客製化動畫的專案：如果你需要的是高度客製化的動畫效果（非現成圖標能滿足），直接找動畫設計師用 After Effects 製作會更有效率。Icons8 的動畫圖標是「現成品」，客製化範圍有限。
- 需要無障礙高相容性的政府或公共服務網站：部分使用者對動態畫面敏感，動畫圖標需要搭配
prefers-reduced-motion媒體查詢提供關閉選項，這增加了開發和測試的複雜度。
在使用動畫圖標時，有幾個原則要把握好：不要過度使用，一個頁面裡放太多動畫元素反而會讓使用者分心，建議只在關鍵互動點使用；注意無障礙存取，提供關閉動畫的選項是基本尊重；留意載入效能，雖然 Lottie JSON 檔案很小，但如果同一個頁面有 20 個以上的動畫同時播放，還是可能影響效能。Colorion 配色工具可以幫你選出搭配動畫圖標的配色方案，讓整體視覺更加協調。
如果你正在規劃完整的設計專案，Freebiesbug 匯集了設計師常用的 PSD、Illustrator、Sketch 等格式素材，而 Illustration Kit 提供每週更新的免費向量素材。需要將圖片轉成向量格式時，Vectorizer.AI 能透過 AI 快速把點陣圖轉換成 SVG 向量檔。
Lottie JSON 動畫格式的技術優勢
Lottie 最初由 Airbnb 工程團隊在 2017 年開發，它的核心概念是把 After Effects 動畫匯出成 JSON 資料檔，再由各平台的原生播放器即時渲染。這個做法徹底改變了設計師和工程師之間的協作流程。過去要讓 AE 動畫出現在 App 裡，設計師得輸出逐幀 PNG 序列或 GIF，檔案動輒數百 KB 甚至數 MB；現在只要一個幾十 KB 的 JSON 檔案就搞定了。
從技術面來看，Lottie JSON 的優勢可以歸納為三個關鍵：向量、輕量、跨平台。「向量」意味著動畫可以無限放大不失真，不管是在手機的小螢幕還是 4K 顯示器上，看起來都一樣清晰。「輕量」指的是 JSON 檔案體積通常只有 5-50KB，比同等效果的 GIF 小了十倍以上。「跨平台」則是 Lottie 最強的地方，它原生支援 iOS、Android、Web（包含 React、Vue 等前端框架）、React Native，甚至 macOS 和 Windows 應用程式，同一個 JSON 檔案到處都能用。
很多知名的開源圖標庫也開始支援 Lottie 輸出，像是 Octicons（GitHub 官方圖標庫）和 Feather Icons 都有相關的 Lottie 整合方案。如果你正在建構現代化的 Web 專案，也建議搭配 CSS Gradient 的漸變背景或 CSS Background Patterns 的背景樣式，讓動畫圖標在視覺上更加突出。如果你想進一步了解如何讓 WordPress 網站跑得更快，可以參考我們的 WordPress 速度最佳化技巧一文。
下一步：三個立即可以採取的行動
- 前往 Icons8 Animated Icons 瀏覽圖標：打開 官方頁面，用英文關鍵字搜尋你需要的動畫圖標類型（例如 loading、success、error），確認圖標風格是否符合你的專案調性。預期結果：你會在 5 分鐘內找到至少一個可用的動畫圖標。
- 根據使用場景選擇格式：簡報和社群媒體用 GIF，網站和 App 用 JSON (Lottie)，需要深度修改用 After Effects。判斷標準：如果你不知道選哪個，先下載 JSON 格式試試，它的通用性和效能表現最好。預期結果：你會拿到最適合當前場景的檔案格式。
- 在你的專案中嵌入第一個動畫圖標：WordPress 使用者安裝 Lottie 外掛（在後台搜尋 “Lottie” 即可找到），前端開發者引入 lottie-web CDN 並用三行程式碼初始化。預期結果：你的網站或 App 裡會出現第一個流暢的向量動畫圖標。
如果你也對其他免費設計資源感興趣，我們之前整理了一篇 47 個可商用免費圖庫懶人包，涵蓋了圖片、圖示、圖標、素材和背景等各類資源，歡迎一併參考。在設計工具的選擇上，DesignCap 是一個不錯的線上圖片編輯器，可以直接把下載好的 GIF 動畫圖標匯入到設計稿中。Freepik 則提供了大量可商用的免費圖片和向量素材，和 Icons8 Animated Icons 形成很好的互補。
Icons8 Animated Icons 常見問題 FAQ
Icons8 Animated Icons 完全免費嗎？
Icons8 Animated Icons 提供免費版和付費版兩種方案。免費版可以下載超過 3,000 個動畫圖標的 GIF、JSON 和 AE 格式，唯一的要求是需要附上 Icons8 的署名連結。如果你想免署名或需要 API 存取，就需要訂閱付費方案。免費版的內容對大多數個人專案和小型商業用途已經相當充裕。
免費版的動畫圖標可以商用嗎？
可以。Icons8 Animated Icons 的免費版採用 Creative Commons Attribution 授權，允許在商業專案中使用。你只需要在專案中的合理位置（例如網站頁尾或 App 的關於頁面）加上 Icons8 的署名連結即可。如果不想署名，就需要購買付費方案。
JSON (Lottie) 格式適合用在哪些地方？
JSON (Lottie) 格式最適合用在網站、Web 應用程式、iOS App 和 Android App 當中。它是一種向量動畫格式，檔案極小（通常 5-50KB），支援無損縮放和完整透明背景，而且透過 Lottie 播放器可以在所有主流平台上即時渲染。對於需要兼顧畫質和效能的現代 Web 專案來說，Lottie JSON 是最佳的動畫圖標格式。
如何在 WordPress 網站中嵌入 Lottie 動畫圖標？
WordPress 網站嵌入 Lottie 動畫有兩種方式：一是安裝 Lottie 專用外掛（在 WordPress 外掛目錄搜尋 “Lottie” 即可找到多個選項），安裝後在文章編輯器中插入 Lottie 區塊並上傳 JSON 檔案就行；二是透過 HTML 區塊手動引入 lottie-web CDN 並撰寫初始化程式碼，適合有程式基礎的使用者。
可以修改動畫圖標的顏色、大小和速度嗎？
修改方式取決於你下載的格式。GIF 格式基本上無法修改，除非使用影像編輯軟體逐幀處理。JSON (Lottie) 格式可以透過 Lottie 播放器的參數調整播放速度，也可以用 LottieFiles 線上編輯器修改顏色。AE 格式擁有最高的編輯自由度，可以在 After Effects 中修改所有動畫屬性。Icons8 網站上也提供基本的線上客製化功能，讓你在下載前先調整顏色和大小。如果你需要把修改後的圖片放大，Bigjpg 是一個好用的 AI 圖片放大工具，而 AI Image Enlarger 也是類似的解決方案。
Animated Icons 和 Icons8 的靜態圖標庫有什麼不同？
Icons8 Animated Icons 專門收錄「動畫」圖標，每個圖標都有動態效果（旋轉、彈跳、漸變等），支援 GIF、JSON 和 AE 三種格式。Icons8 主站的靜態圖標庫則提供超過 14 萬個靜態圖標，支援 PNG、SVG、PDF 等格式。兩者是互補關係：靜態圖標用於常規的 UI 元素（導覽列、按鈕、工具列），動畫圖標用於需要動態效果的場景（載入狀態、微互動、視覺焦點）。你也可以參考 Heroicons.dev 的 176+ 個線上開源圖示，以及 Iconpie 快速產生網站所需的各尺寸圖標。
圖標的解析度是多少？放大會模糊嗎？
這取決於你選擇的格式。GIF 格式是點陣圖，放大到一定程度後會出現鋸齒和模糊。但 JSON (Lottie) 和 AE 格式都是基於向量的動畫，理論上可以無限放大而不失真。在需要大尺寸顯示的場景下，建議優先使用 JSON 或 AE 格式。如果手邊只有 GIF 格式又需要放大，可以試試 Compressor.io 在壓縮圖片的同時維持一定的品質。搭配 免費虛擬人物頭像素材包 的資源，可以為你的 WordPress 網站增添更多視覺變化。
