無料で700種類以上の画像アイコンとアイコンフォントをダウンロード可能で商用利用もOKな「IconBros」

身の回りの物や行動をシンプルに表して、直感的に理解させてくれるアイコンはウェブページやアプリのUIに欠かせないものです。そんなアイコンを700種類以上揃えて無料でダウンロードできるうえに、商用利用も可能で毎週新しいものが追加されているサイトが「IconBros」です。サイトで用意されているアイコンの形式は、画像形式のものと、アイコンを文字として扱うことが可能な「アイコンフォント」の2種類です。

IconBros
https://www.iconbros.com/

IconBrosにラインナップされているアイコンは、アプリ作成やホームページ制作に使えそうなシンプルなものが多く、カラーで表情豊かな丸顔のアイコンや……

白黒で日用品などを表したアイコン

そして、アプリ作成に使えそうな再生やダウンロードを示すアイコンなど。アイコンのアップデート情報は公式のTwitterとfacebookでチェックできます。

◆画像ファイル形式のアイコンをダウンロードする
トップページに最新の日付順でアイコンが敷き詰められており、サムネイルの下には掲載された日数が表示されています。サムネイルをクリックすると、アイコンの詳細ページに移動してダウンロードできます。

・検索して目的のアイコンを探す
目的のアイコンが見つからない時は、トップページの下にある検索ボックスにキーワードを入力して、候補を絞り込む事もできます。今回は検索ボックスなどに使える「loupe(虫眼鏡)」を入力しました。

アイコンをダウンロードする時は、最初に「I agree to the License Agreement」をクリックしてチェックを入れます。そのまま下の「SVG」をクリックすると、アイコンをSVG形式の画像ファイルでダウンロードできます。

チェックを入れた後に、下の「PNG」をクリックするとアイコンをPNG形式の画像ファイルでダウンロードが可能。

◆ウェブサイト作成で使用できるアイコンフォントをダウンロードする
IconBrosにはウェブページで使用できるアイコンフォントも用意されています。なお、アイコンフォントのダウンロードにはアカウントの作成が必要です。

・アイコンフォントを探す方法
トップページで「Font Collections」をクリック。

アイコンフォントが一覧で表示され、サムネイルで探すことができます。

一覧の上に表示されている入力ボックスの「Filter...」にキーワードを入力すると名前でフィルタリングして候補を絞る事が可能。

・アカウントの作成
アイコンフォントをダウンロードするためにはアカウントの作成が必要。最初にトップページで「Sign Up」をクリック。

メールアドレスと任意のパスワードを入力して「Create your account」をクリック。

入力したメールアドレスを確認すると、IconBrosから件名「Confirmation instructions」でメールが届いていました。メールの文面に書かれているリンク「Confirm my account」をクリック。

リンクを開くと、IconBrosのログイン画面に移動します。ログインフォームの上部に、入力したメールアドレスが確認されたことを示す文面「Your email address has been successfully confirmed.」が表示されています。

登録したメールアドレスとパスワードを入力して「Log in」をクリックするとログインできます。

◆アイコンフォントに必要なファイルをダウンロード
・アイコンフォントを使うのに必要なファイルをZIPファイルでダウンロード
作成したアカウントでログインが完了したら「Font Collections」をクリック

「Download Linear Basic Font」をクリック。

アイコンフォントを表示するのに必要なファイルをZIP形式の圧縮ファイル「iconbros.zip」でまとめてダウンロードできます。

・アイコンフォントのHTMLタグを調べる
「Font Collections」のページで使いたいアイコンフォントのサムネイルをクリック。

アイコンフォントにそれぞれ割り振られたHTMLタグと、CSSで指定されている文字コードが表示されており、ダウンロードしたCSSファイルなどが入ったZIPファイルを解凍してサーバーに置いて使用します。