搜索
首页web前端js教程最佳免费开源图标库 4

2024 年には、最高の無料アイコン ライブラリを見つけることで、Web サイト、アプリ、デジタル プロジェクトの視覚的な魅力を大幅に向上させることができます。

開発者、デザイナー、ビジネスオーナーのいずれであっても、高品質のアイコンにより、あなたの作品は洗練され、プロフェッショナルで、ユーザーフレンドリーに見えます。しかし、無料のアイコン ライブラリがたくさんある中で、どれが最も価値のあるものなのかをどうやって知ることができるのでしょうか?

このガイドでは、2024 年の 最高の無料およびオープンソースのアイコン ライブラリ 21 個について詳しく説明します。SVG アイコン からフレームワーク固有のオプションまで、アイコンの数、サポートされている形式、統合などの主要な指標をカバーしており、プロジェクトに最適なライブラリを選択するのに役立ちます。

選択の重要な要素

 Best Free and Open-Source Icon Library for 4
適切な 無料アイコン ライブラリ を選択することは、いくつかの重要な要素によって決まります。

  • 利用可能な形式: ライブラリは、すべてのデバイスでスケーラビリティと鮮明な表示を実現する SVG アイコン を提供していますか? PNG、JSX、TSX またはその他の形式をサポートしていますか?
  • フレームワークとの統合: アイコン ライブラリは、React、Vue、Angular などのフレームワークと適切に統合されていますか?特定の技術スタックに取り組んでいる場合、これが重要です。
  • カスタマイズ: プロジェクトのブランドやスタイルに合わせてアイコンを簡単にカスタマイズできますか?
  • ライセンス: ライブラリは無料のオープンソースを提供していますか? それとも商用利用に制限がありますか?

これらの要素を考慮することで、プロジェクトに最適な無料のアイコン ライブラリを選択できます。


2024 年のベスト オープンソース アイコン ライブラリ

これは、2024 年の 21 のベスト無料アイコン ライブラリ のリストです。SVG アイコンからフレームワーク固有のオプションまで、アイコンの数 などの重要な指標を確認します。サポートされている形式と統合により、次のプロジェクトに最適なライブラリを選択できます。

1. ラインアイコン

 Best Free and Open-Source Icon Library for 4

リストの最初は Lineicons で、最近 バージョン 5 をリリースしました。この最新のアップデートでは、4,000 個を超える無料アイコンを含む 30,000 個のアイコンのモダンでクリーンなコレクションが提供され、2024 年に向けての優れた選択肢となります。ライブラリは、SVG、JSX、 TSX、Figma、PNG は、さまざまなプラットフォームと簡単に統合できることを意味します。 

デザイナーは Figma プラグイン を気に入っていただけ、開発者は React、Vue、Svelte フレームワークのサポートを高く評価するでしょう。

各アイコンはピクセル単位で完璧な精度でデザインされており、すべてのデバイスでシャープまたは丸みを帯びて表示されます。 Web サイト、アプリ、その他のデジタル プロジェクトを作成している場合でも、Lineicons は柔軟で使いやすいオプションです。

主要な指標:

  • 合計アイコン: 30,000 (無料アイコン 4,000 個)
  • 形式: SVG、JSX、TSX、Figma、HTML、PNG
  • 統合: React、Vue、Figma、Web
  • Github リポジトリ: lineicons

2. テーブル屋のアイコン

 Best Free and Open-Source Icon Library for 4

Tabler Icons は、機能的で見た目にも美しい 5,500 個を超えるオープンソース アイコン のコレクションを提供します。これらのアイコンは軽量で簡単にカスタマイズできるように設計されており、ミニマリストの UI デザインに完全に適合します。

このライブラリは、React、Vue、Svelte などの一般的なフレームワークに適しており、適応性が高くなります。さらに、SVG および PNG 形式により、さまざまなプラットフォームで高品質の解像度が保証されます。

主要な指標:

  • 合計アイコン: 5,500 個の無料アイコン
  • 形式: SVG および PNG
  • 統合: React、Vue、Svelte
  • GitHub リポジトリ: tabler-icons

3.素晴らしいフォント

 Best Free and Open-Source Icon Library for 4

Font Awesome は依然として最も人気のあるアイコン ライブラリの 1 つです。ですが、Lineicons は 2024 年の新たな猛獣です。10,000 個を超えるアイコンが提供され、豊富な 2,050 個の無料アイコンが含まれています 個人使用と商用使用の両方で利用できます。

它與 React、Vue 和 Angular 等框架無縫集成,非常適合 Web 和行動應用程式。您還可以輕鬆自訂圖標,確保它們完美適合任何設計。

關鍵指標:

  • 總圖示數:33,000 個圖示(2,000 個免費)
  • 格式:SVG、PNG、字體
  • 整合:React、Vue、Angular、Web
  • GitHub 儲存庫:字體很棒

4. 英雄圖標

 Best Free and Open-Source Icon Library for 4

Heroicons' 極簡主義圖示設計為您的專案帶來簡單和優雅。它由 Tailwind CSS 團隊創建,提供超過 316 個圖示 輪廓和純色樣式。

庫的 SVG 和 JSX 格式確保與 React 和 Vue 順利整合。 Heroicons 非常適合為現代 UI 尋找乾淨圖示的開發人員。您將享受它為使用 Tailwind 建置的專案帶來的一致性。

關鍵指標:

  • 總圖示數:316 個圖示
  • 格式:SVG、JSX
  • 整合:React、Vue
  • GitHub 儲存庫:英雄圖標

5. 離子圖標

 Best Free and Open-Source Icon Library for 4

Ionicons 最初是 Ionic Framework 專案的首選圖示集,但此後它的範圍不斷擴大。如今,它提供了超過 **1,300 個圖標**,適用於 Web、行動和桌面應用程式。

它支援SVG和WebFont格式。該程式庫與 React、Vue、 和其他基於 Web 的平台順利整合。此外,其廣泛的圖示包括從簡單形狀到複雜插圖的所有內容,使其成為開發人員的多功能選擇。

關鍵指標:

  • 總圖示數:1,300 個圖示
  • 格式:SVG、WebFont
  • 整合:React、Vue、Web
  • GitHub 儲存庫:離子圖標

6. 簡化圖標

 Best Free and Open-Source Icon Library for 4

簡化圖示擁有世界上最大的圖示集合之一,擁有超過30,000個圖示。它提供了多種風格的圖標,例如簡約、詳細、手繪等,為設計師和開發人員提供了無盡的選擇。 
它提供 SVG、PNG 和 WebFont 等格式,可以輕鬆整合到 Web 和行動專案中。此外,設計人員可以利用 Figma 整合來直接存取設計工具。

關鍵指標:

  • 總圖示數:30,000 個圖示
  • 格式:SVG、PNG、WebFont、Figma
  • 整合:網路、Figma
  • GitHub Repo:流線向量

7.八角星

 Best Free and Open-Source Icon Library for 4

由 GitHub 創建,Octicons 提供超過 200 個專為 Web 和行動應用程式設計的圖示。其 SVG 和 WebFont 格式確保圖標可擴展並易於整合到各種項目中。

乾淨、簡單設計使這些圖示成為想要功能性、不引人注目的視覺效果的開發人員的絕佳選擇。 

關鍵指標:

  • 總圖示數:200 個圖示
  • 格式:SVG、WebFont
  • 整合:網路
  • GitHub 儲存庫: Octicons

8.典型圖標

 Best Free and Open-Source Icon Library for 4

Typicons 提供了一系列 336 個圖示,設計輕巧且易於整合。這些圖示提供 SVG 和 WebFont 格式,確保不同螢幕尺寸上的可擴充性和高解析度。

它們非常適合在效能至關重要的簡約 Web 專案中使用。典型圖示以其清晰和簡單而聞名,這使得它們成為導航和功能圖示的理想選擇。

關鍵指標:

  • 總圖示數:300 個圖示
  • 格式:SVG、WebFont
  • 整合:網路
  • GitHub 儲存庫:typicons.font

9. 盒子圖標

 Best Free and Open-Source Icon Library for 4

Boxicons 是一個現代圖示庫,擁有超過 1,500 個圖示,提供簡約和大膽的設計組合。該程式庫支援 SVG 和 PNG 格式,使其適用於 Web 和應用程式開發人員。

此外,Boxicons 與 React 和其他前端技術順利集成,為現代 Web 應用程式提供易於使用的選項。

關鍵指標:

  • 總圖示數:1,500 個圖示
  • 格式:SVG、PNG
  • 整合:React、Web
  • GitHub 儲存庫:盒子圖標

10. 露西德

 Best Free and Open-Source Icon Library for 4

Lucide 是一個開源圖示庫,提供美觀且一致的1,500 個圖示。它提供了一組現代且可自訂的圖標,非常適合網路和行動應用程式。

Lucide 採用輕量化設計,保持了 Feather 的簡約風格,同時提供了更多的多樣性。這些圖示提供 SVG、JSX 和 React 格式,確保與 React 和 Vue 等流行框架無縫整合。

關鍵指標:

  • 總圖示數:1533 個圖示
  • 格式:SVG、JSX、React
  • 整合:React、Vue、Web
  • GitHub 儲存庫:lucide

11. 材料符號

 Best Free and Open-Source Icon Library for 4

Material Design Icons 由 Google 提供最全面的圖示庫之一,擁有超過 2,500 個圖示。這些圖標經過精心設計,以確保不同平台之間的清晰度和一致性。

此庫提供輪廓、填充、圓形和銳利等各種樣式,可滿足廣泛的設計需求。開發人員和設計師可以使用 SVG、Webfont、 或 Figma 和 Adob​​e XD 等設計工具輕鬆地將這些圖示整合到他們的專案中。

關鍵指標:

  • 總圖示數:2,500 個圖示
  • 格式:SVG、PNG、Webfont
  • 整合:React、Vue、Angular、Figma、Adobe XD
  • GitHub 儲存庫:材料設計圖標

12. UI圖標

 Best Free and Open-Source Icon Library for 4

UIcons 是一個時尚而現代的圖示庫,擁有超過 6,600 個精心製作的圖示。這些圖示的設計考慮到簡單性,使其非常適合乾淨、簡約使用者介面。

提供 SVG 和流行的設計工具,例如 Figma 和 Sketch,UIcons 為設計師提供了出色的靈活性。這些圖示有淺色和深色兩種模式,讓您可以選擇將它們與各種設計主題相匹配。

關鍵指標:

  • 總圖示數:6,600 個圖示
  • 格式:SVG、Figma、PNG
  • 整合:Figma、Adobe XD、Sketch、SVG
  • GitHub 儲存庫:UIcons

13. 雄偉雄偉

 Best Free and Open-Source Icon Library for 4

Majesticons 免費版本提供 760 設計精美的圖標,線條和實線 風格。該庫用途廣泛,可讓您在不損失品質的情況下縮放圖示。

無論您是為行動應用程式、網路專案或數位產品進行設計,Majesticons 都可以透過其SVG 格式 提供出色的靈活性,並整合到Figma 和Sketch等流行工具中。

主要な指標:

  • アイコンの合計: 760 個のアイコン (線と実線)
  • フォーマット: SVG、Web フォント、Figma
  • 統合: Figma、Sketch、Adobe XD、React
  • GitHub リポジトリ: majesticons

14. エヴァアイコン

 Best Free and Open-Source Icon Library for 4

Eva Icons は、最新の Web およびアプリのインターフェイス向けに特別に設計された 480 のスタイリッシュで機能的なアイコンを提供します。 SVG 形式と PNG 形式 の両方をサポートしており、アイコンがスケーラブルで高品質であることが保証されます。

このライブラリは React や他のフロントエンド フレームワークとうまく統合されており、開発者にとって使いやすいオプションになっています。 Eva Icons には、アウトラインと塗りつぶしの両方のバリエーションも用意されており、プロジェクトに最適なスタイルを柔軟に選択できます。

主要な指標:

  • アイコンの合計: 480 アイコン
  • 形式: SVG、PNG
  • 統合: React、Web
  • GitHub リポジトリ: eva-icons

15.SVGリポジトリ

 Best Free and Open-Source Icon Library for 4

SVGRepo は、500,000 個以上の無料 SVG アイコン を提供する最も有名なアイコン リポジトリの 1 つです。これは、ユーザーが SVG、PNG、EPS、PDF などの複数の形式でアイコンを検索、カスタマイズ、ダウンロードできる点で際立っています。

プラットフォームは適応性が高く、デザイナーや開発者はウェブサイト内で各アイコンのサイズ、色、ストローク幅を瞬時にカスタマイズできます。

主要な指標:

  • 総アイコン数: 500,000 アイコン
  • 形式: SVG、PNG、EPS、PDF
  • 統合: 直接ダウンロード、Figma、Sketch、Adobe XD、React で利用可能

16.リミックスアイコン

 Best Free and Open-Source Icon Library for 4

Remix Icon は、2,800 個を超えるアイコンが含まれるスタイリッシュな 無料アイコン ライブラリ です。アイコンはアウトライン スタイルと塗りつぶしスタイルの両方で使用できるため、プロジェクトのデザインに応じて柔軟に使用できます。

SVG および PNG 形式をサポートし、Web サイトやアプリケーションとのシームレスな統合を保証します。 Remix Icon は、モダンでクリーンな美学で知られており、UI/UX デザインに最適です。

主要な指標:

  • アイコンの総数: 2,892 アイコン
  • 形式: SVG、PNG
  • 統合: ウェブ
  • GitHub リポジトリ: RemixIcon
  1. アイコンハブ

 Best Free and Open-Source Icon Library for 4

IconHub は、3,200 のプレミアム品質の無料アイコンの豊富なコレクションを提供する成長中のプラットフォームです。 SVG 形式を提供しているため、拡張性とカスタマイズが容易です。これにより、開発者とデザイナーにとって同様に信じられないほど多用途になり、これらのアイコンをさまざまなタイプのデジタル プロジェクトにすばやく組み込むことができます。

主要な指標:

総アイコン数: 3,200 アイコン
形式: SVG
統合: Figma、Sketch、Adobe XD、React

18. イコノワール

 Best Free and Open-Source Icon Library for 4

Iconoir は、1,500 個を超えるアイコンを備えた、精巧に作られたオープンソースのアイコン ライブラリです。開発者とデザイナーの両方に幅広いオプションを提供します。これらのアイコンは SVG および JSX 形式で提供されるため、スケーラブルでプロジェクトに簡単に統合できます。

Iconoir は、React、React Native、Flutter、Vue などの複数のフレームワークをサポートしているため、クロスプラットフォーム アプリケーションに最適です。

主要な指標:

  • アイコンの総数: 1,500 アイコン
  • 形式: SVG、JSX
  • 統合: React、React Native、Vue、Flutter、Figma、Framer
  • GitHub リポジトリ: iconoir

19. 蛍光体アイコン

 Best Free and Open-Source Icon Library for 4

Phosphor Icons provides a rich collection of 9,000 icons that stand out for their flexibility. Every icon is available in multiple weights (thin, regular, bold), giving you the ability to tailor the icons based on the design requirements.

The library supports SVG, PNG, and JSX formats, and it integrates effortlessly with React, Vue, and Svelte. Phosphor Icons also shines with its dual-style availability (outline and filled) and pixel-perfect design, ensuring a polished appearance in any project.

Key Metrics:

  • Total Icons: 2,500 icons
  • Formats: SVG, PNG, JSX
  • Integrations: React, Vue, Svelte
  • GitHub Repo: phosphor-icons

20. Material Icons

 Best Free and Open-Source Icon Library for 4

Material Icons by Material UI is one of the most widely recognized icon libraries designed in line with Google's Material Design guidelines. Offering over 2,100 icons, this library provides a broad selection of icons in multiple styles, including filled, outlined, rounded, and sharp, making it perfect for any design need.

Available in SVG, PNG, and Webfont formats, these icons are versatile and scalable across various platforms. Offers easy integration with popular frameworks like React, Vue, and Angular.

Key Metrics:

  • Total Icons: 2,100 icons
  • Formats: SVG, PNG, Webfont
  • Integrations: React, Vue, Angular, Figma, Sketch, Adobe XD, Iconify
  • GitHub Repo: mui/material-ui

21. Bootstrap Icons

 Best Free and Open-Source Icon Library for 4

Bootstrap Icons is the official icon library of the Bootstrap framework, providing a versatile collection of over 2,000 icons. These icons are designed to work seamlessly with Bootstrap but can also be used in any web project.

Each icon is highly customizable and available in SVG, Webfont, PNG, PDF, and EPS formats, offering flexibility for developers and designers.

Key Metrics:

  • Total Icons: 2,000 icons
  • Formats: SVG, Webfont, PNG, PDF, EPS
  • Integrations: React, Vue, Figma, and more
  • GitHub Repo: twbs/icons

22. Feather Icons

 Best Free and Open-Source Icon Library for 4

Feather Icons is renowned for its clean, minimalistic design, boasting a collection of over 280 icons. Each icon is designed with simplicity and elegance in mind, making it an excellent choice for modern interfaces that prioritize a lightweight aesthetic.

The icons are available in various formats, including SVG, PNG, WebP, JSX, and Vue, allowing developers to integrate them into a wide range of projects seamlessly.

Key Metrics:

  • Total Icons: 287 icons
  • Formats: SVG
  • Integrations: React, Vue, & More
  • GitHub Repo: feathericons/feather

23. Iconsax

 Best Free and Open-Source Icon Library for 4

Iconsax is a dynamic icon library boasting over 1,000 unique icons. Each icon is meticulously designed to provide a sleek and modern aesthetic, ensuring that your projects stand out.

This library supports multiple formats, including SVG, Figma, XD, and PNG, allowing for seamless integration into various design workflows. Iconsax is compatible with popular frameworks such as** React, Vue, and Flutter,** making it an excellent choice for developers looking to enhance their applications.

关键指标:

  • 图标总数:1,000 个图标
  • 格式:SVG、Figma、PNG、XD
  • 集成:React、Vue、Flutter、Figma
  • GitHub 存储库:iconsax

适合开发人员和设计师的最佳免费图标库

对于希望利用 SVG 图标的可扩展性的开发人员和设计人员来说,Lineicons V5 是 2024 年最佳 SVG 图标库之一。

在列出的库中,Lineicons 因其大量的收藏、灵活性和易用性而成为最有前途的。它拥有超过 30,000 个免费和高级图标,涵盖 60 个类别10 种风格,它同时满足开发人员和设计师的需求。

无论您是在寻找简单的线条图标、粗体双色图标还是高度详细的选项,Lineicons 都能满足您的需求。

主要特点:

  • React、VueSvelte 等流行框架无缝集成。
  • 提供多种格式,包括SVG、PNG、JSX、TSX、HTML、WEBP
  • 可通过Figma轻松访问,带有设计工具插件。 持续更新的库,确保您始终掌握设计趋势。

Lineicons 是一个首选图标库,它提供多功能性和精确性,使其成为任何项目的理想选择,无论您是设计仪表板、创建登陆页面还是构建移动应用程序。

结论

图标是现代 UI/UX 设计不可或缺的一部分,访问免费、高质量和开源图标库可以显着增强您的项目。 

无论您是寻找与框架无缝集成的轻量级图标的开发人员,还是寻求可定制、可扩展图标的设计师,此列表都适合每个人。 

探索这些21 个图标库并在 2024 年将您的设计提升到新的水平!

以上是最佳免费开源图标库 4的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

自定义Google搜索API设置教程自定义Google搜索API设置教程Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

示例颜色json文件示例颜色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

10个jQuery语法荧光笔10个jQuery语法荧光笔Mar 02, 2025 am 12:32 AM

增强您的代码演示:开发人员的10个语法荧光笔 在您的网站或博客上共享代码片段是开发人员的常见实践。 选择合适的语法荧光笔可以显着提高可读性和视觉吸引力。 t

8令人惊叹的jQuery页面布局插件8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

10 JavaScript和JQuery MVC教程10 JavaScript和JQuery MVC教程Mar 02, 2025 am 01:16 AM

本文介绍了关于JavaScript和JQuery模型视图控制器(MVC)框架的10多个教程的精选选择,非常适合在新的一年中提高您的网络开发技能。 这些教程涵盖了来自Foundatio的一系列主题

什么是这个'在JavaScript?什么是这个'在JavaScript?Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),