こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons

400種類以上のアイテムが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。

MITライセンスで、個人でも商用でも無料で利用できます。また、アイコンフォントやSVGとして利用できるので、かなり便利だと思います。

Box Icons
Box Icons -GitHub

• Box Iconsの使い方
• Box Iconsを使ってみた

Box Iconsの使い方

Box Iconsの使い方は、簡単です。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

「boxicons.min.css」を自分のサーバーにアップロードする場合は、fontsとsvgフォルダも一緒にアップロードします。

Step 2: HTML

あとは、HTMLで記述するだけでアイコンを利用できます。
「bx」は必ず必要で、「bx-smiley-happy」のようにアイコンを指定します。

Box Iconsを使ってみた

このページにBox Iconsを設置してみました。

アイコンのサイズ

キーワードを加えることで、アイコンのサイズを変更できます。

アイコンのカラー

カラーは自分でclassを用意して、適用します。

アイコンの向き

キーワードを加えることで、アイコンの向きを変更できます。

アイコンのボーダー

ボーダーは角丸とサークルが利用できます。

アイコンのアニメーション

アイコンをアニメーションさせるのも簡単、キーワードを加えるだけです。

アイコンのホバー

ホバー時にアニメーションを適用することもできます。