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

Iconshock 是一個專門提供大量圖標 icons 的資源網站,Iconshock 與之前介紹過的 Icons8 一樣,提供各種不同樣式、風格的圖標 icons,而且 Iconshock 也有提供超過 400 個以上的圖標集,以及超過 30 種的樣式。
在做網頁設計或 App 介面時,圖標(icons)幾乎是不可或缺的視覺元素。一個好用的圖標不僅能節省版面空間,更能幫助使用者快速理解操作意圖。如果你正在找一個收錄量大、風格多元的圖標資源平台,Iconshock 值得你放進書籤列。官方號稱收錄超過 200 萬個圖標,分佈在 800 個以上的圖標集當中,涵蓋 45 種以上的設計風格,規模在全球圖標資源平台裡算是數一數二的。
Iconshock 是一個專門提供大量圖標的線上設計資源網站,從 2020 年營運至今,持續在圖標的數量和風格多樣性上精進。跟之前介紹過的 Icons8 類似,Iconshock 提供了各種不同樣式的圖標供使用者搜尋與下載。不過兩者的定位還是有些差異:Icons8 比較強調單一風格的完整性與 API 整合能力,而 Iconshock 則把重心放在圖標集的多樣性和漸變色調色盤這類視覺客製化功能上。
如果你之前用過 Flaticon 或 FindIcons 這類圖標搜尋引擎,對 Iconshock 的操作邏輯應該不會太陌生。差別在於 Iconshock 的圖標集分類更細膩,每一個集合同一主題的圖標在風格上高度一致,這對需要統一視覺調性的專案來說非常實用。平台也支援中文關鍵字搜尋,對台灣使用者來說操作起來沒有語言障礙。免費方案就能下載 PNG 格式的圖標做個人使用,門檻相當低。
網站名稱:Iconshock – 2 million stock icons and 800 icon sets
網站網址:https://www.iconshock.com/
目錄
用過不少圖標資源平台之後,我覺得 Iconshock 最突出的幾個功能,確實是其他同類網站比較少同時具備的。以下逐一拆解它的核心能力。
進入 Iconshock 首頁後,最上方的搜尋框可以直接用關鍵字尋找特定的圖標。左側欄則提供了完整的風格分類篩選器,你可以依圖標集名稱、設計風格(flat、material、3D、hand drawn 等)來縮小範圍。這點跟 CSS.GG 或 Heroicons 這類專注單一風格的圖標庫不同,Iconshock 把多種風格整合在同一個平台上,切換起來很方便。
這大概是 Iconshock 最具辨識度的功能。在特定的圖標集(尤其是 Gradientify 系列)當中,頁面左側會出現一組調色盤,你可以即時變更圖標的前景色和背景色。跟其他平台那種只能選單一顏色的調色功能不同,Iconshock 的漸變色調色盤可以讓你設定兩個色端,產生從 A 色過渡到 B 色的漸層效果。更棒的是,調整完畢後系統會自動產生對應的 CSS 漸變色程式碼,可以直接複製貼到你的樣式表裡。對前端開發者來說,這省下了不少手動調漸變色的時間。
承上面提到的漸變色功能,Iconshock 在 Gradientify 圖標集的每個圖標旁邊,都提供了當前漸變色組合的 CSS 樣式碼。這段程式碼包含了完整的 linear-gradient 設定,拿去用在按鈕背景、卡片裝飾或任何需要漸變色的 UI 元件上都非常方便。如果你對 CSS 漸變色有興趣,也可以搭配 CSS Gradient 這類工具進一步微調。
Iconshock 支援的下載格式非常完整:PNG、SVG、AI、PSD,甚至還有 Icon Font 格式。免費方案可以下載 PNG 檔案(最高 72px),付費方案則開放所有向量格式與全尺寸下載。格式選擇的多樣性讓 Iconshock 能夠融入各種不同的工作流程,不管是網頁開發、平面設計還是 App 介面製作,都能找到對應的格式。如果你需要把圖標轉成 Icon Font 來用在前端專案,可以參考 IcoMoon App 的做法,先把 SVG 檔下載好再匯入產生字型檔。想要更多 SVG 圖標資源的話,SVG Repo 也有不少免費的向量圖標可供下載。
在所有 Iconshock 的圖標集當中,Gradientify 系列是我個人覺得最有特色的。它把漸變色(gradient)直接融入圖標設計當中,讓每個圖標都帶有色彩過渡的視覺效果,遠比傳統的單色或雙色圖標更有質感。在當前 UI 設計趨勢走向更豐富的色彩運用時,這種漸變色圖標確實能讓你的作品脫穎而出。
Gradientify 的操作方式很直覺。進入該圖標集的頁面後,左側會出現一組色彩調整面板,上面有前景色和背景色的設定區域。你可以用色相環或直接輸入色碼來調整漸變色的兩端顏色。調整過程中,頁面上所有的圖標會即時反映你選擇的色彩組合,不需要額外按「套用」或「重新整理」。這種所見即所得的操作體驗,讓你可以在很短的時間內嘗試各種配色組合,找到最適合你專案的那一組。
比較特別的是,每調整一組新的漸變色,Iconshock 就會自動產生對應的 CSS 程式碼。這段程式碼是標準的 CSS linear-gradient 語法,可以直接複製到你的網頁樣式表裡使用。舉個例子,如果你選了一組從紫色到藍色的漸變色,系統產生的 CSS 大概會是類似 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 這樣的格式。
這個功能的實用場景很多。比方說你在設計一個品牌網站,需要讓圖標的色調跟品牌主色保持一致,透過 Gradientify 的調色盤就能快速做到。或者在開發行動裝置 App 時,想要讓工具列圖標帶點漸變色的現代感,也可以直接從這裡找到靈感並取得對應的 CSS。如果你對漸變色的配色邏輯還不太熟悉,可以搭配 Color Palette Generator 或 Coolors 這類配色工具先找出喜歡的色系,再到 Iconshock 裡套用。CSS Background Patterns 提供的背景樣式也能跟漸變色圖標搭配使用,讓整體視覺更加協調。
Iconshock 提供了四種方案,從完全免費到終身買斷都有。每一種方案的授權範圍和檔案格式都不太一樣,這裡把差異整理清楚,方便你根據自己的需求做出選擇。
免費方案提供 PNG 格式的圖標下載,最高解析度到 72px。採用署名授權(attribution required),也就是你必須在使用圖標的作品中標明來源,並連回 iconshock.com。授權範圍限於個人使用,不能用於任何商業用途。如果你的需求只是做個人的簡報、學校作業或練習用的網頁設計,免費方案就夠了。
這個方案是單一圖標集的商用授權。付費 $19 美元(一次買斷,非訂閱)之後,你就可以取得該圖標集內所有圖標的向量檔案,包含 AI、SVG、PSD 和 Icon Font 格式。最關鍵的是,這個方案提供商業授權,不需要再署名。如果你正在做一個特定的商業專案,只需要某一個風格的圖標集,這個方案的 CP 值很高。
跟 Material General 的差別在於涵蓋範圍。Full Material 把整個分類(category)底下的所有圖標集都包進來了。比方說你買了「辦公室」分類的 Full Material,那這個分類下的所有圖標集,不管幾套,向量檔和商用授權全部都包含。對於需要多種圖標風格但主題集中的設計師來說,$29 美元的價格很合理。跟 Freepik 的訂閱制相比,Iconshock 的買斷模式對偶爾才用到圖標的人更友善。
這是 Iconshock 的旗艦方案,等於取得整個網站超過 200 萬個圖標的完整存取權限。包含所有圖標集、所有風格、所有格式的下載權利。商用授權支援無限使用者,每週還會有新圖標更新。如果你是專業設計師或開發者,經常需要各種風格的圖標,$99 美元終身買斷的方案算下來成本非常低。$79 美元的年繳方案則適合想要試水溫的使用者,先用一年確認平台是否符合需求,再決定是否升級到終身方案。相比 Iconhub 或其他同類平台,Iconshock 在圖標數量和風格多樣性上的優勢很明顯。
| 項目 | Free Download | Material General | Full Material | Full Iconshock |
|---|---|---|---|---|
| 檔案格式 | PNG(最高 72px) | AI, SVG, PSD, Icon Font | AI, SVG, PSD, Icon Font | 全格式 + 全尺寸 PNG |
| 圖標範圍 | 單一圖標 | 單一圖標集全部 | 整個分類全部 | 全站 200 萬+ 圖標 |
| 授權類型 | 個人使用 | 商用授權 | 商用授權 | 商用授權(無限使用者) |
| 需要署名 | 是 | 否 | 否 | 否 |
| 更新頻率 | 無 | 無 | 無 | 每週新增 |
| 免費 | — | $19 美元/終身 | $29 美元/終身 | $79/年 或 $99/終身 |
很多人在使用免費圖標資源時,最常忽略的就是授權條款。搞不清楚能不能商用,貿然把圖標放進客戶的專案裡,輕則被要求下架,嚴重的話可能面臨法律問題。Iconshock 的授權機制不算複雜,但有幾個關鍵點值得搞清楚。以下分別說明免費和付費方案的授權差異。
Iconshock 的免費方案要求使用者在使用圖標時必須附上來源標示(attribution)。具體的做法是在使用圖標的頁面或作品中,加上一個連回 iconshock.com 的超連結。這個要求跟 Icons8 免費圖庫的署名機制很類似,都是用連結回原網站的方式來標註來源。實務上,最常見的做法是在網站頁尾加上「Icons by Iconshock」之類的文字,並把「Iconshock」設為連回官網的超連結。
購買任何付費方案後,你就取得了商用授權。這意味著圖標可以用在客戶的網站、App 介面、社群媒體廣告、印刷品、簡報模板等各種商業用途。不需要署名,也沒有使用次數限制。Full Iconshock 方案的商用授權還支援「無限使用者」,這對設計團隊來說很實用。一家公司買一個終身授權,團隊裡所有設計師都能合法使用這些圖標,不需要每個人分別購買。這點比很多按人頭計費的設計資源平台划算得多。而且付費方案的圖標也沒有下載次數的限制,同一個圖標可以重複使用在不同的專案當中。
有幾個觀念需要釐清。免費方案下載的圖標確實不能商用,這點 Iconshock 在下載頁面有明確標示。即使你購買了 Material General 方案,商用授權的範圍也只限於你購買的那個圖標集,不能跨集使用。付費方案的授權是終身的(除非你選的是 $79 年繳方案),不會因為方案到期而失效。如果你對免費圖庫的授權邏輯有興趣,可以參考 Unsplash 或 Freerange Stock 這類採用更寬鬆授權模式的圖庫平台。更多免費素材的授權比較,可以參考 StockSnap 的相關說明。
市面上的圖標資源平台很多,每個平台的強項和弱項都不太一樣。如果你正在猶豫該選哪一個,這裡從幾個關鍵維度來比較 Iconshock 和幾個主流平台的差異。了解每個平台的定位後,你就能根據自己的工作習慣和預算來做出最適合的選擇。
Icons8 是目前知名度最高的圖標平台之一,提供線上編輯器、API 介接和多種設計工具整合。Icons8 的優勢在於生態系完整,有桌面端應用程式和 Figma 外掛。但 Icons8 的免費方案限制較多,下載需要署名,且付費方案是訂閱制。相比之下,Iconshock 的終身買斷模式對不喜歡訂閱的人更有吸引力,而且圖標數量比 Icons8 多出一個數量級。
Flaticon 背後是 Freepik 公司,擁有龐大的圖標庫和線上編輯器。Flaticon 的優勢在於整合了完整的編輯功能,可以直接在瀏覽器裡調整圖標顏色和大小。不過 Flaticon 的免費方案下載量有限制(每天 10 個),而且付費方案是月繳訂閱制。Iconshock 的免費方案沒有每日下載限制,付費方案又支援終身買斷,在價格彈性上更勝一籌。
iconmonstr 是一個走極簡路線的圖標平台,所有圖標都是完全免費的 CC0 授權,不需要署名,可以直接商用。如果你只需要少量簡潔的圖標,iconmonstr 的門檻最低。但它的圖標數量(4000+)和風格多樣性遠不如 Iconshock,而且沒有提供漸變色調色盤或 CSS 程式碼匯出這類進階功能。
IcoMoon App 的強項在於圖標字型(icon font)的製作和管理。你可以把多個來源的 SVG 圖標匯入 IcoMoon,然後產生一組自訂的 icon font 來用在前端專案。Iconshock 本身不提供字型製作功能,但它提供的 SVG 和 Icon Font 格式檔案可以直接匯入 IcoMoon 進行後續處理。兩者搭配使用效果很好。
除了上面幾個,還有 Iconpark 的豐富圖標庫、Feather Icons 的極簡開源圖標、Lineicons 的精緻線條風格,以及 Emblemicons 的產品開發圖標。每個平台都有自己的特色,建議根據專案需求來選擇,不一定要只綁定一個。
知道 Iconshock 有哪些功能之後,更重要的是怎麼把這些圖標實際用在你的設計專案裡。以下分享幾個常見的使用場景和實務技巧,幫助你把下載的圖標發揮最大價值。
在 WordPress 網站中使用 Iconshock 的圖標,最簡單的方式是下載 SVG 格式後直接上傳到媒體庫,然後在文章或頁面中插入。如果你想要更靈活的整合方式,可以考慮把圖標轉成 Icon Font 格式,再透過 CSS 來控制大小、顏色和 hover 效果。搭配 WordPress SEO 外掛 優化網站時,在導覽選單和按鈕上加上圖標也能提升使用者體驗和點擊率。很多 WordPress 佈景主題 本身就內建了圖標字型支援,你只需要把從 Iconshock 取得的 SVG 檔匯入主題的圖標管理功能即可。
設計 App 介面時,圖標風格的一致性非常重要。建議從 Iconshock 的同一個圖標集當中挑選圖標,這樣可以確保線條粗細、圓角大小和整體視覺調性都保持統一。如果你的 App 有品牌色,可以利用 Gradientify 的調色盤把圖標統一套上品牌漸變色。製作簡報或社群媒體貼文時,從 Iconshock 下載 PNG 格式的圖標,直接貼進 DesignCap 這類線上設計工具裡,很快就能產出一張有質感的資訊圖。
對前端開發者來說,Icon Font 是一種很方便的圖標使用方式。你可以把 Iconshock 提供的 SVG 檔案匯入字型產生工具,產生一組自訂的 icon font,然後透過 CSS 的 @font-face 和 pseudo element 來在網頁中顯示圖標。這種做法的好處是可以用 CSS 控制圖標的所有視覺屬性,而且不會增加 HTTP 請求的數量。品牌一致性也是需要注意的面向,在一個專案當中盡量使用同一套圖標風格,不要混搭 flat 和 3D 風格的圖標。
不同的設計場景需要不同的檔案格式。了解每種格式的特性和適用情境,能幫你省下很多格式轉換的麻煩。以下逐一說明 Iconshock 支援的各種下載格式,以及在什麼情況下該選擇哪一種。
PNG 是免費方案唯一能下載的格式,支援透明背景,最高解析度為 72px。對於一般網頁使用來說,72px 的 PNG 圖標在標準螢幕上看起來是夠清楚的,但如果你需要在 Retina 或高解析度裝置上呈現,72px 就會略顯模糊。PNG 的優點是相容性最好,幾乎所有軟體和平台都支援,直接上傳就能用。如果你需要壓縮 PNG 檔案大小,可以試試 Compressor.io 這類線上壓縮工具。ShortPixel 也是一個不錯的圖片壓縮選擇,特別適合 WordPress 網站的圖片優化需求。
SVG(Scalable Vector Graphics)是向量圖格式,不管放大到多大都不會失真。這對響應式網頁設計來說非常重要,因為同一個圖標需要在不同螢幕尺寸上都保持清晰。SVG 檔案本身是 XML 格式的文字檔,可以直接用文字編輯器開啟修改顏色和尺寸,也可以用 CSS 來控制樣式。
AI 是 Adobe Illustrator 的原生向量格式,如果你是平面設計師,習慣用 Illustrator 來處理圖標的細節修改,AI 格式是最方便的選擇。PSD 格式則保留了完整的 Photoshop 圖層資訊,方便你在 Photoshop 裡進行後製調整。這兩種格式都只包含在付費方案當中。
Icon Font 把圖標封裝成字型檔,可以像使用一般文字字型那樣在網頁中顯示圖標。優點是可以用 CSS 的 font-size、color、text-shadow 等屬性來控制圖標的視覺效果,而且在任何瀏覽器上都能完美渲染。如果你需要處理圖片格式的相容問題,AnyWebP 是一個方便的線上轉檔工具。Optidash 則可以幫你優化圖標圖片的品質和大小。
不行。Iconshock 的免費方案明確標示僅限個人使用(Personal use license),而且需要附上來源標示。如果你要在商業專案中使用,至少要購買 Material General 方案($19 美元/終身)才能取得商用授權。
在使用圖標的頁面或作品中,加上一段「Icons by Iconshock」之類的文字,並將「Iconshock」設為連回 iconshock.com 的超連結即可。在簡報或印刷品中,可以在參考資料區標註「圖標來源:iconshock.com」。
如果你的工作會持續需要各種風格的圖標,$99 美元的終身方案非常划算。換算下來,你用不到一次外接硬碟的價格,就能取得超過 200 萬個圖標的完整商用授權,而且終身有效。相比之下,很多同類平台的訂閱費用一年就不只這個數字了。
簡單的原則:用在網頁上就選 SVG,用在簡報或社群貼文就選 PNG。SVG 是向量格式,不管放大縮小都不會模糊,而且可以用 CSS 控制。PNG 是點陣格式,相容性最好,但不適合大幅縮放。
購買付費方案後,圖標可以用在幾乎所有商業場景:客戶網站、行動 App 介面、社群媒體廣告素材、簡報模板、印刷品、電子書等等。Full Iconshock 方案還支援團隊多人使用,不需要每個人分別購買授權。
如果預算有限,可以參考 Remix Icon 或 Simple Icons 這類開源圖標庫,這些是完全免費且可商用的。Tabler Icons 也是一個不錯的選擇,提供了大量乾淨簡潔的開源圖標。
回顧一下 Iconshock 的幾個關鍵特色:超過 200 萬個圖標、800+ 個圖標集、45 種以上風格、漸變色即時調色盤、CSS 程式碼匯出,以及從免費到 $99 美元終身買斷的多元方案選擇。這些特色讓它在眾多圖標資源平台中有了自己的定位,特別是漸變色調色盤和終身買斷的計價模式,是市面上其他圖標平台比較少見的組合。
第一種適合的人是偶爾需要圖標的內容創作者。免費方案的 PNG 下載就能滿足大部分簡報和社群貼文的需求,只要記得附上來源標示就好。這類使用者不需要投入任何費用,就能取得品質不錯的圖標資源。第二種是專業 UI/UX 設計師。Full Iconshock 的終身方案提供了 200 萬個以上、45 種風格的圖標,涵蓋了幾乎所有設計場景,而且商用授權沒有人數限制。對於每天都需要各種風格圖標的設計師來說,$99 美元的終身費用分攤到每一天幾乎可以忽略不計。第三種是前端開發者。SVG 和 Icon Font 格式的支援,加上 CSS 漸變色程式碼的匯出功能,讓圖標整合進網頁專案的流程變得很順暢。
如果你的需求是以插圖或照片為主,而不是圖標,那 Iconshock 幫不上太多忙。這種情況可以參考 免費圖庫懶人包,裡面整理了 47 個涵蓋圖片、圖示、素材和背景的免費資源。如果你有品牌 Logo 設計的需求,DesignEvo 或 Brandbuilder 這類專門的 Logo 設計工具會更合適。需要插畫素材的話,Free Vector Illustrations 提供了大量免費的向量插圖可以下載。
如果只是想試試看 Iconshock 的圖標品質和風格,從免費方案開始就好。下載幾個 PNG 檔案,用在你的個人專案裡,感受一下圖標的設計水準。等到你確定這些圖標風格符合你的需求,而且有商業使用的必要時,再考慮升級付費方案。$99 美元終身買斷的 Full Iconshock 方案,對長期需要圖標的專業工作者來說,投報率相當高。如果你正在建構一個完整的設計資源工具箱,Iconshock 可以作為圖標類的主力工具,再搭配 FreeImages 處理照片素材,以及各種 免費高品質圖庫 補充不同類型的視覺資源。這樣一來,無論遇到什麼樣的設計需求,你都能快速找到合適的素材。