こいつ、動くぞ！ 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

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

オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。

Boxicons
Boxicons -GitHub

• Boxiconsの特徴
• Boxiconsの使い方
• Boxiconsを実際に使ってみた

Boxiconsの特徴

Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。

けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ強化されたので、再び紹介します。

アイコンの一覧

Boxiconsは、個人でも商用プロジェクトでも無料で利用できます。SVGアイコンはCC 4.0、アイコンフォントはSILOFL 1.1、その他はMITライセンスとなっており、帰属は必須ではないがあると嬉しい、とのことです。
詳しくは、ライセンスをご覧ください。

Boxiconsの使い方

Boxiconsの使い方は、簡単です。

Step 1: 外部ファイル

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

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

Step 2: HTML

あとは、HTMLで記述するだけでアイコンを利用できます。
.bxを付与し、.bx-wink-smileのようにアイコンを指定します。

Boxiconsを実際に使ってみた

Boxiconsには、さまざまなオプションが用意されています。
このページにアイコンを設置してみました。

アイコンのサイズ

CSSのfont-sizeでサイズを定義でき、デフォルトは親のfont-sizeを継承します。また、キーワードで、アイコンのサイズを変更することもできます。

アイコンのカラー

カラーもサイズと同様に、CSSで定義できます。

アイコンの向き

キーワードで、アイコンの向きを変更できます。

リストのアイコン

新機能です。
リスト要素に.bx-ulを付与し、<li>内にアイコンを含めることができます。

• リストのアイテム 1
• リストのアイテム 2
• リストのアイテム 3
• リストのアイテム 4
• リストのアイテム 5

固定幅のアイコン

新機能です。
固定幅用のクラス.bx-fwを付与すると、固定幅のアイコンを表示できます。

Twitter
Facebook
Pocket
Home
Mail

ちなみに、.bx-fwがない場合は下記の通り。

Twitter
Facebook
Pocket
Home
Mail

アイコンのボーダー

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

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

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

ホバー時にアニメーション

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