ホームページ > ウェブフロントエンド > jsチュートリアル > 収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

青灯夜游
リリース: 2021-02-26 10:27:28
転載
12783 人が閲覧しました

この記事では、Web サイトを美しく読みやすくするための 20 個の ICON アイコン ライブラリ (収集する価値があります) を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

#アプリケーション インターフェイスにアイコンが存在すると、ユーザーに良い第一印象を与えます。これは非常に重要です。しかし、アイコンを一から開発するには多大な時間と費用がかかります。 Web サイトでアイコンを使用すると、訪問者と効果的にコミュニケーションをとることができます。アイコンを使用すると、可読性が向上し、重要なコンテンツが強調され、機能が強化され、デザインが強化されます。したがって、既製のアイコンを使用することは良い選択です。

最高のアイコン ライブラリのリスト

Alibaba の iconfont についてはここでは紹介しません。国内の開発者は基本的にそれを知っており、彼ら全員が今、海外で利用できる便利なアイコンライブラリをいくつか見てみましょう。

1. Flaticon

ウェブサイト: https://www.flaticon.com/packs
形式タイプ: PNG、SVG、EPS、PSD、BASE 64、マーケットプレイス
価格とライセンス: 月額 $9.99 からの限定無料プランとプレミアム プラン

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

Flaticon 個人プロジェクトと商用プロジェクトの両方に使用できる、完全に編集可能なベクターが含まれています。 FlatIcon には、2 億 3,000 万個を超えるベクトル アイコンが 51202 パッケージにグループ化されています

この製品には、## に

Photoshop# アイコンを簡単にインポートできる Adob​​e 拡張機能が備わっています。 、Illustrator および After Effects。静的ファイルの代わりに Web フォントを使用してアイコンを表示したい場合は、FlatIcon が形式変換を処理し、使用可能な Web フォントを生成します。ダウンロードしたアイコンをカスタマイズすることもできます。

ハイライト

:

    90,000
  • を超えるアイコン;SVG、EPS、PSD、PNG形式;
  • アイコン フォント;
  • CC スイート用の Adob​​e 拡張機能;
  • プレミアム オプション付きのリンクシェア ライセンス;
  • そして毎月新しいアイコン パックが追加されます;

2. Jam アイコン Web サイト:

https://jam-icons.com/

フォーマットとタイプ: SVG、CSS価格とライセンス: 無料、MIT

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリJam アイコンはセット

896

手作りのアイコンです。このアイコン パックには、SVG とフォントのバージョンがあります。これらのアイコンは、Web、印刷、またはアプリケーション開発プロジェクトで SVG ファイルとして使用できます。これらのアイコンは、特定の CSS スタイルシートのフォントとしても使用できます。サイズは 16px24px32p#xx の 3 つがあります。塗りつぶされたアイコンまたはストロークされたアイコンを選択することもできます。

3. Fontisto アイコン パック

Web サイト: https://fontisto.com/

フォーマットとタイプ: CSS 価格とライセンス: ree、MIT

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ## Fontisto はベクター アイコン パックです。アイコンは、サイズ、色、影など、CSS でできることはすべて即座にカスタマイズできます。この製品はJavaScriptを必要としません。

Fontisto

アイコンはベクターであるため、高解像度のモニターで美しく表示されます。 この Web サイトでは、製品の起動方法とカスタマイズ方法に関する完全なドキュメントとさまざまなガイドを見つけることができます。製品の使用を開始するには、Web サイトにリンクを貼り付けるだけです。さらに、npm、yarn、bower などの適切なパッケージ マネージャーで Fontisto を使用することもできます。

4. Iconmonstr

Web サイト: https://iconmonstr.com/形式とタイプ: SVG、EPS、PSD、PNG、マーケットプレイス価格とライセンス: 無料



Iconmonstr のアイコン コレクション内にあります 収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ4400 複数のアイコンがあります。各アイコン セットには、さまざまなデザイン アプリケーションで使用できるように、グラフィックのアウトライン バージョンと塗りつぶしバージョンの両方が用意されています。サイト上のすべてのアイコンは無料で提供されており、アイコンファイルはSVG、AI、PSD、PNGなどの形式で提供されており、無料および商用目的で使用できます。

Iconmonstr 強力な検索機能により、アイコンの検索が簡単になります。将来使用するために、お気に入りのアイコンを個人のお気に入りに保存することもできます。

ハイライト:

  • すべてのアイコンの無料使用
  • 4 つの形式でのダウンロード オプションに加え、Web での使用に最適化された縮小アイコン

5. Pixsellz マテリアル アイコン ライブラリ

## ウェブサイト:

https://icons.pixsellz.io/フォーマットとタイプ: SVG、EPS、PSD、PNG、FIG、マテリアル デザイン
価格とライセンス: 無料、Apache ライセンス バージョン 2.0

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

##多数の

1000 複数のアイコンが 16 の異なるカテゴリに分かれています。無料のアイコン パックはマテリアル デザインからインスピレーションを得ており、円、アウトライン、ツートーンの 3 つの異なるビジュアル スタイルで表示されます。このキットには、コードを入力してください6 つの異なるファイル形式が含まれているため、お好みのデザイン ソフトウェアのアイコンを使用できます。

ハイライト:

    3 スタイル
  • Figma スタイル
  • 1000+ アイコン
  • 24 倍24 ピクセル
  • スケッチ スタイル
  • 16 カテゴリ、6 つのファイル形式

6、Entypo

Web サイト:

http://www.entypo.com/形式とタイプ: SVG
価格とライセンス: 無料、Creative Common License 4.0

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

Entypo は、スウェーデンの Daniel Bruce によって数年前に注意深く作成された svg アイコン シリーズ製品です。これらのアイコンは素晴らしいものです。景品に関しては最も重要です。この製品は、##411 アイコンを含む SVG として、クリエイティブ コモンズ ライセンスに基づいて無料で入手できます。

7. Evil IconsWeb サイト:

https://evil-icons.io/

形式タイプ: SVG、Sketch 価格とライセンス: 無料、MIT

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ#このライブラリは巨大で、SVG と生のソース ファイルの両方がすべて含まれています。これは、

SVG

のほか、Illustrator ファイル、および Sketch.sketch ファイルもダウンロードできることを意味します。

8. ストリームライン アイコンWeb サイト:

https://streamlineicons.com/

形式とタイプ: ICONJAR、SKETCH、FIG、XD、SVG、AI、PDF、PNG価格とライセンス: 無料から $411

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ# #Streamline Icons

は、強力な互換性を備えた無料のアイコン インベントリです。ライブラリは「53」カテゴリに分類されており、

30000 の複数のベクトル アイコンが付属しています。 これは、Sketch 用に最適化された数少ないアイコン パックの 1 つで、ストロークの幅と色を簡単に操作できます。シンボルや共有スタイルなどの組み込みの Sketch 機能を使用すると、アイコンなどの要素をすばやく簡単に再利用できます。

同社は、ブラウザから直接アイコンを参照、検索、ダウンロードできる独自の Web アプリケーションを持っています。

#ハイライト:

30000

を超えるベクター アイコン
  • アウトラインの太さを変更するスマート ストロークSketch、AI、EPS、PDF、PNG、SVG 形式をサポート
  • Streamline 3.0 のすべてのアイコンには、ライト、通常、ボールドの 3 つの独自のウェイトがあります
  • 9、Smashicons

ウェブサイト: https://smashicons.com/

形式とタイプ: JAR、SVG、AI、SKETCH、マーケットプレイス

価格とライセンス: 無料から $149

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリSmashicons には # を超えるライブラリが含まれています ##219000 の包括的なアイコン コレクション

アイコン。

Smashicons の仕組みは他の製品とは少し異なります。価格は月額 5 ドルの月額プランに基づいています。これは、月額わずか 5 ドルで、既存のアイコンのコレクション全体と、今後リリースされるアイコンにアクセスできることを意味します。 ハイライト:

    #非常に大規模なアイコンのコレクション
  • #すべてのアイコンが複数のプラットフォームと互換性があります
  • #使いやすい Web アプリで必要なアイコンを検索できます
  • サブスクリプションベースのビジネス モデル
  • マルチプラットフォーム サポート
10、アイコン 8

Web サイト: https://icons8.com/

形式とタイプ: SVG、PNG、PDF 価格とライセンス: Good Boy ライセンス、無料から $19.90

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリIcons8

に設定されたアイコンには、複数のカテゴリをカバーする

120000 を超えるアイコンが付属しています。企業やオフィスの設定から、人物、食べ物、ソーシャルメディアのアイコンまで。これらのアイコンは、特定のオペレーティング システムの外観を模倣するように設計されています。 Windows、iOS、Android バージョンでダウンロードできます。 ハイライト:

SVG、PNG、HTML 形式

    線形アイコン、実線アイコン、完全なアイコンなど、さまざまなスタイルのアイコンを提供します。アイコン カラフル
  • すべてのアイコンは .zip ファイル経由でダウンロード可能
  • ダウンロード前に編集可能
  • 無料および有料のサブスクリプション オプション
  • ##11、Icomoon

ウェブサイト: https://icomoon.io/

形式とタイプ: SVG、PNG、PDF

価格とライセンス: 無料 ~ $139.90

Icomoon1収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ は、画像とアイコンを管理するための完全なツールです。この製品は、アイコンを編集および管理するための高品質のソリューションを備えています。 Icomoon アイコンは

16X16

グリッド上で手作りされており、SVG、EPS、PSD、PDFAI 形式で利用できます。アイコン セットも作成者によって常に更新されます。 各アイコン パックには詳細なライセンスが付属しているため、デザイナーや開発者はアイコンの使用方法を正確に把握できます。ユーザーは独自のアイコンのフォントをカスタマイズすることもできます。

ハイライト:

包括的なアイコン管理ツール

無料および有料のダウンロード オプション
  • 複数のダウンロード形式
  • #12. Glyphish アイコン パック

Web サイト: http://www.glyphish.com/フォーマットとタイプ: SVG、PNG、PDF、PSD、グリフ、アイコン フォント

価格とライセンス: クリエイティブ共通帰属、$25 ~ $99



Glyphish1収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ は、さまざまなアイコン ライブラリを提供します。各ライブラリは、PNG

SVGPSDAI など、さまざまな形式で提供されます。基本アイコンは 25 ドルで入手できますが、最終的なアイコン パックの通常価格は 99 ドルです。無料デモには 50 アイコンが含まれています。デザイナーはすべてのアイコンを簡単に編集できます。 ハイライト:

複数のプラットフォーム用のアイコン: iOS、Android、Web、ウィンドウ50 個の無料アイコンのセット

    Xcode への簡単なドラッグ アンド ドロップ
  • Apple Retina ディスプレイ用アイコン
  • 13、Ionicons

Web サイト: https://ionicons.com/形式とタイプ: SVG および Web フォント、アイコン フォント

価格とライセンス: MIT



Ionic チームは、Ionicons1収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ という Web フォントの形式でアイコンをリリースすることにしました。当然のことながら、これらは完全に無料で、GitHub で入手できます。 SVG および Web フォントもサポートしているスタイルシートの CDN

バージョンを使用して、これらのアイコンをサイトに直接追加することもできます。

ハイライト: 完全無料

リンクをコピーして貼り付けるだけで簡単にセットアップできます Web として表示されますフォント

    カスタム サイズ
  • 1100 アイテム以上
  • 14、Angular マテリアル アイコン
URL:

https://material.io/resources...フォーマットとタイプ: SVG、Webfont、マテリアル デザイン価格とライセンス: 無料、Apache License 2.0


マテリアル アイコンは、Googleが提供する無料のアイコン ライブラリです。読みやすさと明瞭さを確保するために、これらのアイコンは、すべてのプラットフォームやディスプレイで見栄えがするように最適化されています。これらのアイコンは完全に無料で、GitHub からアクセスできます。このアイコン ライブラリは大規模で、1,000 を超えるアイコンが幅広いインターフェイス機能をカバーしています。

15. Linearicons

Web サイト: https://linearicons.com/
形式とタイプ: SVG、Web フォント、アイコン フォント
価格とライセンス: 無料から $59、共通クリエイティブ ライセンス

1収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

#Linearicons は、次の 1 つです。個人または商用目的で最も人気のある最高のアイコン パック。 Linearicon は無料バージョンとプレミアム バージョンの両方で利用でき、この素晴らしいアイコン パックの無料バージョンはクリエイティブ コモンズの下でライセンスされています。 「デスクトップ パッケージ」など、ニーズに応じて他のパッケージを選択することもできます。

ハイライト:

  • CloudFront CDN
  • 無料バージョンを提供
  • さまざまな形式: SVG、PDF、Webfont。

16. Feathericons

ウェブサイト: https://feathericons.com/
形式種類: SVG、Webfont、Iconfont
価格とライセンス: 無料、MIT ライセンス

1収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

##Feather が最も優れています。人気のオープンソースアイコンセットの一部。これらは、24X24 グリッド上にデザインされたオープン ソース アイコンです。これらのアイコンは SVG 形式で提供されます。 MIT ライセンスに基づいてライセンスされており、オープン ソースには約 250 のアイコンがあります。

アイコンは編集が簡単で、サイズに関係なく鮮明に表示されます。最初はアイコン フォントとしてデザインされたため、Web フォントとして埋め込まれます。

17. Iconfinder

Web サイトのアドレス

https://www.iconfinder.com/形式とタイプ: SVG、PNG、ICO、マーケットプレイス
価格とライセンス: 月額 $9 ~ $49

1収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

##Iconfinder

は 1 つですインターネット上で最も人気のあるアイコン リソース。 4 億 百万を超えるアイコンが提供され、アイコンの形式、価格、サイズ、背景などを含むさまざまな検索オプションがユーザーに提供されます。 $9 から $49 まで、複数の月々のお支払いプランもご利用いただけます。 「従量課金制」システムもお選びいただけます。 アイコン ファイルは、

SVG、PNG、ICO、ICNS

、および Adobe Illustrator 形式で利用でき、サイズの範囲は 16×16 から # までです。 ##512 ×512。気に入ったものが見つからない場合、または当社のブランド専用にデザインされたカスタム アイコンが必要な場合は、サイトの最高のデザイナーと協力することもできます。 ハイライト:

無料および有料の使用オプション

    柔軟な検索機能
  • 複数の形式で利用可能なアイコン
  • 多くのカテゴリとスタイル
  • Mark Editor
18. The Noun プロジェクト

URL: https://thenounproject.com/

形式とタイプ: SVG、PNG、マーケットプレイス価格とライセンス: クリエイティブ コモンズ ライセンス

1収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリNoun Project

は、Web 上で最大のアイコン ライブラリの 1 つを提供します。サイトのアイコンのほとんどは、

SVG および PNG 形式のほか、白黒スタイルでも利用できます。 Web サイトのライブラリは、独立したデザイナーによってデザインされたさまざまなアイコン ファイルで構成されています。ここでは、クリエイターとクリエイティブの専門家が協力して自分のデザインを販売したり、プレミアム アイコンの一見無限にあるライブラリを見つけたりすることができます。

この大規模で包括的なアイコン ライブラリの検索は簡単です。このアイコン ライブラリのその他の主な機能には、無料およびプレミアム ダウンロード オプション、多数の大きなアイコン セット、Mac 用アプリなどが含まれます。アイコン ライブラリは定期的に更新され、新しいアイコンとセットが毎日リリースされます。

ハイライト:

150,000 を超える
    アイコン
  • SVG、PNG形式
  • 検索と発見ツール
  • 無料および有料のダウンロード オプション
  • 新しいアイコンがほぼ毎日アップロードされます
19、Fontwesome Icons

#

Web サイト: https://fontawesome.com/icons
形式とタイプ: SVG、PNG、アイコン フォント、マーケットプレイス
価格とライセンス: SIL OFL 1.1

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

Font Awesome は、最も広く使用されており、人気のあるアイコン フォントです。これは、起動時に Teams に設定されるデフォルトのアイコンでもあります。 SVG アイコンや他の形式でも利用できます。このライセンスは商用または個人での使用に無料です。

すべてのアイコンは完全にスケーラブルであり、CSS で直接管理できます。純粋な CSS3 を使用して、色、影、背景のグラデーション、その他ほとんどすべてを変更できます。このライブラリを使用するもう 1 つの理由は、完全に最適化されており、JavaScript をまったく必要としないため、互換性の問題がないことです。

ハイライト:

  • ベクター フォント
  • 各アイコンには CSS クラスと Unicode が付属しています
  • 無料
  • アクセシビリティを念頭に置いて構築されています
  • サイト間で簡単にアップグレードできます
  • アイコン ライブラリ全体が利用可能なデスクトップ チート シート

# #20、Lineicons

ウェブサイト:

https://lineicons.com/形式とタイプ: SVG、Web フォント、アイコン フォントエース
価格とライセンス: 無料

収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリ

LineIcons また、明確なドキュメントを備えた無料の CDN も提供しているため、簡単に始めることができます。

このアイコン パックは完全に無料で、

450 の複数行のアイコンが付属しています。さまざまなカテゴリのプロジェクトに必要な基本的なアイコンをすべて網羅しています。 LineIcons また、簡単に開始できるように、無料の CDN と明確なドキュメントも提供します。これには、プロジェクトのニーズに応じて使用できる WebFonts ファイルと SVG ファイルという 2 つの異なるスケーラブルなパッケージが付属しています。

ハイライト:

    450 個の無料アイコン
  • SVG ファイル
  • 無料 CDN

概要

アイコン ライブラリを選択するときは、アイコン ライブラリの人気に基づいて選択するのではなく、どのアイコン ライブラリが現在の開発に適しているかに基づいて選択する必要があります。プロジェクトとどのアイコン ライブラリのスタイルは、アプリケーションのスタイルにより一致しています。

この記事が、ニーズに最適なソリューションの選択に役立つことを願っています。

英語のオリジナルアドレス: https://blog/top-icons-packs-and-resources-for-web/

著者: Eugene Stepnov

翻訳アドレス: https://segmentfault.com/a/1190000022273604

プログラミング関連の知識については、

プログラミング ビデオ をご覧ください。 !

以上が収集する価値のある 20 個のフロントエンド開発 ICON アイコン ライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート