font-awesome vs ionicons vs bootstrap-icons vs material-icons vs feather-icons vs line-awesome vs boxicons vs heroicons vs octicons
アイコンライブラリ
font-awesomeioniconsbootstrap-iconsmaterial-iconsfeather-iconsline-awesomeboxiconsheroiconsocticons類似パッケージ:

アイコンライブラリ

アイコンライブラリは、ウェブ開発において視覚的な要素を提供するためのパッケージです。これらのライブラリは、デザインの一貫性を保ちながら、開発者が迅速にアイコンをプロジェクトに統合できるようにします。アイコンは、ユーザーインターフェースの重要な部分であり、情報を視覚的に伝える手段として機能します。

npmのダウンロードトレンド

3 年

GitHub Starsランキング

統計詳細

パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
font-awesome931,22776,415-3179年前(OFL-1.1 AND MIT)
ionicons568,89218,0066.22 MB678ヶ月前MIT
bootstrap-icons540,1597,9292.99 MB46810ヶ月前MIT
material-icons245,3893612.23 MB131年前Apache-2.0
feather-icons138,07225,852625 kB5082年前MIT
line-awesome37,8291,300-476年前MIT
boxicons03,1743.75 MB806-(CC-BY-4.0 OR OFL-1.1 OR MIT)
heroicons023,399700 kB31年前MIT
octicons08,660-47年前MIT

機能比較: font-awesome vs ionicons vs bootstrap-icons vs material-icons vs feather-icons vs line-awesome vs boxicons vs heroicons vs octicons

デザインスタイル

  • font-awesome:

    多様なスタイル(ソリッド、アウトライン、ブランド)を持ち、非常に多くのアイコンを提供します。

  • ionicons:

    モバイルファーストのデザインに特化しており、滑らかなアイコンが特徴です。

  • bootstrap-icons:

    Bootstrapのデザインにマッチしたアイコンで、シンプルで直感的なスタイルを持っています。

  • material-icons:

    Googleのマテリアルデザインに基づいたアイコンで、統一感があります。

  • feather-icons:

    軽量で、オープンなデザイン哲学に基づいており、シンプルさが特徴です。

  • line-awesome:

    線画スタイルのアイコンで、シンプルでクリーンな見た目を提供します。

  • boxicons:

    フラットデザインで、カスタマイズが容易なアイコンを提供します。

  • heroicons:

    現代的なデザインで、特にUIデザインに適したアイコンを提供します。

  • octicons:

    GitHubのデザイン言語に基づいており、開発者向けに最適化されています。

カスタマイズ性

  • font-awesome:

    CSSクラスを使用して、サイズや色を簡単に変更できます。

  • ionicons:

    CSSで簡単にスタイルを変更でき、SVG形式で提供されます。

  • bootstrap-icons:

    CSSを使用して簡単にスタイルを変更できます。

  • material-icons:

    CSSクラスを使用して、サイズや色を簡単に変更できます。

  • feather-icons:

    SVG形式で提供され、自由にカスタマイズ可能です。

  • line-awesome:

    SVG形式で提供され、自由にカスタマイズ可能です。

  • boxicons:

    サイズや色を簡単に変更でき、SVG形式で提供されます。

  • heroicons:

    SVG形式で提供され、カスタマイズが容易です。

  • octicons:

    SVG形式で提供され、カスタマイズが容易です。

アイコンの数

  • font-awesome:

    5,000以上のアイコンがあり、最も広範なライブラリの一つです。

  • ionicons:

    約1,000以上のアイコンがあり、モバイル向けに最適化されています。

  • bootstrap-icons:

    約1,000以上のアイコンが利用可能です。

  • material-icons:

    約1,000以上のアイコンがあり、マテリアルデザインに基づいています。

  • feather-icons:

    約280のアイコンがあり、シンプルさを重視しています。

  • line-awesome:

    約1,500のアイコンがあり、Font Awesomeの代替として機能します。

  • boxicons:

    約1,000以上のアイコンがあり、豊富な選択肢を提供します。

  • heroicons:

    約200のアイコンがあり、特にUIデザインに特化しています。

  • octicons:

    約200のアイコンがあり、GitHubスタイルに特化しています。

使用シナリオ

  • font-awesome:

    多様なアイコンが必要なプロジェクトに広く使用されています。

  • ionicons:

    モバイルアプリケーションに特化したアイコンが必要な場合に最適です。

  • bootstrap-icons:

    Bootstrapフレームワークを使用したプロジェクトに最適です。

  • material-icons:

    Googleのマテリアルデザインを採用したプロジェクトに最適です。

  • feather-icons:

    シンプルなデザインを必要とするウェブアプリケーションに最適です。

  • line-awesome:

    Font Awesomeの代替として、線画スタイルを好む場合に使用します。

  • boxicons:

    軽量なアイコンが必要なプロジェクトに適しています。

  • heroicons:

    Tailwind CSSを使用したプロジェクトに特に適しています。

  • octicons:

    GitHub関連のプロジェクトに特化しています。

メンテナンスとサポート

  • font-awesome:

    広範なサポートとドキュメントがあり、活発に更新されています。

  • ionicons:

    活発にメンテナンスされており、新しいアイコンが追加されています。

  • bootstrap-icons:

    定期的に更新され、Bootstrapの新機能に対応しています。

  • material-icons:

    Googleによってメンテナンスされており、最新のデザインに対応しています。

  • feather-icons:

    オープンソースで、コミュニティによってサポートされています。

  • line-awesome:

    定期的に更新され、サポートが充実しています。

  • boxicons:

    活発にメンテナンスされており、新しいアイコンが追加されています。

  • heroicons:

    Tailwind CSSチームによってメンテナンスされており、定期的に更新されています。

  • octicons:

    GitHubによってメンテナンスされており、定期的に更新されています。

選び方: font-awesome vs ionicons vs bootstrap-icons vs material-icons vs feather-icons vs line-awesome vs boxicons vs heroicons vs octicons

  • font-awesome:

    広範なアイコンセットとサポートを必要とする場合、Font Awesomeは業界標準です。

  • ionicons:

    モバイルアプリケーションに特化したアイコンが必要な場合、Ioniconsが最適です。

  • bootstrap-icons:

    Bootstrapを使用している場合、Bootstrap Iconsはスタイルの一貫性を保つために最適です。

  • material-icons:

    Googleのマテリアルデザインに従う場合、Material Iconsは理想的です。

  • feather-icons:

    シンプルで洗練されたデザインを求める場合、Feather Iconsは非常に適しています。

  • line-awesome:

    Line Awesomeは、Font Awesomeの代替として、線画スタイルを好む場合に選択できます。

  • boxicons:

    軽量でカスタマイズ可能なアイコンが必要な場合、Boxiconsは良い選択肢です。

  • heroicons:

    Tailwind CSSと統合する場合、Heroiconsは特に便利です。

  • octicons:

    GitHubのスタイルに合わせたアイコンが必要な場合、Octiconsを選ぶと良いでしょう。

font-awesome のREADME

Font Awesome v4.7.0

The iconic font and CSS framework

Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites, created and maintained by Dave Gandy. Stay up to date with the latest release and announcements on Twitter: @fontawesome.

Get started at http://fontawesome.io!

License

Changelog

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Versioning

Font Awesome will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

  • Breaking backward compatibility bumps the major (and resets the minor and patch)
  • New additions, including new icons, without breaking backward compatibility bumps the minor (and resets the patch)
  • Bug fixes, changes to brand logos, and misc changes bumps the patch

For more information on SemVer, please visit http://semver.org.

Author

Component

To include as a component, just run

$ component install FortAwesome/Font-Awesome

Or add

"FortAwesome/Font-Awesome": "*"

to the dependencies in your component.json.

Hacking on Font Awesome

Before you can build the project, you must first have the following installed:

From the root of the repository, install the tools used to develop.

$ bundle install
$ npm install

Build the project and documentation:

$ bundle exec jekyll build

Or serve it on a local server on http://localhost:7998/Font-Awesome/:

$ bundle exec jekyll -w serve