• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
TechMoon 科技月球

TechMoon 科技月球

免費工具、WordPress、虛擬主機、 科技前端

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
    • SiteGround 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / 免費資源 / Heroicons.dev – 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!
Heroicons.dev - 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!

Heroicons.dev – 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!

Last Updated on 2020-07-15 By Sliven Leave a Comment

Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
2 分鐘閱讀

Heroicons.dev 是一個免費開源圖示的網站,裡面目前已經新增了 176+ 個以上的圖示,裡面的圖示都採用 MIT-license,因此可以放心的用於任何的專案當中,也可以作為商業用途使用。

Heroicons.dev 是由 Steve Schoger、Adam Wathan 與 Zaydek 製作而成,裡面的所有圖示都是由 Steve Schoger 與 Adam Wathan 製作而成,每一種圖示都提供了兩種樣式,分別為外框與填滿,你可以藉由搜尋框旁邊的「+」號來進行圖標樣式的切換。

如果有興趣可以前往 GitHub 的專案,裡面會提供作者與該專案的更詳細的細節。

網站名稱:Heroicons — Free, open source icons
網站網址:https://heroicons.dev/

目錄
  1. 1. Heroicons 簡介教學
    1. 1.1. 搜尋圖標
    2. 1.2. 一鍵複製圖示
    3. 1.3. 貼上 SVG 程式碼顯示圖示
  2. 2. 你可能有興趣
  3. 3. 更多相關文章

Heroicons 簡介教學

步驟一

搜尋圖標

進入頁面之後,可以透過搜尋框直接搜尋圖標,或是滑鼠滾輪下拉進行尋找:

進入頁面後可透過搜尋框搜尋圖標,或是下拉進行尋找
進入頁面後可透過搜尋框搜尋圖標,或是下拉進行尋找
步驟二

一鍵複製圖示

所有的圖標都是採用 HTML 格式提供複製與貼上。挑選好你想要的圖示後,只需要點選一下圖示即可複製該圖示的 SVG 程式碼:

點選一下圖示即可複製圖示的 SVG 程式碼
點選一下圖示即可複製圖示的 SVG 程式碼
步驟三

貼上 SVG 程式碼顯示圖示

與其他免費圖示網站不同之處在於,Heroicons 僅提供 SVG 的 HTML 程式碼,因此只能複製後直接貼至 HTML 格式當中,即可顯示,複製後的程式碼格式如下:

HTML

只需要將這個 HTML 格式的語法貼至專案中,即可顯示該圖示。

如果你還想尋找其他免費圖標網站,你可以參考:

  • Ionicons – 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發
  • iconmonstr – 4496+ 可商用 CC0 大量圖標 Icons 免費下載,另提供 Iconic Font 字體線上使用
  • Simple Icons – 大量知名品牌圖標 Icons,CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
  • Remix Icon – 免費開源圖標庫,多達 2 千以上的線性圖標免版權可商用下載
  • Iconshock – 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用
Heroicons.dev - 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!

Heroicons 推薦評價優點

  • 免費開源且免版權
  • 一鍵複製圖標 SVG 格式
  • 提供兩種圖標樣式

你可能有興趣

  • Radix Icons – 15×15 開源圖標 Icons 免費下載,支援 Sketch、Figma 與 SVG 檔案格式
  • Animated icons by Icons8 – 900+ 免費線上動畫圖標,提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
  • Heroicons – 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons
  • Tabler Icons – 超過 558+ 高品質圖標 SVG 格式免費下載,MIT 授權可線上客製化圖示樣式
  • Octicons – GitHub 官方開源 Icons 免費圖示下載,支援 Ruby, Rails, Jekyll 適合開發者使用
  • IconPark – 字節跳動官方出品超過 1287+ 高品質圖標免費下載,可線上客製化圖示外觀樣式
  • LineIcons – 超過 2000+ 個線形圖標庫,專為設計師與開發人員設計的圖標 Icons 免費下載
  • Emblemicons – 免費開源圖標 Icons,高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
  • Iconstore – 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
  • Iconhub – 免費自定義線上圖標 Icons,提供 6 種不同樣式與上千種 Icons 可做商業用途使用
  • Unicons Solid – 3300+ icons 免費線上圖標庫,多達 27 種類別與 3 種樣式免費開源下載
  • CSS.GG – 700+ 開源免版權圖標免費下載,支援 Figma 格式檔案,並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載

更多相關文章

  • Animated icons by Icons8 - 900+ 免費線上動畫圖標,提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
  • Blobs - 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
  • Radix Icons - 15x15 開源圖標 Icons 免費下載,支援 Sketch、Figma 與 SVG 檔案格式
  • Iconshock - 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用
  • 2021 最新 35 個推薦可商用免版權線上免費圖片,各種風景素材背景圖片、影片素材免費圖庫懶人包!
  • Iconpie - 快速免費產生網站圖標 Icons,上傳圖片後自動產生 Web、iOS、Android 圖標
  • Free Online File Converter - 免費線上圖片格式快速轉換工具,一鍵轉換 SVG、PNG、JPG 與 PDF 檔案格式
  • UI Design Daily - 每日免費提供一個前端 UI 設計資源,CC0 免費開源還可轉售!
  • Iconstore - 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
  • Simple Icons - 大量知名品牌圖標 Icons,CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
  • Iconhub - 免費自定義線上圖標 Icons,提供 6 種不同樣式與上千種 Icons 可做商業用途使用
  • Ionicons - 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發

如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!

所屬分類: 免費資源 標籤: Heroicons.dev, 免費圖標, 免費圖標下載, 免費圖示, 免費圖示下載, 免費資源, 圖標下載

關於 Sliven

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

讀者互動

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
  • Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
  • 【WordPress 付費主題免費下載】Bethlehem – Church WordPress Theme
  • 【WordPress 付費主題免費下載】Anada – Data Science & Analytics Saas WordPress Theme
  • 【WordPress 付費主題免費下載】Yoome – Modern WooCommerce WordPress Theme
  • 【WordPress 付費主題免費下載】Cindy – Accessible Local Government WordPress Theme
  • Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
  • Blobs – 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
  • BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
  • CSS Gradient – 線上產生線性漸變背景,提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • Free Online File Converter - 免費線上圖片格式快速轉換工具,一鍵轉換 SVG、PNG、JPG 與 PDF 檔案格式
  • iLoveIMG - 免費影像文檔線上編輯工具大全,從壓縮圖片到添加浮水印,應有盡有!
  • Iconhub - 免費自定義線上圖標 Icons,提供 6 種不同樣式與上千種 Icons 可做商業用途使用
  • Emblemicons - 免費開源圖標 Icons,高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
  • CSS Background Patterns - 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製
  • Iconshock - 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用
  • PxHere - 大量免費圖片與照片線上圖庫,提供 CC0 可商用高清素材,並提供 iOS、Android 尺寸可供下載
  • 2021 最新 35 個推薦可商用免版權線上免費圖片,各種風景素材背景圖片、影片素材免費圖庫懶人包!
  • SVG Favicon Maker - 線上製作網站 LOGO 圖標工具,可添加文字與 Emoji 並下載 SVG 與 PNG 檔案
  • UI Design Daily - 每日免費提供一個前端 UI 設計資源,CC0 免費開源還可轉售!

相關文章

  • Radix Icons – 15×15 開源圖標 Icons 免費下載,支援 Sketch、Figma 與 SVG 檔案格式
  • Slidesgo – 大量 PowerPoint 模板、Google Slides 主題免費下載,且有詳細教學文章可供學習
  • 【WordPress 付費主題免費下載】Canteen – Restaurant WordPress Theme
  • Simple Icons – 大量知名品牌圖標 Icons,CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
  • FindIcons – 全球最大圖示 Icon 搜尋引擎,可商用 Icon 圖示免費下載
  • Education.com – 超過三萬個免費線上資源,讓小孩在玩樂中也能輕鬆學習!
  • YoutubeDLD – 一鍵免費下載 Youtube 影片,在網址加上 DLD 即可 Download
  • 3D Book Image CSS Generator – 免費線上建立 3D 書本展示效果,可設定圖片與連結並產生 CSS 與 HTML 程式碼
  • Removal.ai – 免費線上圖片去背工具,使用 AI 技術自動識別並移除背景圖樣,精準連毛髮都能完美剔除
  • Joplin – 替代 Evernote、Notion 的開源代辦筆記本程式
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明