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

TechMoon 科技月球

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

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • 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 TechMoon Leave a Comment

Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
SiteGround 主機 3 折優惠 + WordPress 一鍵安裝完整教學
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. Heroicons 簡介教學
1.1. 搜尋圖標
1.2. 一鍵複製圖示
1.3. 貼上 SVG 程式碼顯示圖示
2. 你可能有興趣
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 格式下載

更多相關文章

  • Iconshock - 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用
  • iLoveIMG - 免費影像文檔線上編輯工具大全,從壓縮圖片到添加浮水印,應有盡有!
  • UI Design Daily - 每日免費提供一個前端 UI 設計資源,CC0 免費開源還可轉售!
  • CSS Background Patterns - 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製
  • Simple Icons - 大量知名品牌圖標 Icons,CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
  • iconmonstr - 4496+ 可商用 CC0 大量圖標 Icons 免費下載,另提供 Iconic Font 字體線上使用
  • Uncommon Illustrations by Artify - 免費下載 190 個向量插圖 PNG 格式,可供個人用途使用
  • 網站速度測試分析與優化指南
  • 2021 最新 34 個推薦可商用免版權線上免費圖片,各種風景素材背景圖片、影片素材免費圖庫懶人包!
  • Ionicons - 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發
  • Heroicons - 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons
  • FastComet 虛擬主機評價(2021 年 1 月)- 70% 折價優惠每月僅需 $2.95 美元,一鍵安裝 WordPress 網站教學

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

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

讀者互動

發佈留言 取消回覆

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

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • 【WordPress 付費主題免費下載】Regn | Multi-Purpose WordPress Theme
  • PureVPN – 超好用的 VPN 翻牆工具,超過 180 個國家伺服器,可跨區觀看 Netflix 各國影集
  • 【WordPress 付費主題免費下載】Bufet – Multi Concept Software & App Landing WordPress Theme + RTL
  • 【WordPress 付費主題免費下載】Danni — Minimalist WordPress Blog Theme
  • Free Deca UI Kit – 簡潔 UI Kit 素材免費下載,提供 Figma 與 Sketch 設計軟體格式
  • OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據
  • (2021 年 1 月)A2 Hosting 評價 – 每月 $2.99 美元折扣優惠,WordPress 一鍵安裝虛擬主機推薦高達 66% OFF
  • 如何解決 WordPress 中「目前正在執行另一項更新程序」導致無法升級/更新的問題
  • 【WordPress 付費主題免費下載】Kallem – Creative Portfolio WordPress Theme
  • 【WordPress 付費主題免費下載】GlobeCo – Transportation & Logistics WordPress Theme
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • Feather Icons- 超過 200+ 個系統常用圖示免費下載,不僅開源還可線上調整圖示大小粗細與顏色!
  • SVG Favicon Maker - 線上製作網站 LOGO 圖標工具,可添加文字與 Emoji 並下載 SVG 與 PNG 檔案
  • Octicons - GitHub 官方開源 Icons 免費圖示下載,支援 Ruby, Rails, Jekyll 適合開發者使用
  • Unicons Solid - 3300+ icons 免費線上圖標庫,多達 27 種類別與 3 種樣式免費開源下載
  • 2021 最新 34 個推薦可商用免版權線上免費圖片,各種風景素材背景圖片、影片素材免費圖庫懶人包!
  • GrayGrids - 多達 100+ 個免費 Bootstrap 高級主題與 HTML 範本任你下載,免版權可做商業用途使用
  • CSS.GG - 700+ 開源免版權圖標免費下載,支援 Figma 格式檔案,並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載
  • iLoveIMG - 免費影像文檔線上編輯工具大全,從壓縮圖片到添加浮水印,應有盡有!
  • SVG Repo - 免費 SVG 圖標與向量圖示免費下載,高達 300,000+ 的免版權可商用圖標集任你下載
  • Practice.dev - 免費線上學習前後端程式語言,邊做邊學適合初學者的開源線上學習平台

相關文章

  • SocialBook Photo Cartoonizer – 一鍵快速將圖片自動轉成卡通風格,完全免費並提供 5MB 檔案上傳限制
  • 【WordPress 付費主題免費下載】Bufet – Multi Concept Software & App Landing WordPress Theme + RTL
  • 全新 Microsoft Office APP – 整合 Word、Excel、PowerPoint 於一身免費使用
  • Humans by Wannathis – 人類 3D 角色素材包高達 80 種角色模型,提供 Fima 與 PNG 圖片格式免費下載
  • Testmysite.io – 免費線上檢測網站速度,幫助你改善網站加載速度,提升網站排名
  • Emblemicons – 免費開源圖標 Icons,高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
  • (2021 年 1 月)Udemy 免費課程優惠碼 – 付費課程限時折扣 0 元免費線上學習
  • CleanPNG – 超過百萬張去背素材線上圖庫,提供熱門去背素材免註冊即可下載高解析度免費圖庫
  • Octicons – GitHub 官方開源 Icons 免費圖示下載,支援 Ruby, Rails, Jekyll 適合開發者使用
  • Logo Instant – 可商用免費 Logo 素材下載,包含原始 AI 檔修改原圖
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
SiteGround 主機 3 折優惠 + WordPress 一鍵安裝完整教學
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明