前端 & 設計師常用圖標資源庫

来源:https://www.cnblogs.com/Mr-lil/archive/2023/06/07/17462458.html
-Advertisement-
Play Games

# 1. Iconfont * 阿裡傾力打造的矢量圖標管理、交流平臺，設計師將圖標上傳到 iconfont 平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便於前端工程師自由調整與調用。 * 地址：Iconfont ![](https://img2023.cnblogs.com ...


1. Iconfont

  • 阿裡傾力打造的矢量圖標管理、交流平臺，設計師將圖標上傳到 iconfont 平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便於前端工程師自由調整與調用。
  • 地址：Iconfont

2. Font Awesome

  • 互聯網上最流行的圖標工具包已經重新設計，從頭開始構建。除此之外，還有圖標字體連字、SVG 框架、React 等流行前端庫的官方 NPM 包，以及訪問新 CDN 的功能。
  • 地址：Font Awesome

3. Unicons

  • 開源矢量圖標和圖標字體庫
  • 地址：Unicons

4. IconPark

  • 一個通過技術驅動矢量圖標樣式的開源圖標庫，可以實現根據單一SVG源文件變換出多種主題， 具備豐富的分類、更輕量的代碼和更靈活的使用場景；致力於構建高質量、統一化、可定義的圖標資源，讓大多數設計師都能夠選擇適合自己的風格圖標，並支持把圖標源文件導出為React、Vue2、Vue3、SVG多種形式的組件代碼，讓開發者使用更高效
  • 地址：IconPark

5. Feather

  • 是簡單漂亮的開源圖標的集合。每個圖標均以 24x24 網格設計，強調簡單性，一致性和靈活性
  • 地址：Feather

6. Google Material Deisgn Icons

7. Tabler Icons

  • 提供一套超過1250個免費 MIT 許可的高質量 SVG 圖標供您在您的 Web 項目中使用
  • 地址：Tabler Icons

8. Heroicons

  • 一組免費的 MIT 許可的高質量 SVG 圖標，用於 UI 開發
  • 地址：Heroicons

9. My Icon

  • 一套免費圖標，用來更換 iOS 14 的圖標。一共有幾千個圖標可供選擇，還允許自定義和編輯
  • 地址：My Icon

10. Captain Icon

  • 提供 350+ 超贊免費矢量圖標，增強您的移動和網頁設計能力
  • 地址：Captain Icon

11. CSS Icon

  • SVG Sprite，樣式組件，NPM 和 API 中提供了開源 CSS，SVG 和 Figma UI 圖標
  • 地址：CSS Icon

12. Ionicons

  • 一個完全開源的圖標集，有1300個為 Web、iOS、Android 和桌面應用程式特製的圖標。Ionicons 是為 Ionic 框架而構建的，所以圖標既有材質設計，也有 iOS 版本
  • 地址：Ionicons

13. Ikonate

  • 是完全可定製的和可訪問的，經過優化的矢量圖標
  • 地址：Ikonate

14.Eva Icons

  • 包含480多種製作精美的開源圖標，用於常見操作和項目
  • 地址：Eva Icons

15. Icon Ninja

  • 支持近 100 萬免費圖標素材的搜索引擎，支持關鍵詞搜索，所有的素材均提供詳細的如格式、寬度、高度、文件大小等信息，適合前端工程師或 PPT 設計師使用。素材格式是 PNG、SVG
  • 地址：Icon Ninja

16. The Noun Project

  • 網站免費提供超過580個高度可辨識的符號圖標，這種圖標只用很簡單的圖像及黑白兩色來強調表現事物的特征，因此很容易讓人辨識出它的主題
  • 地址：The Noun Project

17. Icons8

  • 提供了一系列免費的圖標、插圖等資源
  • 地址：Icons8

18. Animated Icons

  • 是 Icons8 提供的免費動態圖標服務，支持的格式有基於 Lottie 的 JSON、傳統 GIF 動畫，以及 After Effects 格式，可以方便的插入到視頻中
  • 地址：Animated Icons

19. Flaticon

  • 一個提供四百多萬海量免費圖標素材庫，提供 PNG、SVG、EPS、PSD 和 BASE 64 矢量圖標格式，完全可以滿足你 UI 設計和網頁設計項目
  • 地址：Flaticon

20. Iconfinder

  • 近500萬的圖標資料庫免費圖標搜索引擎，提供 PNG，SVG 等格式
  • 地址：Iconfinder

21. ICONSVG

  • 一個為簡化查找和生成項目通用圖標過程的工具，前端設計師尤其需要
  • 地址：ICONSVG

22. Evericons

  • 為下一個項目收集460多個精心製作的圖標，可免費使用及商用
  • 地址：Evericons

22. Icons

  • 用於 Bootstrap 的官方開源 SVG 圖標庫
  • 地址：Icons

24. Swifticons

  • 是一個非凡的圖標庫。提供 2680個高級圖標，24個類別，6種樣式
  • 地址：Swifticons

25. IconBeast

  • 是矢量圖標和符號的集合。圖標不僅針對 iOS 應用開發進行了優化，而且還可以將其用於 Android 設備或任何其他類型的 Web 開發項目
  • 地址：IconBeast

26. Invision App

  • 免費的高質量 UI 套件，圖標包和模型庫
  • 地址：Invision App

27. Zondicons

  • 一組免費的高級SVG圖標，供您在數字產品上使用
  • 地址：Zondicons

28. Maki Icons

  • 是專為地圖設計師設計的圖標集。Maki 包括公園，博物館和禮拜場所等常見景點的圖標。每個圖標都可用作 SVG，有兩種尺寸：11px * 11px和15px * 15px
  • 地址：Maki Icons

29. styled-icons

  • 受歡迎的圖標包，例如 Font Awesome，Material Design 和 Octicons，可作為 React 樣式的組件使用
  • 地址：styled-icons

30. Free fonts

  • 提供一系列的字體圖標素材，包括 TTF，SVG，EOT，WOFF，OTF等格式，目前接800多萬
  • 地址：Free fonts

31. Streamline Icons

  • 涵蓋 53 個分類，720 個子分類，擁有超過 30,000 個高質量圖標，幾乎滿足你的所有設計需求
  • 地址：Streamline Icons

32. Iconmonstr

  • 是一個以簡單線條為主的的免費圖標庫，收錄超過 4000 種圖標；由單一創作者維護，而且還在不斷更新中，這在很大程度上保證了圖標的質量；提供 SVG、EPS、PSD、PNG 和內嵌原始碼等各種格式下載，滿足了設計師和開發者的各種需求場景；
  • 地址：Iconmonstr

33. Simple Icons

  • 超過1500個免費 SVG 圖標的熱門品牌。這是由 Dan Leech 在 Gihub 發起的一個開源小項目
  • 地址：Simple Icons

34. Flat Icon Design

  • 此網站為日本的 icon 網站，站內全部使用日文，沒有語言切換，但是支持英文檢索。Icon 風格為彩色扁平風，下載時可以改變圖案大小，顏色及背景，支持 AI，EPS，JPEG，PNG，SVG格式的下載
  • 地址：Flat Icon Design

35. Icon Hover Effects


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • VUE路由傳參的實用方式
    本文講解了VUE項目中路由之間的傳值方式，涉及到的方法都是開發時常用的，希望對大家有多幫助。 1. 方式一：使用router-link標簽 1.1 params 傳參 首先定義好路由 const routes = [ { path : ‘/home’ , component : () => impo ...
  • 記錄--純CSS實現一個簡單又不失優雅的步驟條
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 步驟條是一種用於引導用戶按照特定流程完成任務的導航條，在各種分步表單交互場景中廣泛應用。先來看一下幾個主流前端 UI 框架中步驟條組件的樣子： ElementPlus AntDesign OpenTiny iView 我們可以發現，步驟條 ...
  • Webpack 插件實現 CSS 樣式尺寸單位轉換
    # Webpack 插件實現 CSS 樣式尺寸單位轉換 ## 實現方式一 ### 插件代碼 以下是編寫的一個 Webpack 插件，用於將樣式文件中以 rpx 為單位的值轉換為以 px 為單位的值（換算比率為 1px=2rpx）： ```javascript const pluginName = " ...
  • 【前端方案】-表格排序列LRU緩存方案
    目標： 排序後的表格列，頁面刷新或者用戶重新登錄後，能夠保持之前的操作排序 完成效果： ![](https://img2023.cnblogs.com/blog/1619281/202306/1619281-20230607121749845-1578551886.gif) 解決方案： 利用loca ...
  • js 函數聲明和函數表達式的執行結果
    // var 定義的變數會進行變數提升，聲明被拿到函數或全局作用域的頂端，並輸出 undefined // 函數聲明也會進行提升，var 的變數提升會覆蓋函數聲明提升 console.log(" 0 ") var fn = function () { console.log("fn0-1") } f ...
  • 「AntV」X6開發實踐：踩過的坑與解決方案
    長期更新版文檔請移步語雀([「AntV」X6開發實踐：踩過的坑與解決方案 (yuque.com)](https://www.yuque.com/sxd_panda/antv/x6)) ## 🖼️ | 如何自定義拖拽源？ > 相信你們在開發中更多的需求是需要自定義拖拽源，畢竟自定義的功能擴展性高一些 ...
  • JS基礎語法(一)
    在 Vue2.0中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM元素進行底層操作，這時候就會用到自定義指令。你可以將一些 css樣式抽象到指令中，也可以將一些 js 操作放到指令中去執行。就使用上來說，指令不用像組件一樣需要引入和註冊，註冊後使用非常簡潔方便。對於在項目... ...
  • Vue3從入門到精通(一)
    Vue3簡介 Vue3是Vue.js的最新版本，於2020年9月18日正式發佈。Vue3相比Vue2有很多改進和優化，包括但不限於： 更快的渲染速度：Vue3通過使用Proxy代理對象和優化虛擬DOM演算法等方式，提高了渲染性能。 更小的體積：Vue3的體積比Vue2更小，打包後的文件更小，載入速度更 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類