収集する価値のある 20 個のフロントエンド開発 ICON アイコンライブラリ-jsチュートリアル-php.cn

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

ハイライト

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

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

https://jam-icons.com/

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

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

896

手作りのアイコンです。このアイコンパックには、SVG とフォントのバージョンがあります。これらのアイコンは、Web、印刷、またはアプリケーション開発プロジェクトで SVG ファイルとして使用できます。これらのアイコンは、特定の CSS スタイルシートのフォントとしても使用できます。サイズは 16px、24px、32p#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 つの異なるファイル形式が含まれているため、お好みのデザインソフトウェアのアイコンを使用できます。

ハイライト:

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 ドルで、既存のアイコンのコレクション全体と、今後リリースされるアイコンにアクセスできることを意味します。ハイライト:

#すべてのアイコンが複数のプラットフォームと互換性があります
サブスクリプションベースのビジネスモデル
マルチプラットフォームサポート

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

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

16X16

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

ハイライト:

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

無料および有料のダウンロードオプション

複数のダウンロード形式
#12. Glyphish アイコンパック

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

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

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

、

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

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

Apple Retina ディスプレイ用アイコン
13、Ionicons

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

価格とライセンス: MIT

Ionic チームは、Ionicons 1収集する価値のある 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 つの異なるスケーラブルなパッケージが付属しています。

ハイライト: