全部、完全に商用利用無料!スマホのUIデザインに適した2,186種類のSVGアイコン素材 -Fluent Icons
Post on:2020年12月23日
MicrosoftからAndroidやiOSのスマホのUI向けにデザインされたSVGアイコンを紹介します。もちろん、デスクトップで使用しても問題ありません。
アイコンは角が丸く、形状が単純化されており、スマホでの視認性や操作性が考慮されています。スタイルはソリッドとベタ塗りの2種類、2,186種類すべてがSVGアイコンです。

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

Fluent Icons
※オープンソースなので、有志によるサイトも作成されています。
- MITライセンスで、商用プロジェクトでも無料で利用できます。
- アイコンは全部で、2,186種類!
- アイコンのスタイルは、Regularのソリッド、Filledの塗りつぶしの2種類。
- スマホのUI用に、24pxでデザインされたアイコン。
- ダークモードにも対応。
- アイコンはSVGで、コードのコピーあるいはファイルのダウンロードで利用できます。
すべてSVGアイコンなので、サイズやカラーも簡単に変更できます。

ダークモードにも対応
Fluent Iconsのダウンロード
アイコンの利用方法は、3種類
- サイトからアイコンのコードをコピー、アイコンファイルをダウンロード
- すべてのアイコンをダウンロード
- Figmaでアイコンを利用
サイトから各アイコンをクリックすると、コードのコピーあるいはファイルのダウンロードで利用できます。

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

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

Fluent Iconsの使い方
Fluent IconsはSVGアイコンなので、SVGのコードをインラインで使用したり、imgタグで使用できます。
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="UTF-8"?> <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 59.1 (86144) - https://sketch.com --> <title>ic_fluent_search_24_regular</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_search_24_regular" fill="#212121" fill-rule="nonzero"> <path d="M10,2.75 C14.0040644,2.75 17.25,5.99593556 17.25,10 C17.25,11.7318729 16.6427468,13.3219143 15.6295486,14.5688158 L20.5303301,19.4696699 C20.8232233,19.7625631 20.8232233,20.2374369 20.5303301,20.5303301 C20.2640635,20.7965966 19.8473998,20.8208027 19.5537883,20.6029482 L19.4696699,20.5303301 L14.5688158,15.6295486 C13.3219143,16.6427468 11.7318729,17.25 10,17.25 C5.99593556,17.25 2.75,14.0040644 2.75,10 C2.75,5.99593556 5.99593556,2.75 10,2.75 Z M10,4.25 C6.82436269,4.25 4.25,6.82436269 4.25,10 C4.25,13.1756373 6.82436269,15.75 10,15.75 C13.1756373,15.75 15.75,13.1756373 15.75,10 C15.75,6.82436269 13.1756373,4.25 10,4.25 Z" id="🎨-Color"></path> </g> </g> </svg> |
サイトでは、検索機能があるので便利です。
例えば「Search」アイコンだと、通常の虫メガネの他に、ドキュメントサーチ、イメージサーチ、ピープルサーチ、ビジュアルサーチ、ブックサーチなど、さまざまなアイテムが揃っています。

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

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

sponsors