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

TechMoon 科技月球

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

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / 免費資源 / Heroicons – 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons
Heroicons - 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons

Heroicons – 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons

Last Updated on 2020-08-31 By Sliven Leave a Comment

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

Heroicons 是由 Tailwind CSS 的製作商所免費提供的線上 SVG 圖標素材資源,在網站當中提供了兩種不同的尺寸與樣式,並且所有 Icons 都已經經過預先優化,同時能讓使用者直接複製並貼至 HTML 中顯示。

網站當中所有的圖標 Icons 都是採用「MIT Licensed」授權方式,這是許多開源軟體當中最廣泛被使用的授權方式之一。簡單來說,被授權人有權利使用、複製、修改、合併、出版發行、散布、再授權或販售軟體及軟體的副本,及授予被供應人同等權利。

這意味著你可以任意使用 Heroicons 當中所提供的所有圖標 Icons,也能將其運用在商業用途之中,且不須署名或是附上來源,你甚至能修改後再授權甚至販賣都沒有問題。

如果你還想尋找其他可商用 Icons 圖標,可以參考:Unicons Solid、CSS.GG、Tabler Icons、SVG Repo、Heroicons.dev、Ionicons…等等相關免費素材,點擊了解更多詳細內容介紹。

網站名稱:Heroicons
網站網址:https://heroicons.com/

目錄
  1. 1. Heroicons 簡介教學
    1. 1.1. 你可能有興趣
    2. 1.2. 更多相關文章

Heroicons 簡介教學

Step 1

進入網站後,透過 Search 搜尋框尋找圖標 Icons,目前網站已經提供了 226 個免費商用 Icons,未來還會陸續新增:

透過搜尋框尋找圖標 Icons
透過搜尋框尋找圖標 Icons
Step 2

找到你想要的圖標 Icons 之後,將滑鼠移入圖標上方,此時就會顯示「Copy SVG」與「Copy JSX」,點選複製選擇任何一種格式都能直接貼至 HTML 當中直接顯示圖標 Icons:

每個圖標都提供 SVG 與 JSX 格式可直接複製
每個圖標都提供 SVG 與 JSX 格式可直接複製

複製的程式碼就會長得像以下格式:

HTML

直接貼上 HTML 後就可以直接顯示 SVG 圖標,並可透過設置 Class 來自定義圖標的顏色與大小,非常方便。

如果你還想尋找其他與免費可商用 Icons 的免費資源,可以參考:

  • iconmonstr – 4496+ 可商用 CC0 大量圖標 Icons 免費下載,另提供 Iconic Font 字體線上使用
  • Simple Icons – 大量知名品牌圖標 Icons,CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
  • Remix Icon – 免費開源圖標庫,多達 2 千以上的線性圖標免版權可商用下載
  • Iconshock – 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用
  • Icons8 – 大量圖標免費下載、嵌入 HTML,更提供免費圖片、向量插圖、音樂下載使用
Heroicons - 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons

Heroicons 評價推薦心得

  • 免費可商用 Icons 線上提供
  • 提供 SVG 與 JSX 格式顯示圖標
  • 提供兩種不同尺寸樣式圖標

你可能有興趣

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

更多相關文章

  • SVGOMG - 可複製貼上 SVG HTML 程式碼,壓縮優化 SVG 檔案大小與下載 SVG 檔案
  • CSS.GG - 700+ 開源免版權圖標免費下載,支援 Figma 格式檔案,並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載
  • Iconstore - 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
  • Ionicons - 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發
  • SVG Repo - 免費 SVG 圖標與向量圖示免費下載,高達 300,000+ 的免版權可商用圖標集任你下載
  • CSS Background Patterns - 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製
  • Icons8 - 大量圖標免費下載、嵌入 HTML,更提供免費圖片、向量插圖、音樂下載使用
  • Iconshock - 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用
  • 14 個最佳 WordPress Cache Plugins 緩存快取外掛推薦 - 2020 免費/付費通通有
  • Heroicons.dev - 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!
  • Feather Icons- 超過 200+ 個系統常用圖示免費下載,不僅開源還可線上調整圖示大小粗細與顏色!
  • SVG Favicon Maker - 線上製作網站 LOGO 圖標工具,可添加文字與 Emoji 並下載 SVG 與 PNG 檔案

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

所屬分類: 免費資源 標籤: Heroicons, Icons, 免費 Icons, 免費圖標, 免費圖標下載, 免費圖示, 免費圖示下載, 免費素材, 免費資源, 可商用 Icons, 可商用素材, 圖標, 圖標下載, 圖示

關於 Sliven

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

讀者互動

發佈留言 取消回覆

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

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • 【WordPress 付費主題免費下載】Solaz – An Elegant Hotel & Lodge WordPress Theme
  • 【WordPress 付費主題免費下載】AppArt – Creative WordPress Theme For Apps Saas
  • Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
  • Humanotion – 免費 192 個 Avatar 頭像與 6 種不同背景,採 CC0 許可授權可商用大頭貼圖像
  • G Suite 教育版更名為 Google Workspace for Education,並取消無限制儲存空間限制至 100 TB
  • Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
  • Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
  • Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
  • Logaster – 免費 Logo 線上產生器,一秒建立網站 Logo 與 Favicon 打造獨特品牌 Logo 圖示
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • SVGOMG - 可複製貼上 SVG HTML 程式碼,壓縮優化 SVG 檔案大小與下載 SVG 檔案
  • Iconstore - 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
  • CSS.GG - 700+ 開源免版權圖標免費下載,支援 Figma 格式檔案,並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載
  • Unicons Solid - 3300+ icons 免費線上圖標庫,多達 27 種類別與 3 種樣式免費開源下載
  • Iconpie - 快速免費產生網站圖標 Icons,上傳圖片後自動產生 Web、iOS、Android 圖標
  • Heroicons.dev - 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!
  • Iconshock - 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用
  • Ionicons - 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發
  • Animated icons by Icons8 - 900+ 免費線上動畫圖標,提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
  • CSS box-shadow examples by CSS Scan - 免費提供 82 種 Box-shadow CSS 陰影樣式,隨點擊複製使用 CSS 程式碼

相關文章

  • Remix Icon – 免費開源圖標庫,多達 2 千以上的線性圖標免版權可商用下載
  • Cloudflare Speed Test – 免費測試你的網路速度,精確的測出你的網路頻寬
  • PFPMaker – 免費專業人物大頭貼照片產生器,透過 AI 自動去除背景與美化,可客製化外框樣式與顏色
  • Skitterphoto – CC0 可商用免版權線上圖庫,除免費下載圖片外,還提供全球攝影師上傳圖片作品
  • Image Colorizer – 免費線上圖片色彩優化工具,透過 AI 將黑白圖片進行著色與細節優化
  • urlnet – 線上免費縮短網址工具,不追蹤不含 Cookie 且只會產生一組對應的短網址
  • BgEraser – 免費線上去除背景圖片,使用機器學習與 AI 技術,自動過濾圖片背景
  • AI Image Enhancer – 免費線上增強圖片畫質與色彩,使用 AI 技術媲美 Photoshop 的圖片強化功能
  • Mixkit – CC0 可商用免費影片、音樂素材下載
  • AI Image Denoiser – 透過 AI 技術線上自動處理圖片降噪,免費提升模糊圖片的畫質並增強整張照片
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明