身の回りの物や行動をシンプルに表して、直感的に理解させてくれるアイコンはウェブページやアプリの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ファイルを解凍してサーバーに置いて使用します。