Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124

Illustration Kit 免費向量插圖素材庫整理免費圖片、向量圖型與向量圖檔、功能特色、使用步驟、適合族群與限制,幫助你判斷是否適合用於內容製作與檔案處理。
用 AI 摘要這篇文章:
Illustration Kit 是一個免費向量插圖素材庫,提供超過 140 張可商用、免署名的插圖,支援線上調色、SVG/PNG 下載和 Figma 外掛,適合網頁、APP 和簡報使用。
和 Pexels、Unsplash 這類以照片為主的免費圖庫不同,Illustration Kit 專注在向量插圖這個品類。它由 Flowbite 團隊營運(Flowbite 本身是一個開源的 Tailwind CSS 元件庫),目前提供三種不同風格的插圖包:手繪趣味的 Yippy、現代簡約的 Ven、以及針對線上服務場景設計的 Halo,三包合計超過 140 張向量插圖。每一張都可以在網站上直接調整配色,再下載 SVG 或 PNG 格式,完全免費、免署名、可商用。
目錄
Illustration Kit 是一個由 Flowbite 團隊營運的免費向量插圖素材網站,定位明確:提供高品質、風格一致的向量插圖,讓設計師和開發者可以在自己的專案中免費使用。
截至 2026 年 5 月,Illustration Kit 共提供三個插圖風格包,分別是 Yippy、Ven 和 Halo。Yippy 是手繪趣味風格,收錄了 25 張場景插圖加上 30 張圖標和頭像插圖;Ven 走現代簡約路線,有 21 張場景插圖;Halo 則是針對線上服務主題設計的插圖包,共 70 張插圖,涵蓋了空狀態頁面、聊天機器人、數據安全等常見的 SaaS 場景。三個包加起來總數超過 140 張,和 ManyPixels Gallery 的 2500+ 張相比數量不算多,但每一張的品質和一致性都維持得很好。
所有插圖都支援 SVG 和 PNG 兩種格式下載,而且網站內建線上調色功能,可以批次調整整個插圖包的配色。這意味著你不需要額外安裝圖片編輯工具,就能直接讓插圖配合你的品牌色系。授權方面採用的是自訂免費授權條款,允許商用、允許修改、不需署名,但不能轉售插圖本身或用來建立競爭服務。
如果你正在尋找更多類似的免費插圖資源,可以參考 Reshot 的免費向量插圖、Storyset 的線上客製化插圖,或是 Pixel True 的 150+ 免費插圖。想要一次看齊所有免費圖庫選項,我們整理的47 個可商用免費圖庫懶人包也值得收藏。
Illustration Kit 目前提供三個不同風格的插圖包,每個包都有明確的設計語言和適用場景。以下用表格幫你快速比較,再逐一介紹細節。
| 插圖包 | 風格定位 | 場景插圖數 | 圖標/頭像數 | 最適合用途 |
|---|---|---|---|---|
| Yippy | 手繪趣味 | 25 張 | 30 張 | 教育、新創、APP 引導頁 |
| Ven | 現代簡約 | 21 張 | 無 | B2B 官網、商務簡報 |
| Halo | 線上服務/SaaS | 70 張 | 無 | 空狀態頁面、404、錯誤提示 |
Yippy 是 Illustration Kit 中收錄數量最多的插圖包,包含 25 張場景插圖和 30 張圖標、頭像類插圖,總計 55 張。整體風格偏向手繪趣味感,線條圓潤、色彩飽和,給人輕鬆活潑的感覺。場景插圖涵蓋了 404 錯誤頁面、數據分析、團隊協作、商品配送、設計工作、財務報表、成長曲線、創意發想、產品上線、搜尋功能、訊息傳送、購物流程、旅行主題、施工中等常見場景。圖標和頭像類則有日曆、聊天、程式碼、教育、郵件、檔案管理、行銷、通知、支付、安全等主題。
這個風格包非常適合用在需要展現親和力的場合,像是新創公司的官網、教育類 APP、或是 PPT 簡報中需要增加趣味性的頁面。和 Loose Drawing 的日本免費插圖風格類似,Yippy 也提供了線上調色功能,讓你可以把整包插圖的配色統一調整成你的品牌色系。
Ven 是三個包中最精簡的一個,共 21 張場景插圖,走的是現代簡約路線。線條乾淨、構圖俐落、用色節制,整體視覺感覺比較成熟穩重。場景涵蓋了數據分析、商業策略、設計師工作、電子郵件、朋友自拍、產品上線、動物保育、會議討論、手機購物、線上購物、Podcast、簡報展示、程式開發、任務管理、飯店預訂、視訊通話、網頁設計等主題。
如果你正在設計一個 B2B 服務的官網,或者需要給 部落格封面圖 增添一些質感,Ven 的插圖風格會比 Yippy 更適合。它和 Sozai Good 的日系插圖有異曲同工之妙,但 Ven 的風格更偏向西方的 SaaS 產品設計美學。
Halo 是數量最多的一個插圖包,共 70 張插圖,主題圍繞線上服務和數位產品場景。這個包最大的特色是涵蓋了大量「空狀態」(Empty State)插圖,像是空購物車、空資料夾、空收件匣、空錢包、無搜尋結果、無訂單等,這些都是 SaaS 平台和電商網站非常常見的 UI 需求。除了空狀態之外,Halo 還包含了擴增實境、聊天機器人、社群互動、連線中斷、客戶支援、數據報告、數據安全、電子郵件行銷、招募人才、專案規劃、SEO、社交媒體行銷、待辦事項、上傳照片、虛擬實境、語音介面、遠端工作等場景。
對於前端工程師和 UI 設計師來說,Halo 幾乎是一個現成的「空狀態插圖解決方案」。如果你正在開發一個 Web 應用程式,Halo 的插圖可以立刻拿來用在 404 頁面、載入中、操作成功、無資料等各種狀態。風格上它和 Uncommon Illustrations by Artify 有點類似,但 Halo 的主題更聚焦在網路服務場景。如果你喜歡像素風格,DOTOWN 也是另一個值得參考的免費插圖來源。
三個風格包雖然視覺語言不同,但都提供了統一的線上調色功能,所以你可以同時使用多個包的插圖,只要把顏色調整一致,就能在視覺上維持和諧感。這一點和 Whoooa! 的手繪向量插圖只提供單一風格的做法相比,Illustration Kit 的選擇彈性更大一些。
Illustration Kit 的授權條款算是相當寬鬆的,但在使用之前還是有幾個重點需要搞清楚。以下直接根據官方 License 頁面整理核心規則。
你可以做的事情:
你不可以做的事情:
簡單來說,只要你把插圖當成創作素材的一部分來使用(例如放在網頁、APP、簡報、社群圖片、電子報裡面),就完全沒有問題。但如果你想把插圖本身當成商品來賣,或者拿別人的插圖去開一個類似的插圖網站,那就違反授權條款了。
這個授權模式和大家熟悉的 CC0(公眾領域貢獻宣告)有一個關鍵差異:CC0 是直接放棄所有版權,讓素材進入公眾領域,任何人可以做任何事;而 Illustration Kit 的授權則是保留版權,但給你一個非常寬鬆的使用許可。CC Search 搜尋引擎找到的 CC0 素材(像是 Pexels、Pixabay、Unsplash 上的照片)在授權上更自由,但 Illustration Kit 的限制其實也很少,對絕大多數正常使用場景來說完全夠用。
如果你對免費圖庫的授權方式有興趣,我們整理的 47 個免費圖庫懶人包裡面有針對不同圖庫的授權方式做了詳細比較。FreeImages 和 NegativeSpace 也都提供了類似的免版稅授權方式,可以交叉參考。
Illustration Kit 的操作非常直覺,整個流程就是「選風格包、選插圖、調顏色、下載」四個步驟。不需要註冊帳號,也不需要登入,打開網頁就能直接開始使用。
進入 Illustration Kit 首頁後,你會看到三個插圖包的預覽圖:Yippy、Ven 和 Halo。點擊任何一個就會進入該風格包的瀏覽頁面。進入之後,頁面會列出這個包裡所有的插圖,你可以直接往下滾動瀏覽,也可以用頁面上方的搜尋框輸入關鍵字來找特定的插圖。例如在 Halo 包裡搜尋「empty」,就會篩選出所有空狀態相關的插圖。

和 Vecteezy 或 Freepik 這類大型圖庫比起來,Illustration Kit 的素材數量不算多,但正因為數量有限,瀏覽起來反而更輕鬆,不需要在幾萬張素材裡大海撈針。如果你需要更多元的風格選擇,Storyset 也提供了類似的線上客製化插圖功能。
Illustration Kit 最實用的功能之一就是線上調色。在每個插圖包的瀏覽頁面上方,你會看到調色選項。目前提供兩種主要配色方案可以切換,同時也能調整人物膚色的色調。當你改變配色後,頁面上所有的插圖都會同步更新,這樣你就能一眼看出整套插圖在你選定色系下的整體效果。

這個批次調色的設計非常貼心,因為它確保了你下載的所有插圖在色調上是一致的,不需要一張一張手動調整。如果你的品牌有特定的色碼,可以先到 Color Palette Generator 產生對應的色盤,再到 Illustration Kit 找最接近的配色方案。
設定好顏色之後,點選任何一張插圖就會跳出下載視窗。視窗中提供「Download SVG」和「Download PNG」兩個按鈕,選擇你需要的格式就能直接下載。下載視窗下方也會標示「No attribution required」的說明,提醒你不需要署名即可使用。

如果你選擇下載 SVG 格式,之後還可以透過 SVGOMG 來壓縮優化檔案大小,減少網頁載入時間。而如果你需要將 SVG 轉換成其他格式,Free Online File Converter 或 AnyWebP 都是不錯的線上轉檔工具。對於 WordPress 網站的使用者,了解如何在 WordPress 中使用 WebP 圖片格式也能幫助你進一步優化網站效能。

如果你有在使用 Figma 設計工具,Illustration Kit 也提供了官方的 Figma 外掛,讓你可以直接在 Figma 的設計檔案中搜尋和插入插圖,不需要先下載到電腦再匯入。這對於日常工作流程以 Figma 為主的設計師來說非常方便,和 Clay Mockups 提供 Figma 格式的設備模型一樣,都是為了簡化設計師的工作流程。

在首頁的訂閱欄位輸入你的 Email 地址,就能訂閱 Illustration Kit 的電子報。當他們推出新的插圖包或更新素材時,你會在第一時間收到通知。如果你經營電子報或行銷素材,SendPulse 也是一個整合 Email 電子報、SMS 和 Web Push 的行銷平台,可以搭配使用。
Illustration Kit 提供了 SVG 和 PNG 兩種下載格式,選哪一個取決於你的使用場景。
| 使用場景 | 建議格式 | 原因 |
|---|---|---|
| 網頁內嵌 | SVG | 向量格式,放大不失真,可用 CSS/JS 動態修改 |
| 簡報、社群媒體 | PNG | 相容性最好,線上工具可直接編輯 |
| 需要動畫或互動 | SVG | 可嵌入 HTML,支援 CSS 動畫和 JavaScript 操作 |
| Email 電子報 | PNG | 郵件客戶端對 SVG 支援不一致 |
如果你選擇 SVG 格式,之後可以透過 SVGOMG 壓縮檔案大小而不影響畫質。需要將 PNG 轉換成 WebP 格式來優化網頁載入速度時,AnyWebP 可以幫你快速轉檔。而 SVG Waves 和 SVG Favicon Maker 則是其他實用的 SVG 相關工具。需要大量 SVG 圖標素材的話,SVG Repo 提供了超過 30 萬個免費 SVG 圖標可以下載。
Illustration Kit 的插圖可以用在非常多地方,以下列舉五種最常見也最實用的情境。
1. 網站空狀態插圖:這是 Halo 插圖包最擅長的場景。當使用者登入你的網站後看到空的購物車、空的收件匣、或沒有搜尋結果的頁面,一張精心設計的空狀態插圖可以讓使用者體驗好很多。比起冷冰冰的文字訊息,一張插圖能軟化使用者的情緒。如果你的網站是架在 WordPress 上的,搭配良好的快取外掛和SEO 外掛,整體效能和使用者體驗都能再提升。
2. APP 引導畫面與錯誤頁面:不論是 iOS 還是 Android APP,第一次開啟時的引導畫面(Onboarding)都需要插圖來輔助說明。Yippy 的手繪風格很適合用在這裡,讓使用者感受到友善和親切。當 APP 發生錯誤或連線中斷時,一張帶有幽默感的插圖也能緩和使用者的焦慮感。
3. 簡報設計與社群媒體圖片:在做簡報的時候,適當加入插圖可以讓投影片不會那麼枯燥。Ven 的現代簡約風格很適合商務簡報,Yippy 則適合教育或輕鬆主題的場合。如果你需要快速製作簡報,小米 PPT 提供了大量免費範本可以下載。而 Coverview 則可以幫你快速產生部落格文章的封面圖。
4. 部落格文章插圖:一篇部落格文章如果全都是文字,閱讀起來會很吃力。在段落之間插入相關的插圖,不僅能讓版面更有層次感,也能幫助讀者更快理解內容。你可以先用 Pixelcut Image Recolor 或 Illustration Kit 內建的調色功能,把插圖的顏色調整成和你的品牌色系一致,再嵌入文章中使用。
5. 電子報與行銷素材:在電子郵件行銷中使用插圖,可以提升信件的視覺吸引力,增加點擊率。Illustration Kit 的插圖因為檔案小(特別是 SVG 格式),很適合用在需要控制信件大小的場合。Artify.co 和 DesignCap 也是不錯的線上設計工具,可以幫你把插圖和文字組合成完整的行銷素材。
在品牌搭配上,一個實用的技巧是先把你的品牌主色和輔助色找出來,然後在 Illustration Kit 的調色功能中選擇最接近的配色方案。如果現有方案不夠貼合,下載 SVG 格式後也可以在向量編輯軟體中進一步微調個別顏色。對於需要批次處理圖片的使用場景,Mark My Images 提供了批次添加浮水印和調整尺寸的功能。
市面上提供免費插圖素材的網站不少,以下把 Illustration Kit 和幾個常見的替代方案做個橫向比較。
| 網站 | 插圖數量 | 免署名 | 線上調色 | 特色 |
|---|---|---|---|---|
| Illustration Kit | 140+ | 是 | 是(批次) | 三種風格包,品質一致性高 |
| Storyset | 數百張 | 需署名 | 是(進階) | 可編輯物件、輸出動態 GIF |
| ManyPixels | 2500+ | 是 | 是 | 數量最多,風格多元 |
| Reshot | 大量 | 是 | 否 | 涵蓋圖示、向量、照片 |
| Icons8 | 最大 | 免費版需署名 | 是 | 圖標、插圖、照片、音樂都有 |
| Freepik | 2000 萬+ | 免費版需署名 | 否 | 規模最大,但每日下載有限制 |
| Vecteezy | 大量 | 需署名 | 否 | 涵蓋圖片、向量、影片 |
如果你的需求是「少量高品質、風格一致、免署名、可線上調色」的向量插圖,Illustration Kit 是一個很好的起點。如果你需要更大量的素材或更多元的風格選擇,可以搭配 Storyset、ManyPixels Gallery 或 Freepik 一起使用。
適合使用的人:前端工程師在開發網站或 APP 時需要空狀態插圖、404 頁面插圖、或引導頁面的視覺素材;UI/UX 設計師在做原型設計時需要快速的視覺元素來填充頁面;內容創作者和部落格經營者需要文章插圖來提升閱讀體驗;行銷人員需要社群媒體圖片和電子報的視覺素材。如果你日常會用到 UI Design Daily 的免費 UI 資源,或是在 Freebiesbug 上找設計素材,那你一定也會喜歡 Illustration Kit。
不太適合的人:如果你需要大量且風格完全一致的素材(超過幾百張),Illustration Kit 的數量可能不夠,ManyPixels Gallery 會是更好的選擇。如果你需要 3D 風格或照片寫實風格的插圖,Illustration Kit 也無法滿足,這時候 Humans by Wannathis 的 3D 角色素材或 Generated Photos 的 AI 人物照片會更適合。如果你需要非常複雜的場景插圖或自訂角色,Freepik 的付費方案提供了更多進階選項。
Illustration Kit 和 Free Deca UI Kit 這類 UI 素材包的定位類似,都是提供免費的設計資源來加速你的工作流程。差別在於 UI Kit 提供的是介面元件,而 Illustration Kit 提供的是插圖素材。兩者搭配使用,就能快速建立出一個視覺完整的產品原型。
可以。Illustration Kit 的授權條款明確允許將插圖用於商業用途,完全免費。你可以把插圖放在商業網站、APP、社群媒體廣告、電子報、簡報等任何商業場景中使用,不需要付費購買授權。
不需要。Illustration Kit 不要求署名。雖然官方表示如果你願意標註來源他們會很感謝,但這不是強制要求。這一點和 Flaticon 免費版需要署名的規定不同,使用上更加自由。
可以。授權條款允許你修改、調整或建立插圖的衍生作品。你可以用網站內建的調色功能調整顏色,也可以下載 SVG 格式後在向量編輯軟體中修改任何細節。如果你之後需要壓縮圖片,Compressor.io 或 Compress PNG/JPG 線上壓縮工具都可以幫你減少檔案大小。
可以。授權條款允許你將插圖用於自己或客戶的專案中。如果你是設計師或開發者,把 Illustration Kit 的插圖放進客戶的網站或 APP 中是完全沒有問題的。
Illustration Kit 有提供 Figma 外掛,你可以直接在 Figma 中搜尋和插入插圖。但如果是獨立的原始檔(像是 .fig 或 .sketch 檔),官方目前沒有提供直接下載。你下載的是 SVG 或 PNG 格式的成品檔案。
Illustration Kit 的更新頻率沒有固定的公開時程,但會不定期新增插圖。你可以訂閱他們的 Email 電子報,在有新素材上線時收到第一手通知。
不行。授權條款明確禁止將插圖單獨出售或散佈。把插圖直接印在商品上販售(例如做成貼圖包、T 恤、海報等)也屬於單獨出售插圖的範疇,是不被允許的。但如果你把插圖當成一個更大作品的一部分(例如在一張包含文字和多種元素的設計稿中使用插圖),那就是可以的。如果對授權範圍有疑慮,建議直接參考官方的 License 頁面確認。
網站名稱:Illustration Kit: Free illustrations
網站網址:https://illustrationkit.com/