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

ツール

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

2018年12月27日 8:00 

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

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

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

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

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



 

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

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

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

 

「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埋め込みはコーダーさんにとっても嬉しい機能!

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!