Maison > interface Web > js tutoriel > le corps du texte

Meilleure bibliothèque d'icônes gratuite et open source pour 4

Barbara Streisand
Libérer: 2024-10-14 13:28:30
original
441 Les gens l'ont consulté

En 2024, trouver la meilleure bibliothèque d'icônes gratuite peut améliorer considérablement l'attrait visuel de vos sites Web, applications ou projets numériques.

Que vous soyez développeur, concepteur ou propriétaire d'entreprise, les icônes de haute qualité donnent à votre travail un aspect soigné, professionnel et convivial. Mais avec autant de bibliothèques d'icônes gratuites, comment savoir lesquelles offrent le plus de valeur ?

Dans ce guide, nous plongerons dans 21 des meilleures bibliothèques d'icônes gratuites et open source pour 2024. Des icônes SVG aux options spécifiques au framework, nous allons couvrez des indicateurs clés tels que le nombre d'icônes, les formats pris en charge et les intégrations pour vous aider à choisir la bibliothèque parfaite pour votre projet.

Facteurs clés pour choisir

 Best Free and Open-Source Icon Library for 4
Le choix de la bonne bibliothèque d'icônes gratuite dépend de quelques facteurs importants :

  • Formats disponibles : la bibliothèque propose-t-elle des icônes SVG pour une évolutivité et un affichage net sur tous les appareils ? Est-il compatible avec PNG, JSX, TSX ou d'autres formats ?
  • Intégration avec les frameworks : la bibliothèque d'icônes s'intègre-t-elle bien avec des frameworks comme React, Vue ou Angular ? Si vous travaillez sur une pile technologique spécifique, c'est la clé.
  • Personnalisation : Les icônes peuvent-elles être facilement personnalisées pour correspondre à la marque ou au style de votre projet ?
  • Licence : La bibliothèque propose-t-elle des logiciels gratuits et open source, ou y a-t-il des limites à l'utilisation commerciale ?

En tenant compte de ces facteurs, vous pouvez choisir la meilleure bibliothèque d'icônes gratuite qui convient parfaitement à votre projet.


Meilleures bibliothèques d'icônes Open Source en 2024

Voici la liste des 21 meilleures bibliothèques d'icônes gratuites pour 2024. Des icônes SVG aux options spécifiques au framework, nous vérifierons les mesures critiques telles que le nombre d'icônes, formats pris en charge et intégrations pour vous aider à choisir la bibliothèque parfaite pour le prochain projet.

1. Icônes de ligne

 Best Free and Open-Source Icon Library for 4

Le premier sur notre liste est Lineicons, qui a récemment publié sa version 5. Cette dernière mise à jour offre une collection moderne et épurée de 30 000 icônes avec plus de 4 000 icônes gratuites, ce qui en fait un excellent choix pour 2024. La bibliothèque prend en charge un large éventail de formats, tels que SVG, JSX, TSX, Figma et PNG,, ce qui signifie que vous pouvez facilement l'intégrer à diverses plateformes. 

Les concepteurs l'adoreront pour son plugin Figma, et les développeurs apprécieront sa prise en charge des frameworks React, Vue & Svelte.

Chaque icône est conçue avec une précision au pixel près, garantissant qu'elle soit nette ou arrondie sur tous les appareils. Que vous créiez un site Web, une application ou tout autre projet numérique, Lineicons est une option flexible et conviviale.

Indicateurs clés :

  • Total d'icônes : 30 000 (4 000 icônes gratuites) 
  • Formats : SVG, JSX, TSX, Figma, HTML, PNG
  • Intégrations : React, Vue, Figma, Web
  • Github Repo : icônes de ligne

2. Icônes du tableau

 Best Free and Open-Source Icon Library for 4

Tabler Icons propose une collection de plus de 5 500 icônes open source à la fois fonctionnelles et esthétiques. Ces icônes sont conçues pour être légères et facilement personnalisables, s’intégrant parfaitement aux conceptions d’interface utilisateur minimalistes.

La bibliothèque est adaptée aux frameworks populaires tels que React, Vue et Svelte, ce qui la rend hautement adaptable. De plus, les formats SVG et PNG garantissent une résolution de haute qualité sur différentes plateformes.

Indicateurs clés :

  • Total d'icônes : 5 500 icônes gratuites
  • Formats : SVG et PNG
  • Intégrations : React, Vue, Svelte
  • GitHub Repo : icônes de table

3. Police géniale

 Best Free and Open-Source Icon Library for 4

Font Awesome reste l'une des bibliothèques d'icônes les plus populaires, mais Lineicons est une nouvelle bête en 2024. Elle propose plus de 10 000 icônes, avec un généreux 2 050 icônes gratuites disponible pour un usage personnel et commercial.

React, Vue, Angular 등의 프레임워크와 원활하게 통합되어 웹 및 모바일 앱에 적합합니다. 어떤 디자인에도 완벽하게 어울리도록 아이콘을 쉽게 사용자 정의할 수도 있습니다.

주요 지표:

  • 총 아이콘: 33,000개 아이콘(2,000개 무료)
  • 형식: SVG, PNG, 글꼴
  • 통합: React, Vue, Angular, 웹
  • GitHub 저장소: 글꼴이 훌륭함

4. 영웅 아이콘

 Best Free and Open-Source Icon Library for 4

히어로아이콘'의 미니멀한 아이콘 디자인은 프로젝트에 단순함과 우아함을 선사합니다. 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

IoniconsIonic Framework 프로젝트의 기본 아이콘으로 시작되었지만 이후 그 범위가 확대되었습니다. 현재 웹, 모바일 및 데스크톱 애플리케이션에 적합한 **1,300개 이상의 아이콘 **을 제공합니다.

SVG 및 WebFont 형식을 지원합니다. 라이브러리는 React, Vue 및 기타 웹 기반 플랫폼과 원활하게 통합됩니다. 또한 다양한 아이콘에는 단순한 모양부터 복잡한 일러스트레이션까지 모든 것이 포함되어 있어 개발자가 다양한 선택을 할 수 있습니다.

주요 지표:

  • 총 아이콘: 1,300개
  • 형식: SVG, WebFont
  • 통합: React, Vue, 웹
  • GitHub 저장소: ionicons

6. 합리화 아이콘

 Best Free and Open-Source Icon Library for 4

Streamline Icons30,000개 이상의 아이콘을 보유한 세계 최대 규모의 아이콘 컬렉션 중 하나를 자랑합니다. 미니멀, 디테일, 손으로 그린 ​​등 다양한 스타일의 아이콘을 제공하여 디자이너와 개발자에게 무한한 옵션을 제공합니다. 
SVG, PNG, WebFont와 같은 형식으로 제공되며 웹 및 모바일 프로젝트에 쉽게 통합됩니다. 또한 디자이너는 Figma 통합을 활용하여 디자인 도구에 직접 액세스할 수 있습니다.

주요 지표:

  • 총 아이콘: 30,000개
  • 형식: SVG, PNG, WebFont, Figma
  • 통합: 웹, Figma
  • GitHub 저장소: 합리화-벡터

7. 옥티콘

 Best Free and Open-Source Icon Library for 4

GitHub에서 만든 Octicons는 웹 및 모바일 애플리케이션용으로 특별히 설계된 200개 이상의 아이콘을 제공합니다. SVG 및 WebFont 형식을 사용하면 아이콘의 확장성과 다양한 프로젝트에 쉽게 통합할 수 있습니다.

깔끔하고 직선적인 디자인 덕분에 이 아이콘은 기능적이고 눈에 거슬리지 않는 시각적 요소를 원하는 개발자에게 탁월한 선택이 됩니다. 

주요 지표:

  • 총 아이콘: 200개
  • 형식: SVG, WebFont
  • 통합: 웹
  • GitHub 저장소: 옥티콘

8. 타이피콘

 Best Free and Open-Source Icon Library for 4

Typicons는 가볍고 통합하기 쉽도록 설계된 336개의 아이콘 컬렉션을 제공합니다. 아이콘은 SVG 및 WebFont 형식으로 모두 제공되므로 다양한 화면 크기에서 확장성과 고해상도를 보장합니다.

성능이 중요한 미니멀리스트 웹 프로젝트에 사용하기에 적합합니다. Typicons는 명확성과 단순함으로 잘 알려져 있어 탐색 및 기능 아이콘에 이상적입니다.

주요 지표:

  • 총 아이콘: 300개
  • 형식: SVG, WebFont
  • 통합: 웹
  • GitHub 저장소: typicons.font

9. 박스아이콘

 Best Free and Open-Source Icon Library for 4

Boxicons1,500개 이상의 아이콘을 갖춘 현대적인 아이콘 라이브러리로, 미니멀하고 대담한 디자인이 혼합되어 있습니다. 이 라이브러리는 SVG와 PNG 형식을 모두 지원하므로 웹 및 앱 개발자가 다용도로 사용할 수 있습니다.

또한 Boxicons는 React 및 기타 프런트 엔드 기술과 원활하게 통합되어 최신 웹 애플리케이션에 사용하기 쉬운 옵션을 제공합니다.

주요 지표:

  • 총 아이콘: 1,500개
  • 형식: SVG, PNG
  • 통합: React, 웹
  • GitHub 저장소: boxicons

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, 웹
  • GitHub 저장소: 루시드

11. 재료 기호

 Best Free and Open-Source Icon Library for 4

Google의

머티리얼 디자인 아이콘2,500개 이상의 아이콘을 자랑하는 가장 포괄적인 아이콘 라이브러리 중 하나를 제공합니다. 이러한 아이콘은 다양한 플랫폼에서 명확성과 일관성을 보장하기 위해 제작되었습니다.

윤곽선, 채우기, 원형, 샤프 등 다양한 스타일로 제공되는 이 라이브러리는 다양한 디자인 요구 사항을 충족합니다. 개발자와 디자이너는 SVG, 웹폰트 또는 Figma 및 Adobe XD와 같은 디자인 도구를 사용하여 이러한 아이콘을 프로젝트에 쉽게 통합할 수 있습니다.

주요 지표:

  • 총 아이콘: 2,500개
  • 형식: SVG, PNG, 웹 글꼴
  • 통합: React, Vue, Angular, Figma, Adobe XD
  • GitHub 저장소: 소재 디자인 아이콘

12. UI 아이콘

 Best Free and Open-Source Icon Library for 4

UIcons6,600개 개 이상의 잘 만들어진 아이콘이 포함된 세련되고 현대적인 아이콘 라이브러리입니다. 이러한 아이콘은 단순함을 염두에 두고 디자인되어 깨끗하고 미니멀한 사용자 인터페이스에 완벽하게 들어맞습니다.

SVGFigma 및 Sketch와 같은 널리 사용되는 디자인 도구로 제공되는 UIcons는 디자이너에게 탁월한 유연성을 제공합니다. 아이콘은 밝은 모드와 어두운 모드 모두에서 사용할 수 있으므로 다양한 디자인 테마에 어울리는 옵션을 제공합니다.

주요 지표:

  • 총 아이콘: 6,600개
  • 형식: SVG, Figma, PNG
  • 통합: Figma, Adobe XD, Sketch, SVG
  • GitHub 저장소: UIcon

13. 마제스티콘

 Best Free and Open-Source Icon Library for 4

Majesticons 무료 버전은 선 스타일과 단색 스타일로 아름답게 디자인된 760개의 아이콘을 제공합니다. 이 라이브러리는 매우 다재다능하여 품질 저하 없이 아이콘 크기를 조정할 수 있습니다.

모바일 앱, 웹 프로젝트, 디지털 제품 등 무엇을 디자인하든 Majesticons는 SVG 형식을 통해 탁월한 유연성을 제공하고 Figma 및 Sketch와 같은 인기 도구와의 통합을 제공합니다.

關鍵指標:

  • 總圖示數:760 個圖示(線條和實線)
  • 格式:SVG、網頁字體、Figma
  • 整合:Figma、Sketch、Adobe XD、React
  • GitHub 儲存庫:majesticons

14. 伊娃圖標

 Best Free and Open-Source Icon Library for 4

Eva Icons 提供 480 專為現代 Web 和應用程式介面設計的時尚實用圖示。它支援SVG 和PNG 格式,確保圖示可擴展且高品質。

該程式庫與 React 和其他前端框架很好地集成,使其成為開發人員友好的選擇。 Eva Icons 還提供輪廓和填充變體,讓您可以靈活地為您的項目選擇最佳樣式。

關鍵指標:

  • 總圖示數:480 個圖示
  • 格式:SVG、PNG
  • 整合:React、Web
  • GitHub 儲存庫:eva-icons

15.SVGRepo

 Best Free and Open-Source Icon Library for 4

SVGRepo 是最著名的圖示儲存庫之一,提供超過 500,000 個免費 SVG 圖示。它之所以脫穎而出,是因為它允許用戶搜尋、自訂和下載多種格式的圖標,例如 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格式,確保與網站和應用程式無縫整合。 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는 유연성이 뛰어난 9,000개의 아이콘으로 구성된 풍부한 컬렉션을 제공합니다. 모든 아이콘은 다양한 두께(얇게, 보통, 굵은)로 제공되므로 디자인 요구 사항에 따라 아이콘을 맞춤 설정할 수 있습니다.

라이브러리는 SVG, PNG 및 JSX 형식을 지원하며 React, Vue 및 Svelte와 쉽게 통합됩니다. Phosphor Icons는 또한 이중 스타일 가용성(윤곽선 및 채우기)과 픽셀 완벽한 디자인으로 빛을 발하여 모든 프로젝트에서 세련된 모양을 보장합니다.

주요 지표:

  • 총 아이콘: 2,500개
  • 형식: SVG, PNG, JSX
  • 통합: React, Vue, Svelte
  • GitHub 저장소: 인광 아이콘

20. 머티리얼 아이콘

 Best Free and Open-Source Icon Library for 4

Material UI의

Material Icons는 Google의 Material Design 지침에 따라 설계된 가장 널리 알려진 아이콘 라이브러리 중 하나입니다. 2,100개 이상의 아이콘을 제공하는 이 라이브러리는 채움, 윤곽선, 둥근 모양, 선명한 등 다양한 스타일의 다양한 아이콘을 제공하므로 어떤 디자인 요구 사항에도 완벽하게 들어맞습니다.

SVG, PNG, 웹폰트 형식으로 제공되는 이 아이콘은 다양한 플랫폼에서 활용도가 높고 확장 가능합니다. React, Vue, Angular 등 널리 사용되는 프레임워크와 쉽게 통합됩니다.

주요 지표:

  • 총 아이콘: 2,100개
  • 형식: SVG, PNG, 웹 글꼴
  • 통합: React, Vue, Angular, Figma, Sketch, Adobe XD, Iconify
  • GitHub 저장소: mui/material-ui

21. 부트스트랩 아이콘

 Best Free and Open-Source Icon Library for 4

Bootstrap 아이콘은 Bootstrap 프레임워크의 공식 아이콘 라이브러리로, 2,000개가 넘는 아이콘의 다양한 컬렉션을 제공합니다. 이러한 아이콘은 Bootstrap과 원활하게 작동하도록 설계되었지만 모든 웹 프로젝트에서도 사용할 수 있습니다.

각 아이콘은 사용자 정의가 가능하며 SVG, 웹 글꼴, PNG, PDF 및 EPS 형식으로 제공되므로 개발자와 디자이너에게 유연성을 제공합니다.

주요 지표:

  • 총 아이콘: 2,000개
  • 형식: SVG, 웹 글꼴, PNG, PDF, EPS
  • 통합: React, Vue, Figma 등
  • GitHub 저장소: twbs/icons

22. 깃털 아이콘

 Best Free and Open-Source Icon Library for 4

페더 아이콘은 깔끔하고 미니멀한 디자인으로 유명하며 280개 이상의 아이콘을 보유하고 있습니다. 각 아이콘은 단순함과 우아함을 염두에 두고 디자인되었으므로 가벼운 미학을 우선시하는 현대적인 인터페이스에 탁월한 선택입니다.

아이콘은 SVG, PNG, WebP, JSX, Vue 등 다양한 형식으로 제공되므로 개발자가 다양한 프로젝트에 원활하게 통합할 수 있습니다.

주요 지표:

  • 총 아이콘: 287개
  • 형식: SVG
  • 통합: React, Vue 등
  • GitHub 저장소: 깃털 아이콘/깃털

23. 아이콘색스

 Best Free and Open-Source Icon Library for 4

Iconsax1,000개 이상의 독특한 아이콘을 자랑하는 역동적인 아이콘 라이브러리입니다. 각 아이콘은 매끄럽고 현대적인 미학을 제공하도록 세심하게 디자인되어 프로젝트를 돋보이게 합니다.

이 라이브러리는 SVG, Figma, XD, PNG를 포함한 다양한 형식을 지원하므로 다양한 디자인 워크플로우에 원활하게 통합할 수 있습니다. Iconsax는 ** React, Vue, Flutter **와 같은 널리 사용되는 프레임워크와 호환되므로 애플리케이션을 향상시키려는 개발자에게 탁월한 선택입니다.

Key Metrics:

  • Total Icons: 1,000 icons
  • Formats: SVG, Figma, PNG, XD
  • Integrations: React, Vue, Flutter, Figma
  • GitHub Repo: iconsax

Best Free Icon Libraries for Developers & Designers

For developers & designers looking to leverage the scalability of SVG icons, Lineicons V5 is one of the best SVG icon libraries for 2024.

Among the libraries listed, Lineicons is the most promising due to its immense collection, flexibility, and ease of use. With over 30,000 free and premium icons covering 60 categories and 10 styles, it caters to both developers and designers.

Whether you're looking for simple line icons, bold duo-tone icons, or highly detailed options, Lineicons has it all.

Key Features:

  • Seamless integration with popular frameworks like React, Vue, and Svelte.
  • Available in multiple formats, including SVG, PNG, JSX, TSX, HTML, and WEBP.
  • Easily accessible via Figma, with plugins for design tools. Continuously updated library, ensuring you stay on top of design trends.

Lineicons is a go-to icon library that delivers both versatility and precision, making it ideal for any project, whether you're designing a dashboard, creating a landing page, or building a mobile app.

Conclusion

Icons are an integral part of modern UI/UX design, and having access to free, high-quality, and open-source icon libraries can significantly enhance your project. 

Whether you're a developer looking for lightweight icons that integrate seamlessly with frameworks or a designer seeking customizable, scalable icons, this list has something for everyone. 

Explore these 21 icon libraries and take your designs to the next level in 2024!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal