有名どころのブランドロゴのSVGファイルを取り揃えたSimple Iconsというアイコン集があります。
久しぶりに見たら、かなり充実していて、今後も何かとお世話になりそうだったのでメモがてら紹介です。
目次
Simple Iconsとは
Simple Iconsは、IT系のブランドロゴのSVGファイルを集めたアイコン集です。
有名どころなら大抵のロゴアイコンが置いてある
以下のように、有名なWEBサービスのロゴであれば、大抵のものがそろいます。
特に、このSimple Iconsで嬉しいのが、日本でよく使われているサービスなども含まれているということです。
例えば、以下のようなロゴは、Font Awesomeなどにもないので、SVGファイルがあるのはありがたいです。
何せ、これまでは、地味にSVGファイルを自作していたので、上手な人が作ってくれるのは助かります。
ウェブサービス以外にも、以下のような開発環境ロゴなども置いてあります。
ブランドのカラーコードも取得できる
あと、地味に便利なのが、ブランドカラーのHTMLカラーコードを手軽にコピペで取得できるというところです。
ロゴのSVGを利用するときは、大抵はブランドカラーも利用するので調べる手間が省けます。
アイコンフォントの作り方
SVGファイルを取得すると、よりWEB上で使いやすいアイコンフォントにして利用したくなります。
そういった場合は、以下の手順でアイコンフォントを作成すると手軽です。
- Simple IconsのSVGファイルをダウンロード
- IcoMoonでアイコンフォントの作成
以下では、とりあえずすべてのロゴをアイコンフォント化する方法を簡単に紹介します。
Simple IconsのSVGファイルをダウンロード
まずは、GitHub – danleech/simple-icons: SVG icons for popular brandsから、プロジェクトファイル全てをダウンロードします。
利用するSVGファイルは、「icons」フォルダに入っています。
IcoMoonでアイコンフォントの作成
あとは、IcoMoon Appでアイコンフォント化するだけです。
SVGファイルを取り込む
IcoMoonに移動したら、「Import Icons」ボタンをクリックします。
ファイル選択ダイアログが表示されると思うので、すべてのSVGファイルを選択します。
すると、以下のようにIcoMoon内にSVGファイルが取り込まれます。
使用するロゴ選択する
あとは、使用するロゴを以下のようにマウスで選択していきます。
必要なロゴすべてを選択し終えたら「Generate Font」をクリックします。
アイコンの調整とダウンロード
すると、以下のような画面が表示されるので、「Download」ボタンを押します。
それぞれのアイコンをクリックすると、以下のようなダイアログが表示されて、大きさや位置などを調節できます。
ダウンロードしたアイコンフォントをサイトなどで使用する方法は、以下を参照してください。
まとめ
こんな感じで、Simple Iconsさえチェックしていれば、ネットに関するブランドロゴであれば、大抵のものがあるのではないかと思います。
大抵、こういったアイコン集は世界的にメジャーではないブランドロゴは置いてないので、はてなブックマークのロゴまであるのは驚かされました。
というわけで「SNSのシェア・フォローボタンを作成したい」とか「あのウェブサービスのイメージカラーはどんなだったっけ？」なんて場合には、重宝するアイコン集だと思います。
サイト Simple Icons
