首页 > web前端 > js教程 > 正文

最佳免费开源图标库 4

Barbara Streisand
发布: 2024-10-14 13:28:30
原创
352 人浏览过

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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!