200種類以上のアイコンが無料で商用利用できる「fontisto」+webアイコンまとめ

2018/02/16webデザイン・開発
200種類以上のアイコンが無料で商用利用できる「fontisto」+webアイコンまとめ

アイコンって考えるの大変です。そんな中で今回発見したのは「Fontisto」。なんと200種類以上のアイコンが無料で商用利用できます。アイコンのカテゴリーは全部で16カテゴリーもありこれで多くはカバーできそうな予感もします。とくに、エンジニアが管理画面等のUIを作る時にはもってこいです。
そのまま使うもよし、デザイナーやタイポグラファ、イラストレーターにイメージを使うのにも使えます。

fontistoのライセンス

Fontisto」は商用も無料ということですが、そのライセンスは以下のようになっています。利用する際はきちんとライセンス関係について把握した上でご利用ください。

コードライセンス MIT License
文書ライセンス Creative Commons BY3.0
フォントライセンス SIL Open Font License 1.1

webでの使い方

CSSの読み込み

link rel=“stylesheet” href=“fontisto/css/fontisto.min.css”

CDN link

link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/fontisto@v1.0.17/css/fontisto/fontisto.min.css”

読み込みが完了したら、http://www.fontisto.com/examplesを参考にクラスを指定するだけです。

アイコンの種類

全部で16のカテゴリーに分かれていて、それぞにいくつか複数のアイコンがセットになっています。サンプルは全てこちらでご覧いただけます。商用利用無料のアイコンもすごい使いやすくなってきていますね。

accessibility accessibilityのカテゴリーには10種類のアイコンがあります。
brand brandのカテゴリーには68種類のアイコンがあります。
browser browserのカテゴリーには6種類のアイコンがあります。
chart chartのカテゴリーには5種類のアイコンがあります。
currency currencyのカテゴリーには11種類のアイコンがあります。
directional directionalのカテゴリーには28種類のアイコンがあります。
fontisto fontistoのカテゴリーには2種類のアイコンがあります。
form-control form-controlのカテゴリーには4種類のアイコンがあります。
gender genderのカテゴリーには14種類のアイコンがあります。
hand handのカテゴリーには2種類のアイコンがあります。
other otherのカテゴリーには60種類のアイコンがあります。
payment paymentのカテゴリーには10種類のアイコンがあります。
player playerのカテゴリーには23種類のアイコンがあります。
spinner spinnerのカテゴリーには10種類のアイコンがあります。
text-editor text-editorのカテゴリーには40種類のアイコンがあります。
transportation transportationのカテゴリーには15種類のアイコンがあります。

「Fontisto」以外アイコンサービス

せっかくなので「Fontisto」以外のアイコンサービスをいろいろまとめてみました。商用利用無料のものと有料のものがあるので注意が必要です。

FLAT ICON DESIGN

FLAT ICON DESIGNさんはとにかく作り込みがすごいです。「え?これで無料なの?」って思ってしまいます。

FLAT ICON DESIGNさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

IcoMoon

自作アイコンをWebフォントにすることもできる優れものサイトです。SVGデータから生成することが可能。もちろんサイト内にフォントアイコンも豊富にあるのでぜひ活用してみてください。

IcoMoonさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

ICOOON MONO

先日あげたサイトと名前が似てますね。ベクターデータも各種の画像も、サイズ別でも選択できる使いやすいデータで落とせるのがいいと思います。内容は中には面白いアイコンもあったりしてとても参考になります。

ICOOON MONOさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

無料のAi・PNG白黒シルエットイラスト SILHOUETTE-ILLUST

白黒のイラストのみですが、同じテーマで種類が豊富ですし、意外なテーマのものもあるのでアイデアが広がり安いかもしれません。ベクターデータから画像データも一括でダウンロードできるようです。

SILHOUETTE-ILLUSTさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

ヒューマンピクトグラム

ピクトグラムが豊富に揃っています。公共の場で表示されている人型があらゆるポーズになっていて、アイコンとしての活用だけじゃなく、プレゼン資料やイメージイラストにも便利です。ユニークなシチュエーションのピクトもあり、表現力を見ているだけでも楽しいサイトです。

ヒューマンピクトグラムさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Metrize Icons

丸で囲まれたアイコンが揃っているサイトです。PSD (各アイコンはシェイプ)・SVG (512 x 512)・EPS・AI・PDF・Web Font (ttf, eot, woff)とカスタマイズにも超便利です。

Metrize Iconsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Material icons

Googleがオープンソースとして公開しているアイコンフォントです。Gmailなどの、Googleのサービスによく使われているアイコンなのでおなじみの方も多いのではないでしょうか。https://fonts.googleapis.com/〜をリンクしてwebフォントとして使用することもできますが、インストールして自分のマシンで自由にカスタマイズする方が便利かもしれません。フォントとしてIllustratorやPhotoshopで使用することもできるようです。やっぱりすごいです、Google。

Metrize Iconsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

iconmonstr

こちらは海外のサイトですが、豊富なアイコンが揃って商用無料、ライセンス掲載不要です。検索を英語でしないといけないのが唯一大変かもしれません。使用できるファイル形式も揃っていて、pngでのダウンロードならカラーも変えられます。

iconmonstrさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

ハンコでアソブ

PNG・モノクロのみのようです。でもこの味わいはサイトを可愛くできる要素満載です。使ってみたい気になるアイテムです。

ハンコでアソブさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

ICON HOIHO

かわいいカラーイラストのアイコンが豊富に揃っています。ファイルはPNGのみで、色やイラスト自体の加工などは難しそうですが、アイコンによってはカラーバリエーションが6色ほど揃っているものもあるようですのでサイトに合わせて選んで使えそうですね。

ICON HOIHOさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Icons DB – free custom icons

海外のサイトです。英語です。同じテイストのアイコンがセットでダウンロードできるようです。個人・商用のフリーでダウンロードできるアイテムは数が決まっているようですので、使うのは注意が必要かと思います。

Icons DB - free custom iconsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

アイコン配布中!

スマホ向けとはなっていますがベクターデータやpsdデータもダウンロードできるから加工次第でweb素材や印刷用にもとしても活用可能。1日のダウンロード可能な数は12個になっています。

アイコン配布中!さんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

無料アイコン素材

シルエットのアイコン素材です。webとしての使用だけではなく、資料などにも使え、なおかつ細やかな作りになっているので拡大しても印刷物にも使いやすい素材になっているのが嬉しいです。

無料アイコン素材さんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

いらすとや

こちらのイラストは数年前から、webサイトや公共の冊子などに使用されているのを見かけていましたが、このクオリティと豊富さで個人・商用全てフリーはすごいと思います。テイストは限られるかもしれませんが、品質の良い優しいイメージの作品ができるのではないでしょうか。

いらすとやさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Font Awesome

アイコンフォントといえばBootstrapでも使用可能なFont Awesomeですね。使い方も簡単ですし、CSSでフォントと同じ扱いができた時は画像アイコンの配置に苦労したのはなんだったんだとさえ思いました。

Font Awesomeさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Foundation Icon Fonts 3

HTML+CSSフレームワークで有名なFoundation。基本的なフォントアイコンの使用法は同じようです。スタンダードなUIによく使われるアイコンが揃っています。

Foundation Icon Fonts 3さんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

linea

シンプルな線のアイコンが揃っているフォントアイコン。730種類ダウンロードできます。

lineaさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

SVG porn

有名企業のロゴがSVG形式でダウンロードできます。カード会社のロゴマークなど揃っているので、ネットショップのサイト作成に便利だと思います。

SVG pornさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Icon rainbow

定番のアイコンから変わり種のアイコンまでいろいろ揃い、PNG、JPG、SVG、EPS、ベクターデータまで豊富な種類からダウンロードが可能です。ダウンロード前にカラーも変えられるのでダウンロード後に加工の手間を減らすこともできます。

Icon rainbowさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

総合素材サイト|ソザイング

アイコンやイラスト、スマホ用アイコンセット、画像も商用無料でダウンロードできるサイトです。

総合素材サイト|ソザイングさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

イラストAC

約30,000点以上のイラスト素材が揃っているサイトです。登録が必要ですが、基本無料なので気軽にできるのではないでしょうか。

イラストACさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

無料素材倶楽部

基本無料で、商用利用、加工OKのサイトです。PNGやGIFの画像素材で1つ1つのサイズは小さいので拡大して加工するのは難しいかもしれません。

無料素材倶楽部さんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

シルエットAC

イラストACと同じ運営会社のサイトです。メールアドレスで無料登録をすれば個人・商用問わずダウンロードできます。このグループサイトは全体的にクオリティが高いと思います。

シルエットACさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Ligature kudakurage Symbols

日本人のwebデザイナーが公開しているサイトです。こちらはフォントのみのようですが、実装自体は簡単なようで、国内サービスのロゴも充実しています。個人的にはGithubのロゴが可愛いと思いました。

Ligature kudakurage Symbolsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Pixeden

「Plemium」とついているものは有料のようです。会員登録不要・商用利用可能・クレジット表記不要でトップページからかっこよさげな雰囲気ですね。もちろんアイコンもおしゃれです。

Pixedenさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

ピクト缶

かわいいイラストが揃っています。PNGとEPSでダウンロードできますので、加工もしやすく色合いも落ち着いているので使いやすいと思います。

ピクト缶さんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

free icons web

1,600個ほどのハイクオリティなアイコンが揃っています。商用利用無料、クレジット表記必要なしのようですが日本語表記がないためよく読んでダウンロードする方がいいかもしれません。違うボタンを押してしまわないよう注意。

free icons webさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

TOWN illust

街や建物のイラストが揃っていて上図のようにまるで囲めばかわいいアイコンに使えます。各地の観光名所などもあり観光用のサイトなどにもとても便利です。神社やお寺、タワーなど簡単には作りにくいものはとても嬉しいですね。

TOWN illustさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

iconscout

登録は必要ですが、基本無料で名前、メールアドレス、パスワードで登録完了。テイストの違うアイコンのセットが豊富にあり、いろんなジャンルのサイトにマッチしそうです。でも英語表記だけですのでなるべく理解して安心して使ってみたいですね。

iconscoutさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

WebHostingHub Glyphs

2075種類という豊富なアイテムがすごいです。カテゴリー別に分かれていて探しやすいです。PNG形式でダウンロードも可能ですが、その前にサイズやカラーを指定することもできます。

WebHostingHub Glyphsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

150 outlined icons

PSD、AI、SVGなどでダウンロードできる線のアイコンです。すっきりしたオシャレ感があります。

150 outlined iconsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Typicons

ダウンロードをしてHTMLとCSSにリンクなどを書き込むだけです。SVGでもダウンロードできるようなので加工もできますね。

Typiconsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

GitHub Octicons

GitHubで使われているアイコンで、開発系の画面に使えるアイコンが揃っているようです。GitHubのロゴも入っています。

GitHub Octiconsさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

Materialand

3000以上のアイコンをキーワードなどで検索することができて、簡単に探せます。GIFなどの素材で作られていますが、同じものから画像タイプを選ぶことはあまりできないようです。

Materialandさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

veryicon

50万点を超えるアイテムから検索で絞り込むことができます。難点は日本語表記がないこととライセンスがアイテムごとに違うのでよく確認してダウンロードが必要なことでしょうか。

veryiconさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら

EC design

TopeconHeroe」さんの出されているシリーズサイトはクオリティがいいものが多く大変助かっております。こちらはECサイト向けの画像やイラストなどそのまま使えるものが多数揃っています。

EC designさんのwebサイトスクリーンショット@complesso.jp

webサイトはこちら