アイコンって考えるの大変です。そんな中で今回発見したのは「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さんはとにかく作り込みがすごいです。「え？これで無料なの？」って思ってしまいます。
webサイトはこちら
IcoMoon
自作アイコンをWebフォントにすることもできる優れものサイトです。SVGデータから生成することが可能。もちろんサイト内にフォントアイコンも豊富にあるのでぜひ活用してみてください。
webサイトはこちら
ICOOON MONO
先日あげたサイトと名前が似てますね。ベクターデータも各種の画像も、サイズ別でも選択できる使いやすいデータで落とせるのがいいと思います。内容は中には面白いアイコンもあったりしてとても参考になります。
webサイトはこちら
無料のAi・PNG白黒シルエットイラスト SILHOUETTE-ILLUST
白黒のイラストのみですが、同じテーマで種類が豊富ですし、意外なテーマのものもあるのでアイデアが広がり安いかもしれません。ベクターデータから画像データも一括でダウンロードできるようです。
webサイトはこちら
ヒューマンピクトグラム
ピクトグラムが豊富に揃っています。公共の場で表示されている人型があらゆるポーズになっていて、アイコンとしての活用だけじゃなく、プレゼン資料やイメージイラストにも便利です。ユニークなシチュエーションのピクトもあり、表現力を見ているだけでも楽しいサイトです。
webサイトはこちら
Metrize Icons
丸で囲まれたアイコンが揃っているサイトです。PSD (各アイコンはシェイプ）・SVG (512 x 512)・EPS・AI・PDF・Web Font (ttf, eot, woff)とカスタマイズにも超便利です。
webサイトはこちら
Material icons
Googleがオープンソースとして公開しているアイコンフォントです。Gmailなどの、Googleのサービスによく使われているアイコンなのでおなじみの方も多いのではないでしょうか。https://fonts.googleapis.com/〜をリンクしてwebフォントとして使用することもできますが、インストールして自分のマシンで自由にカスタマイズする方が便利かもしれません。フォントとしてIllustratorやPhotoshopで使用することもできるようです。やっぱりすごいです、Google。
webサイトはこちら
iconmonstr
こちらは海外のサイトですが、豊富なアイコンが揃って商用無料、ライセンス掲載不要です。検索を英語でしないといけないのが唯一大変かもしれません。使用できるファイル形式も揃っていて、pngでのダウンロードならカラーも変えられます。
webサイトはこちら
ハンコでアソブ
PNG・モノクロのみのようです。でもこの味わいはサイトを可愛くできる要素満載です。使ってみたい気になるアイテムです。
webサイトはこちら
ICON HOIHO
かわいいカラーイラストのアイコンが豊富に揃っています。ファイルはPNGのみで、色やイラスト自体の加工などは難しそうですが、アイコンによってはカラーバリエーションが6色ほど揃っているものもあるようですのでサイトに合わせて選んで使えそうですね。
webサイトはこちら
Icons DB – free custom icons
海外のサイトです。英語です。同じテイストのアイコンがセットでダウンロードできるようです。個人・商用のフリーでダウンロードできるアイテムは数が決まっているようですので、使うのは注意が必要かと思います。
webサイトはこちら
アイコン配布中！
スマホ向けとはなっていますがベクターデータやpsdデータもダウンロードできるから加工次第でweb素材や印刷用にもとしても活用可能。1日のダウンロード可能な数は12個になっています。
webサイトはこちら
無料アイコン素材
シルエットのアイコン素材です。webとしての使用だけではなく、資料などにも使え、なおかつ細やかな作りになっているので拡大しても印刷物にも使いやすい素材になっているのが嬉しいです。
webサイトはこちら
いらすとや
こちらのイラストは数年前から、webサイトや公共の冊子などに使用されているのを見かけていましたが、このクオリティと豊富さで個人・商用全てフリーはすごいと思います。テイストは限られるかもしれませんが、品質の良い優しいイメージの作品ができるのではないでしょうか。
webサイトはこちら
Font Awesome
アイコンフォントといえばBootstrapでも使用可能なFont Awesomeですね。使い方も簡単ですし、CSSでフォントと同じ扱いができた時は画像アイコンの配置に苦労したのはなんだったんだとさえ思いました。
webサイトはこちら
Foundation Icon Fonts 3
HTML+CSSフレームワークで有名なFoundation。基本的なフォントアイコンの使用法は同じようです。スタンダードなUIによく使われるアイコンが揃っています。
webサイトはこちら
linea
シンプルな線のアイコンが揃っているフォントアイコン。730種類ダウンロードできます。
webサイトはこちら
SVG porn
有名企業のロゴがSVG形式でダウンロードできます。カード会社のロゴマークなど揃っているので、ネットショップのサイト作成に便利だと思います。
webサイトはこちら
Icon rainbow
定番のアイコンから変わり種のアイコンまでいろいろ揃い、PNG、JPG、SVG、EPS、ベクターデータまで豊富な種類からダウンロードが可能です。ダウンロード前にカラーも変えられるのでダウンロード後に加工の手間を減らすこともできます。
webサイトはこちら
総合素材サイト｜ソザイング
アイコンやイラスト、スマホ用アイコンセット、画像も商用無料でダウンロードできるサイトです。
webサイトはこちら
イラストAC
約30,000点以上のイラスト素材が揃っているサイトです。登録が必要ですが、基本無料なので気軽にできるのではないでしょうか。
webサイトはこちら
無料素材倶楽部
基本無料で、商用利用、加工OKのサイトです。PNGやGIFの画像素材で1つ1つのサイズは小さいので拡大して加工するのは難しいかもしれません。
webサイトはこちら
シルエットAC
イラストACと同じ運営会社のサイトです。メールアドレスで無料登録をすれば個人・商用問わずダウンロードできます。このグループサイトは全体的にクオリティが高いと思います。
webサイトはこちら
Ligature kudakurage Symbols
日本人のwebデザイナーが公開しているサイトです。こちらはフォントのみのようですが、実装自体は簡単なようで、国内サービスのロゴも充実しています。個人的にはGithubのロゴが可愛いと思いました。
webサイトはこちら
Pixeden
「Plemium」とついているものは有料のようです。会員登録不要・商用利用可能・クレジット表記不要でトップページからかっこよさげな雰囲気ですね。もちろんアイコンもおしゃれです。
webサイトはこちら
ピクト缶
かわいいイラストが揃っています。PNGとEPSでダウンロードできますので、加工もしやすく色合いも落ち着いているので使いやすいと思います。
webサイトはこちら
free icons web
1,600個ほどのハイクオリティなアイコンが揃っています。商用利用無料、クレジット表記必要なしのようですが日本語表記がないためよく読んでダウンロードする方がいいかもしれません。違うボタンを押してしまわないよう注意。
webサイトはこちら
TOWN illust
街や建物のイラストが揃っていて上図のようにまるで囲めばかわいいアイコンに使えます。各地の観光名所などもあり観光用のサイトなどにもとても便利です。神社やお寺、タワーなど簡単には作りにくいものはとても嬉しいですね。
webサイトはこちら
iconscout
登録は必要ですが、基本無料で名前、メールアドレス、パスワードで登録完了。テイストの違うアイコンのセットが豊富にあり、いろんなジャンルのサイトにマッチしそうです。でも英語表記だけですのでなるべく理解して安心して使ってみたいですね。
webサイトはこちら
WebHostingHub Glyphs
2075種類という豊富なアイテムがすごいです。カテゴリー別に分かれていて探しやすいです。PNG形式でダウンロードも可能ですが、その前にサイズやカラーを指定することもできます。
webサイトはこちら
150 outlined icons
PSD、AI、SVGなどでダウンロードできる線のアイコンです。すっきりしたオシャレ感があります。
webサイトはこちら
Typicons
ダウンロードをしてHTMLとCSSにリンクなどを書き込むだけです。SVGでもダウンロードできるようなので加工もできますね。
webサイトはこちら
GitHub Octicons
GitHubで使われているアイコンで、開発系の画面に使えるアイコンが揃っているようです。GitHubのロゴも入っています。
webサイトはこちら
Materialand
3000以上のアイコンをキーワードなどで検索することができて、簡単に探せます。GIFなどの素材で作られていますが、同じものから画像タイプを選ぶことはあまりできないようです。
webサイトはこちら
veryicon
50万点を超えるアイテムから検索で絞り込むことができます。難点は日本語表記がないこととライセンスがアイテムごとに違うのでよく確認してダウンロードが必要なことでしょうか。
webサイトはこちら
EC design
「TopeconHeroe」さんの出されているシリーズサイトはクオリティがいいものが多く大変助かっております。こちらはECサイト向けの画像やイラストなどそのまま使えるものが多数揃っています。
