Webデザインで使えるアイコンの紹介です。
Webデザインで 利用するアイコンと言えば、以前はpng形式の画像が主流でしたが 近年ではベクター形式のアイコンが多くなりました。 bootstrap や foundation などの人気CSSフレームワークにはデフォルトで用意されています。
一番利用されているWebアイコンは 文句なしに font-awesomeですが、それ以外にも多種多様なアイコンがオープンソース化されリリースされています。
そんな Webデザインで簡単に使える font-awesome 以外のアイコンを 7種類ピックアップしてみました。
iconoは 全てCSSで書かれたWebアイコンで 合計133種類のアイコンが用意されています。SVGやフォントが必要無いため ライブラリ本体のサイズも43KBと軽いのが特徴です。
また、sass, less, stylusのアイコンファイルも用意されているので プロジェクトを問わず導入できそうです。
iconoの使い方
# コマンドライン上でライブラリ本体を入手する場合
# npm
npm i icono --save
# yarn
yarn add icono
# bower
bower install icono
<!-- ライブラリの読み込み -->
<link rel="stylesheet" href="icono.min.css">
<!-- CDNを通して読み込む場合 -->
<link rel="stylesheet" href="http://icono-49d6.kxcdn.com/icono.min.css">
<!-- HTML上で使う場合 -->
<i class="icono-home"></i> <!-- 家のアイコンを表示 -->
<i class="icono-camera"></i> <!-- カメラのアイコンを表示 -->
iconoはデフォルトではグレーが掛かった色をしていますが、下記のCSSスニペットのように ワイルドカードで iconoのクラスを指定すれば 一括でアイコンの調整が可能です。
i[class^="icono-"], i[class*=" icono-"] {
/* color:red */
}
icono : 公式ページ / レポジトリ
material-design-icons は Googleが開発しているオープンソース の アイコンセットです。執筆時点で923種類のアイコンが用意されており、Webページよりもスマホアプリ内で目にすることが多いかもしれません。
アイコンセットをセルフホスティング( 合計で60MB超 )することも可能ですが、GoogleのCDNを通じて手軽にライブラリを読み込むこともできます。
Material-design-iconsの使い方
<!-- material-design-iconsをCDNで読み込み -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- material-design-iconsをHTML上で使う場合 -->
<i class="material-icons">face</i> <!-- 顔のアイコンを表示 -->
material-design-iconsは アイコンの大きさがデフォルトで24pxに固定されています。アイコンの大きさの変更や その他 調整をする時はCSS上で 'material-icons' クラスを定義する必要があります。
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* アイコンのサイズ */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* WebKit用の設定 */
-webkit-font-smoothing: antialiased;
/* Safari、Chrome用の設定 */
text-rendering: optimizeLegibility;
/* Firefox用の設定 */
-moz-osx-font-smoothing: grayscale;
/* IE用の設定 */
font-feature-settings: 'liga';
}
material-design-icons : 公式ページ / ユーザーガイド
ioniconsはモバイル・アプリケーションを作成する Framework「ionic」に含まれているアイコンセットです。執筆時点で734種類のアイコンが用意されています。
レポジトリ内には「png」「svg」形式のアイコンも用意されているので、画像作りの際の素材としても活躍しそうです。
Ioniconsの使い方
# コマンドライン上でライブラリ本体を入手する場合
# npm
npm i ionicons --save
# yarn
yarn add ionicons
# bower
bower install ionicons
<!-- ライブラリの読み込み -->
<link href="/ionicons/css/ionicons.min.css" rel="stylesheet">
<!-- cdnでライブラリの読み込み -->
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- HTML上で使う場合 -->
<i class="ion-social-html5-outline"></i> <!-- HTML5のロゴアイコンを表示 -->
ionicons : 公式ページ / レポジトリ
weather-iconsは天気専用のアイコンセットです。執筆時点で222種類の天気に関するアイコンが用意されています。使い所は限られてきますが 細かい天気情報を扱うようなシステムには最適なアイコンセットです。
weather-iconsの使い方
# コマンドライン上でライブラリ本体を入手する場合
# npm
npm install weather-icons --save
# yarn
yarn add weather-icons
# bower
bower install weather-icons
<!-- ライブラリの読み込み -->
<link href="https://unpkg.com/weather-icons/css/weather-icons.min.css" rel="stylesheet">
<!-- CDNを通してライブラリを読み込む場合 -->
<link href="https://unpkg.com/weather-icons/css/weather-icons.min.css" rel="stylesheet">
<!-- スモッグアイコンの表示 -->
<i class="wi wi-smog"></i>
whether-icons : 公式ページ / レポジトリ
devicons は ITデベロッパーにお馴染みのロゴ等が集まったアイコンセットです。執筆時点では191種類のアイコンが用意されてます。「go」「ruby」「jenkins」「Laravel」など、プログラミング言語や フレームワーク、開発ツールなどのアイコンが揃っています。
プロジェクトのAPIドキュメントページや 仕様書作成時 ( *SVGファイルも用意されています ) に使ったりなど、Web以外にも 約に立つところが多そうです。
deviconsの使い方
# コマンドライン上でライブラリ本体を入手する場合
# npm
npm install devicons
# yarn
yarn add devicons
# bower
bower install devicons
<!-- ライブラリの読み込み -->
<link href="/devicons/css/devicons.min.css" rel="stylesheet">
<!-- CDNを通してライブラリを読み込む場合 -->
<link href="https://cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css" rel="stylesheet">
<!-- HTML上で使う場合 -->
<i class="devicons devicons-git"></i> <!-- gitのロゴを表示 -->
devicon : 公式ページ / cheatsheatページ / レポジトリ
font-linux は主要な Unix系OS が集められたアイコンセットです。Linux のマスコットキャラクター「tux」を始め、「Ubuntu」「centos」「linuxmint」「raspberry-pi」など 合計 30種類の ディストリビューションのロゴが揃っています。
font-linuxの使い方
# コマンドライン上でライブラリ本体を入手する場合
# npm
npm install font-linux
# yarn
yarn add font-linux
<!-- ライブラリの読み込み -->
<link href="font-linux/assets/fontlinux.css">
<!-- CDNを通してライブラリを読み込む場合 -->
<link href="http://cdn.rawgit.com/Lukas-W/font-linux/v0.9/assets/font-linux.css" rel="stylesheet">
<i class="fl-centos"></i> <!-- centosのロゴを表示する場合 -->
font-linux : 公式ページ / レポジトリ
flag-icon-cssは 世界中の国旗が集められたアイコンです。ボタン一つで " 日本語 -> 英語 へ切り替え " のような i18が必要なサイトのインディケーターとして使うと便利そうです。
flag-icon-cssの使い方
# コマンドライン上でライブラリ本体を入手する場合
# npm
npm install flag-icon-css
# yarn
yarn add flag-icon-css
# bower
bower install flag-icon-css
<!-- ライブラリの読み込み -->
<link href="/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<!-- CDNを通してライブラリを読み込む場合 -->
<link href="https://unpkg.com/flag-icon-css@2.8.0/css/flag-icon.min.css" rel="stylesheet">
<!-- HTML上で使う場合 -->
<i class="flag-icon flag-icon-gr"></i> <!-- ギリシャの国旗 -->
<i class="flag-icon flag-icon-jp"></i> <!-- 日本の国旗 -->
<i class="flag-icon flag-icon-us"></i> <!-- アメリカの国旗 -->
flag-icons : 公式ページ / レポジトリ
以上がWebデザインで簡単に使えるアイコンの紹介でした。
iconoを除くアイコンセットは画像(svg)ファイルも用意されているので、Web以外でも ドキュメントやスライドショー作成時に利用すると 一味違った面白いことができあそうです。
また、Webpack上で使う場合の記事も過去に投稿しているので、そちらも合わせてご覧ください。
過去記事 : 「webpack2でテンプレート用の複数ライブラリを1CSSファイルにビルドする」
