UIデザインに最適！ シンプルなSVGアイコン素材が7,000種類以上揃っていて、完全に商用利用無料 -Phosphor Icons
Post on:2023年5月18日
sponsors
WebサイトやスマホアプリのUIデザインをはじめ、プレゼンなどのさまざまな成果物に使用できるSVGアイコンのセットを紹介します。
アイコンのスタイルも豊富で、ソリッド・ベタ塗り・デュオトーンなども揃っており、さまざまなデザインに適用できると思います。
Phosphor Icons
Phosphor Icons -GitHub
Phosphor Iconsの特徴
Phosphor Iconsは、WebサイトやスマホアプリのUIデザインをはじめ、プレゼンテーションやダイアグラムなどさまざまな成果物に使用できるフレシキブルなアイコンのセットです。
- 7，000種類以上のSVGアイコンが揃っています。
- 6つのスタイル（Thin, Light, Regular, Bold, Fill, Duotone）が揃っています。
- 16x16pxで設計されており、小さくても見やすく、SVGなので大きなサイズでも使用できます。
- スタイルを微調整するためにRawのストローク情報が保持されています。
- オープンソースで、完全に無料です。
- Web、React、Vue、Flutter、Elm、その他のフレームワークやプラットフォームで利用できます。
アイコンはMITライセンスで、商用プロジェクトでも無料で利用できます。
6つのスタイル（Thin, Light, Regular, Bold, Fill, Duotone）、サイズ、カラーは簡単にサイトで変更できます。
アイコンのカスタマイズ
アイコンを使用したさまざまなデザインもShowcaseから確認できます。
Phosphor Iconsのアイコンのダウンロード
Phosphor Iconsのアイコンは、さまざまな形式でダウンロードできます。
まずは、一括でアイコンをダウンロードしたい人はページ上部の「Download all」をクリックしてください。
一括でダウンロードすると、SVGアイコンをはじめ、PNGアイコン、Webフォント一式が揃っています。
ダウンロードしたアイコン
個別にアイコンをダウンロードしたい人は、サイトから各アイコンをクリックします。
SVGアイコンを個別にダウンロード
Figmaでアイコンを利用したい人は、プラグインやライブラリも用意されています。
Phosphor Iconsのアイコン
Phosphor Iconsのアイコンを見てましょう。
上部から6つのスタイル（Thin, Light, Regular, Bold, Fill, Duotone）を選択できます。
6つのスタイル（Thin, Light, Regular, Bold, Fill, Duotone）
各アイコンをクリックすると、SVGアイコンのダウンロードとWeb、React、Vue、Flutter、Elmで利用する際のコードが表示されます。
各アイコンをクリック
コードはコピペで簡単に利用できます。
アイコンを配置するコードが生成
アイコンはカテゴリに分けられてはいないのですが、「arrow」などを検索ボックスに入力すると矢印アイコンが表示されて便利です。
「arrow」でアイコンを検索
ショッピングサイトで使用するアイコンも一通り揃っています。
「shopping」でアイコンを検索
sponsors
