87,000個以上のフラットアイコンをカスタマイズできるIcons8【無料】

おはようございます！社員Aです👩

今回は、87,000個以上のフラットアイコンをカスタマイズできるIcons8をご紹介したいと思います。

WEB制作において、アイコンを使うことは良くあるのですがアイコンを探す→Photoshop上で色を変えたりカスタマイズするというのが一般的な使い方でした。

今回ご紹介するIcons8では、アイコンをWEB上で形式・サイズ・色などを自分好みにカスタマイズしてダウンロードできるサイトです。

フリーアイコンサイト「Icons8」

Icons8は、87,000個以上ものおしゃれなアイコンが揃った素材サイトです。

シンプルなものからデザイン性のあるものまで豊富に揃っており、日々多くのアイコンが追加されています。

Icons8

 

4334 Shares

153 Users

4903 Pockets

87,000 のアイコン フリー

https://icons8.jp

単一のアイコン素材集には 87,000 の素材があります。すべてのアイコンには5種類のフラットスタイルがあります。PNG、SVG、フォント形式でダウンロード。

「Icons8」の特徴・機能一覧

「Icons8」の特徴・機能は、下記です。

統一されたスタイル

アイコンはすべて同一のデザイナーによって作られているので、使用すると一貫性のあるインターフェースになります。

カラーを変更

カラーを入力することで、PNGとSVGのカラーリングを変更できます。

HTMLの埋め込み

HTMLにアイコンを貼り付けるコードを取得。アイコンを挿入するには 5 つの方法のいずれかを選択できます。

「Icons8」で色を変更する方法

カラーを入力することで、PNGとSVGのカラーリングを変更できます。

1.一覧からアイコンをクリックし、「Recolor」をクリックする

一覧からアイコンをクリックし、左上にある「Recolor」をクリックします。

2.デフォルトの色もしくはカラーコードを入力する

「Recolor」をクリックすると、デフォルトで何色かカラーが用意されています。

デフォルトカラーから選ぶか、もしくはカラーコードを入力して好みの色に変更することができます。

「Icons8」で作成したアイコンをHTMLで埋め込む方法

「Icons8」では、HTMLにアイコンを貼り付けるコードを取得することができます。

1.色などをカスタマイズし、HTMLをクリックする

アイコン一覧からアイコンをクリックし「HTML」をクリックします。

2.埋め込みコードをサイトにコピペ

「HTML」をクリックすると、埋め込みコードが表示されますのでサイトにコピペします。

※アイコンによっては、ライセンス表示が必用な場合があります。

Web・Mac・Windows用の無料アプリもある

「Icons8」ではサイト上だけでなく、Mac・Windows用の無料アプリも提供されています。

アプリで出来ることは下記の通りです。

1. 検索…アイコンには最大20個のタグが付いていて効率的に検索できます
2. カテゴリー…50-200種類のアイコンをもつカテゴリが約50個あります
3. カラー変更…PNGとSVGアイコンのカラーをすぐに変更できます
4. ドラッグ＆ドロップ…Sketch、Photoshop、Xcodeなどにドラッグ&ドロップできます

まとめ

WEB・アプリ上である程度アイコンをカスタマイズし、ダウンロードできるのでデザイン上もそのまま使えるのがとても便利だなと思いました。

また、アイコン数も87,000個以上と豊富で、すべて同一のデザイナーによって作られているので統一感が出るのもメリットだと思います。

HTML埋め込みはコーダーさんにとっても嬉しい機能！