ただのアイコンセットじゃない？変わった使い方のフリーアイコンセット３選

この世に溢れている様々なアイコンセット。UIデザインやWebサービスの実装で使う機会が多かったり、いまいちサービスのデザインと合うものが見つからなかったり、使い勝手が悪かったりなど色々と問題がありますよね。
今日は、普通のアイコンセットとは一味違う使い方のサービスを紹介します。

シンプルなSVGアイコンが完全無料で！「ikonate」

www.ikonate.com

Ikonate – fully customisable & accessible vector icons

https://www.ikonate.com

Customise, adjust and download free vector icons. Ikonate is an adaptable set of optimised, accessible SVG icons that use can easily use in both development and design apps such as Sketch and Photoshop. Ready to use as images, inline SVGs or SVG sprites.

Ikonateはサイト上でアイコンのカスタマイズができ、欲しいアイコンだけを選択しエクスポートができるサービスです。
最初から必要なアイコンのみを選択してダウンロードできるので、zipファイルの中身から探し出し…なんて手間もないですし、容量の大きいファイルをダウンロードして重くなることもありません。
カスタマイズもweb上でサクサク終わるので、最低限の操作でアイコンをゲットできます。

線の太さ、サイズ、欲しいものだけを選択できる

Sketchファイルにも対応「Evericons」

Evericons

Evericons

http://www.evericons.com

Get a free icons pack for your next project

Evericonsはフリーアイコンセットです。400個以上ものアイコンセットをワンクリックですぐにダウンロードできます。
zipファイルの中身は、全て入ったSketchファイルとそれぞれのSVG、PNGファイル（24pxと64pxサイズ）が入っており、どんな場面にでも使いやすくなっています。

サイト上で内容を確認することもできる

とにかく数が多く網羅されている

Sketchファイルの中身はカラフルでカラーも用意されており、ジャンル分け・レイアウトが非常に凝っています。
アイコン自体もパス分けされており、アイコンの構造が知りたかったりトレースがしたいSketch初学者にも役立つ内容なのではないかと思います。

HTMLで簡単に細かいカスタマイズができる「Vivid.js」

webkul.github.io

Vivid.JS - SVG Icons Library

https://webkul.github.io/vivid/

JavaScript library which is built to easily customize and use the SVG Icons

アイコンを使うシチュエーションは、デザインカンプを作るときだけではありません。エンジニアでも、コードをいじるだけでサイズや色の調整が簡単にできるキットがありました。
フラットでシンプルなアイコンがコード上で簡単に管理できるので、エンジニアにとっては分かりやすいかもしれません。

マニュアルもしっかりと用意されているので、使い方がわからない場合でも必要に応じて習得できます。

webkul.github.io

Docs - SVG Icons Library - Vivid.js

https://webkul.github.io/vivid/docs.html#adding-icons

Everything you need to know about Vivid.JS to Kickstart with SVG Icons.

種類も90以上揃っており随時リスエクトも受け付けているそうなので、もし欲しいアイコンがない方は問い合わせてみてはいかがでしょうか。

変わり種のアイコンキット。

いかがでしたでしょうか。今回はデザイナーだけではなく、エンジニアも使いやすそうなアイコンキットも紹介してみました。
手書きやフラットデザインなど、選んだり探したりするだけで一苦労ですが、ニーズに合わせてうまく見つけられるサービスも出てくれると嬉しいですね。
※版権や詳しい使い方は各サイトをご確認の上でご使用ください。