有名なWEBサービスブランドロゴのSVGなら大抵ある「Simple Icons」。ブランド色も取得可能。

有名どころのブランドロゴのSVGファイルを取り揃えたSimple Iconsというアイコン集があります。

久しぶりに見たら、かなり充実していて、今後も何かとお世話になりそうだったのでメモがてら紹介です。

スポンサーリンク
レクタングル(大)広告

Simple Iconsとは

Simple Icons

Simple Iconsは、IT系のブランドロゴのSVGファイルを集めたアイコン集です。

有名どころなら大抵のロゴアイコンが置いてある

以下のように、有名なWEBサービスのロゴであれば、大抵のものがそろいます。

特に、このSimple Iconsで嬉しいのが、日本でよく使われているサービスなども含まれているということです。

例えば、以下のようなロゴは、Font Awesomeなどにもないので、SVGファイルがあるのはありがたいです。

何せ、これまでは、地味にSVGファイルを自作していたので、上手な人が作ってくれるのは助かります。

最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。 アイコンフォントは、CSSで色...
前回、LINEのスクエア型アイコンフォントを作成しました。 一応そのとき、はてブのスクエア型アイコンフォントも作成した...
今回は、日本でよく利用されているWEBサービスのアイコンフォントファイルと、使い方をまとめてみました。 でき上がりはこんな感じ...

ウェブサービス以外にも、以下のような開発環境ロゴなども置いてあります。

ブランドロゴは、ブランドそれぞれの所有者に著作権があります。

ブランドのカラーコードも取得できる

あと、地味に便利なのが、ブランドカラーのHTMLカラーコードを手軽にコピペで取得できるというところです。

Amazonのブランドカラーコード

LINEのブランドカラーコード

Dropboxのブランドカラーコード

ロゴのSVGを利用するときは、大抵はブランドカラーも利用するので調べる手間が省けます。

アイコンフォントの作り方

SVGファイルを取得すると、よりWEB上で使いやすいアイコンフォントにして利用したくなります。

そういった場合は、以下の手順でアイコンフォントを作成すると手軽です。

  1. Simple IconsのSVGファイルをダウンロード
  2. IcoMoonでアイコンフォントの作成

以下では、とりあえずすべてのロゴをアイコンフォント化する方法を簡単に紹介します。

Simple IconsのSVGファイルをダウンロード

まずは、GitHub – danleech/simple-icons: SVG icons for popular brandsから、プロジェクトファイル全てをダウンロードします。

GitHubからSimple Iconsのプロジェクトファイルを全てdownload

利用するSVGファイルは、「icons」フォルダに入っています。

Simple IconsのSVGファイルはimagesフォルダに入っている

IcoMoonでアイコンフォントの作成

あとは、IcoMoon Appでアイコンフォント化するだけです。

SVGファイルを取り込む

IcoMoonに移動したら、「Import Icons」ボタンをクリックします。

IcoMoonでインポートボタンをクリック

ファイル選択ダイアログが表示されると思うので、すべてのSVGファイルを選択します。

Simple IconsのSVGファイルをすべて選択する

すると、以下のようにIcoMoon内にSVGファイルが取り込まれます。

Simple IconsのSVGファイルを取り込み完了

使用するロゴ選択する

あとは、使用するロゴを以下のようにマウスで選択していきます。

IcoMoonで使用するロゴを選択

必要なロゴすべてを選択し終えたら「Generate Font」をクリックします。

ロゴの選択を終えたらジェネレートフォントする

アイコンの調整とダウンロード

すると、以下のような画面が表示されるので、「Download」ボタンを押します。

アイコンの調整とダウンロード

それぞれのアイコンをクリックすると、以下のようなダイアログが表示されて、大きさや位置などを

IcoMoonでアイコンフォントの調整

ダウンロードしたアイコンフォントをサイトなどで使用する方法は、以下を参照してください。

以前、簡単ロゴメーカー「Design Rails」でサイトのロゴを作ってみました。 そのとき、ジェネレートされたロゴフ...

まとめ

こんな感じで、Simple Iconsさえチェックしていれば、ネットに関するブランドロゴであれば、大抵のものがあるのではないかと思います。

大抵、こういったアイコン集は世界的にメジャーではないブランドロゴは置いてないので、はてなブックマークのロゴまであるのは驚かされました。

というわけで「SNSのシェア・フォローボタンを作成したい」とか「あのウェブサービスのイメージカラーはどんなだったっけ?」なんて場合には、重宝するアイコン集だと思います。

サイト Simple Icons