この世に溢れている様々なアイコンセット。UIデザインやWebサービスの実装で使う機会が多かったり、いまいちサービスのデザインと合うものが見つからなかったり、使い勝手が悪かったりなど色々と問題がありますよね。
今日は、普通のアイコンセットとは一味違う使い方のサービスを紹介します。
目次
シンプルなSVGアイコンが完全無料で！「ikonate」
| 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 – fully customisable & accessible vector icons - |
Ikonateはサイト上でアイコンのカスタマイズができ、欲しいアイコンだけを選択しエクスポートができるサービスです。
最初から必要なアイコンのみを選択してダウンロードできるので、zipファイルの中身から探し出し…なんて手間もないですし、容量の大きいファイルをダウンロードして重くなることもありません。
カスタマイズもweb上でサクサク終わるので、最低限の操作でアイコンをゲットできます。
線の太さ、サイズ、欲しいものだけを選択できる
Sketchファイルにも対応「Evericons」
| Get a free icons pack for your next project Evericons - Evericons |
Evericonsはフリーアイコンセットです。400個以上ものアイコンセットをワンクリックですぐにダウンロードできます。
zipファイルの中身は、全て入ったSketchファイルとそれぞれのSVG、PNGファイル（24pxと64pxサイズ）が入っており、どんな場面にでも使いやすくなっています。
サイト上で内容を確認することもできる
とにかく数が多く網羅されている
Sketchファイルの中身はカラフルでカラーも用意されており、ジャンル分け・レイアウトが非常に凝っています。
アイコン自体もパス分けされており、アイコンの構造が知りたかったりトレースがしたいSketch初学者にも役立つ内容なのではないかと思います。
HTMLで簡単に細かいカスタマイズができる「Vivid.js」
| JavaScript library which is built to easily customize and use the SVG Icons Vivid.JS - SVG Icons Library - |
アイコンを使うシチュエーションは、デザインカンプを作るときだけではありません。エンジニアでも、コードをいじるだけでサイズや色の調整が簡単にできるキットがありました。
フラットでシンプルなアイコンがコード上で簡単に管理できるので、エンジニアにとっては分かりやすいかもしれません。
マニュアルもしっかりと用意されているので、使い方がわからない場合でも必要に応じて習得できます。
| Everything you need to know about Vivid.JS to Kickstart with SVG Icons. Docs - SVG Icons Library - Vivid.js - |
種類も90以上揃っており随時リスエクトも受け付けているそうなので、もし欲しいアイコンがない方は問い合わせてみてはいかがでしょうか。
変わり種のアイコンキット。
いかがでしたでしょうか。今回はデザイナーだけではなく、エンジニアも使いやすそうなアイコンキットも紹介してみました。
手書きやフラットデザインなど、選んだり探したりするだけで一苦労ですが、ニーズに合わせてうまく見つけられるサービスも出てくれると嬉しいですね。
※版権や詳しい使い方は各サイトをご確認の上でご使用ください。