レビュー

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


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

IconBros
https://www.iconbros.com/

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


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


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


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


・検索して目的のアイコンを探す
目的のアイコンが見つからない時は、トップページの下にある検索ボックスにキーワードを入力して、候補を絞り込む事もできます。今回は検索ボックスなどに使える「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ファイルを解凍してサーバーに置いて使用します。

・関連記事
無料で3万7000種類以上のアイコンが商用利用できる「iconscout」 - GIGAZINE

無料で1000個以上のアイコンフォントがダウンロードできる「WebHostingHub Glyphs」 - GIGAZINE

無料でアイコン・グラフィック素材などをダウンロードできる「Icon Deposit」 - GIGAZINE

無料で商用利用可能でクレジット表示も不要なアイコンをまとめた「IconStore」 - GIGAZINE

無料で商用でも利用OKなWebdesigner Depotのアイコン集「Kaching」「Childish」「Buddycons」「Reflection」などなどとにかくいっぱい - GIGAZINE

無料で5万円分のフォント・アドオン・画像など素材471種セットをダウンロードできる「Inky’s FREE Web Design Bundle」 - GIGAZINE

無料でウェブ上で使えるアイコンがセットになった「Icon Fonts」 - GIGAZINE

GitHubで使用されているアイコンフォント「Octicons」が一般公開を開始 - GIGAZINE

in レビュー,   ネットサービス,   デザイン, Posted by log1f_yi