Repolode
投稿する
google

google/material-design-icons

Google公式のMaterial Designアイコンセット（Material Symbolsと従来のMaterial Icons）。SVG、アイコンフォント、Android、iOS形式を提供します。

代替できる製品:Font Awesome

GitHub で見る公式サイト
スター
54,135
フォーク
9,748
未解決の Issue
429
最終コミット
12 日前

これは何？

このリポジトリには、Google公式のMaterial Designアイコンが2種類収録されています。2022年に登場したMaterial Symbolsは現行のセットで、光学サイズ、ウェイト、グレード、塗りの各軸を調整できる可変フォントとして提供されています。Material Iconsは従来のセットで、アウトライン、塗りつぶし、角丸、シャープ、ツートーンのスタイルがありますが、現在は更新されていません。

アイコンはSVG、PNG、Webフォント（WOFF2など）、AndroidおよびiOS向けのアセットとして提供されています。Google Fontsでホストされているフォントを読み込むことも、生成済みのファイルをプロジェクトで直接使うこともできます。これらのアイコンを基にしたサードパーティ製のコミュニティ npm パッケージも掲載されていますが、Googleによる保守や審査は行われていません。

アイコンはApache 2.0ライセンスで公開されており、Material Designのガイドラインに沿って設計されています。

主な機能

  • 012種類のアイコンセットを収録：現行の可変フォントMaterial Symbolsと、更新終了した従来のMaterial Icons。
  • 02Material Symbolsでは、光学サイズ、ウェイト、グレード、塗りの各軸を調整できます。
  • 03Material Iconsには、アウトライン、塗りつぶし、角丸、シャープ、ツートーンのスタイルがあります。
  • 04SVG、PNG、Webフォント、Android、iOS形式を提供します。
  • 05Google Fontsのホスト済みフォントを読み込むか、ダウンロードしたファイルを利用できます。

ユースケース

  • WebアプリのUIに統一感のあるアイコンセットを追加する。
  • CSSクラスまたはGoogle Fontsのリンクを使って、Webサイトでアイコンフォントを利用する。
  • AndroidまたはiOSアプリにMaterial風のアイコンを組み込む。
  • CSSで可変フォントの設定を使い、アイコンのウェイトや塗りの状態を調整する。

クイックスタート

  1. 1

    Material Symbols のアイコンブラウザーを開いて、アイコンを選択します

  2. 2

    SVG アイコン用のコミュニティ npm パッケージをインストールします

    npm install @material-design-icons/svg
  3. 3

    または、HTML で Google Fonts のウェブフォントを読み込みます

    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

使う前に知っておきたいこと

  • Material Icons は更新が終了しているため、新しいアイコンは Material Symbols にのみ追加されます。
  • npm パッケージは Google ではなく、サードパーティによって管理されています。

トピック

#icons#material-design#svg#icon-font#web-fonts#android#ios#variable-fonts#material#sprites

よくある質問

material-design-icons とは？
Google公式のMaterial Designアイコンセット（Material Symbolsと従来のMaterial Icons）。SVG、アイコンフォント、Android、iOS形式を提供します。 このリポジトリには、Google公式のMaterial Designアイコンが2種類収録されています。2022年に登場したMaterial Symbolsは現行のセットで、光学サイズ、ウェイト、グレード、塗りの各軸を調整できる可変フォントとして提供されています。Material Iconsは従来のセットで、アウトライン、塗りつぶし、角丸、シャープ、ツートーンのスタイルがありますが、現在は更新されていません。
material-design-icons は無料で使えますか？ライセンスは？
material-design-icons は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
material-design-icons は今もメンテナンスされていますか？
活発にメンテナンス中。material-design-icons の最終コミットは 2026年10月9日 です。
material-design-icons は何に使えますか？
WebアプリのUIに統一感のあるアイコンセットを追加する。 CSSクラスまたはGoogle Fontsのリンクを使って、Webサイトでアイコンフォントを利用する。 AndroidまたはiOSアプリにMaterial風のアイコンを組み込む。 CSSで可変フォントの設定を使い、アイコンのウェイトや塗りの状態を調整する。
material-design-icons のインストール方法は？
Material Symbols のアイコンブラウザーを開いて、アイコンを選択します SVG アイコン用のコミュニティ npm パッケージをインストールします: npm install @material-design-icons/svg または、HTML で Google Fonts のウェブフォントを読み込みます: <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
material-design-icons はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/google/material-design-icons

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト