以前の記事アプリのアイコンデザインの参考にしたいサイト12選でアプリのアイコンのデザインの参考になりそうなサイトを紹介したのですが、今回はオンライン上で無料で配布されているフリーのアイコン素材サイトOrion Icon Libraryを紹介したいと思います。
関連 これは便利！コピペで使えるCSSのみで作られたアイコン500+ CSS Icons
目次
Orion Icon Libraryとは？
Orion Icon Libraryは、6000以上の中から好きなアイコンを選んで、線の太さや大きさを変更でき、しかも色を編集することもできるフリーのアイコン素材配布サイトです。また、同じアイコンでも「線、塗りつぶし、カラー、フラット」と4種類のデザインの中から選んで編集することができるようになっています。
例えば、線の太さや色をこのようにすべてWebサイト上で変更できます。編集したアイコンはSVGやPNGデータでダウンロードして使うことはもちろん、Data URIスキームをコピーして使うこともできます。
これまでのフリーのアイコン配布サイトと違ってカスタマイズできるという意味では少し進化したサイトと言えます。プレゼン資料に使いたい場合には凄く便利ではないかと思います。
ライセンスについて
基本的に個人・商用で利用できるロイヤルティフリーとなっています。個人利用においては、バックリンクを貼る必要はありませんが、個人でも商用に繋がる場合にはバックリンクを貼る必要があります。
有料会員であれば下記のようなプランが用意されており、商用利用の場合にはバックリンクを貼る必要はありません。
- $5／月額
- $10／年額
- $189／永久ライセンス
また有料会員の場合には、さらに2500以上のアイコンが使えるようになります。さらにラインセンスについての詳細は下記リンクを参照してください。
https://orioniconlibrary.com/license
使い方
さくっと簡単な使い方を紹介します。なお、会員登録をしなくても利用することは可能です。
まずは下記サイトにアクセスします。
https://orioniconlibrary.com/
アクセスしたら画面右上に「App」というメニューがありますので、クリックします。そしたら、「Icon Packs」のプルダウンから好きなアイコンのカテゴリを選択します。ここではサンプルでフードのアイコンを選択。
そうしたらアイコンの一覧が表示されますが、画面上部に「Line、Solid、Color、Flat」と4種類のデザインセットが用意されていますので、クリックして使いたいタイプを選択してくください。後は、使いたいアイコン上をマウスオーバーし、鉛筆アイコンをクリックして編集モードにします。今回はサンプルでColorのドーナツを編集したいと思います。なお、マウスオーバーした時にProと表示されるアイコンは編集はできますが、ダウンロードはできません。
編集モードになったら、サイドメニューに色々と編集するためのツールがありますので、クリックでアイコンを編集できるので色々と試してみてください。特にこの中では先程も紹介したようにカラーパレットを使ってアイコンの色を編集することができます。サンプルでは枠線の色を濃い紫に変更しています。
アイコンの色は予め数種類が編集できるようになっています。カラーパレット右横の「+」をクリックして追加してみましょう。
追加されたカラーパレットを使って色を変更してみました。イマイチ、失敗したなと思ったらカラーパレットの下にある「Restore」で色をリセットすることができます。
後は、ファイルフォーマットのPNGを選択して、サイズを指定したらダウンロードをクリックです。
ちなみに、無料で利用の場合アイコンは25個までコレクションに追加して保存することができます。
関連記事
