全部、完全に商用利用無料!スマホのUIデザインに適した2,186種類のSVGアイコン素材 -Fluent Icons

MicrosoftからAndroidやiOSのスマホのUI向けにデザインされたSVGアイコンを紹介します。もちろん、デスクトップで使用しても問題ありません。

アイコンは角が丸く、形状が単純化されており、スマホでの視認性や操作性が考慮されています。スタイルはソリッドとベタ塗りの2種類、2,186種類すべてがSVGアイコンです。

スマホのUIデザインに適した2,186種類のSVGアイコン素材 -Fluent Icons

Fluent Icons -GitHub

Fluent Iconsの特徴

Microsoftからオープンソースで利用できるSVGアイコンがリリースされました。

サイトのキャプチャ

Fluent Icons
※オープンソースなので、有志によるサイトも作成されています。

  • MITライセンスで、商用プロジェクトでも無料で利用できます。
  • アイコンは全部で、2,186種類!
  • アイコンのスタイルは、Regularのソリッド、Filledの塗りつぶしの2種類。
  • スマホのUI用に、24pxでデザインされたアイコン。
  • ダークモードにも対応。
  • アイコンはSVGで、コードのコピーあるいはファイルのダウンロードで利用できます。

すべてSVGアイコンなので、サイズやカラーも簡単に変更できます。

サイトのキャプチャ

ダークモードにも対応

Fluent Iconsのダウンロード

アイコンの利用方法は、3種類

  • サイトからアイコンのコードをコピー、アイコンファイルをダウンロード
  • すべてのアイコンをダウンロード
  • Figmaでアイコンを利用

サイトから各アイコンをクリックすると、コードのコピーあるいはファイルのダウンロードで利用できます。

サイトのキャプチャ

Fluent Icons

アイコン全部をダウンロードしたい人は、GitHubから一括でダウンロードできます。

サイトのキャプチャ

Fluent Icons -GitHub

Figma用のファイルも用意されています。

サイトのキャプチャ

Fluent Icons -Figma

Fluent Iconsの使い方

Fluent IconsはSVGアイコンなので、SVGのコードをインラインで使用したり、imgタグで使用できます。

サイトでは、検索機能があるので便利です。
例えば「Search」アイコンだと、通常の虫メガネの他に、ドキュメントサーチ、イメージサーチ、ピープルサーチ、ビジュアルサーチ、ブックサーチなど、さまざまなアイテムが揃っています。

サイトのキャプチャ

Fluent Icons

FigmaはMicrosoftによるファイルです。

サイトのキャプチャ

Fluent Icons -Figma

アイコンはアルファベット順に並んでいます。

サイトのキャプチャ

Fluent Icons -Figma

sponsors

top of page

©2021 coliss