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

Freebies

Post on:2020年12月23日

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タグで使用できます。

<?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>