Webデザインで使えるアイコンの紹介です。

 Webデザインで 利用するアイコンと言えば、以前はpng形式の画像が主流でしたが 近年ではベクター形式のアイコンが多くなりました。 bootstrap や foundation などの人気CSSフレームワークにはデフォルトで用意されています。

一番利用されているWebアイコンは 文句なしに font-awesomeですが、それ以外にも多種多様なアイコンがオープンソース化されリリースされています。

そんな Webデザインで簡単に使える font-awesome 以外のアイコンを 7種類ピックアップしてみました。
 

1. icono

 iconoは 全てCSSで書かれたWebアイコンで 合計133種類のアイコンが用意されています。SVGやフォントが必要無いため ライブラリ本体のサイズも43KBと軽いのが特徴です。

また、sass, less, stylusのアイコンファイルも用意されているので プロジェクトを問わず導入できそうです。

* icono公式ページ

* iconoに用意されているアイコン

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 : 公式ページ / レポジトリ


2. material-design-icons

 material-design-icons は Googleが開発しているオープンソース の アイコンセットです。執筆時点で923種類のアイコンが用意されており、Webページよりもスマホアプリ内で目にすることが多いかもしれません。

 アイコンセットをセルフホスティング( 合計で60MB超 )することも可能ですが、GoogleのCDNを通じて手軽にライブラリを読み込むこともできます。

* Mmaterial-design-icons 公式ページ

* Mmaterial-design-icons に用意されているアイコン

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> <!-- 顔のアイコンを表示 -->

* Webページ上で表示させるとこのようになります

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 : 公式ページ / ユーザーガイド
 

3. ionicons

ioniconsはモバイル・アプリケーションを作成する Framework「ionic」に含まれているアイコンセットです。執筆時点で734種類のアイコンが用意されています。

 レポジトリ内には「png」「svg」形式のアイコンも用意されているので、画像作りの際の素材としても活躍しそうです。

ioniconsの公式ページ

* ioniconsに用意されているアイコン

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のロゴアイコンを表示 -->

* ioniconをWebページ上で表示させるとこのようになります

ionicons : 公式ページ / レポジトリ


4. weather-icons

 weather-iconsは天気専用のアイコンセットです。執筆時点で222種類の天気に関するアイコンが用意されています。使い所は限られてきますが 細かい天気情報を扱うようなシステムには最適なアイコンセットです。

* weather-icons TOPページ

* weather-iconsに用意されているアイコン

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>

* weather-iconsを実際に使うと このように表示されます

whether-icons : 公式ページ / レポジトリ
 

5. devicons

 devicons は ITデベロッパーにお馴染みのロゴ等が集まったアイコンセットです。執筆時点では191種類のアイコンが用意されてます。「go」「ruby」「jenkins」「Laravel」など、プログラミング言語や フレームワーク、開発ツールなどのアイコンが揃っています。

 プロジェクトのAPIドキュメントページや 仕様書作成時 ( *SVGファイルも用意されています ) に使ったりなど、Web以外にも 約に立つところが多そうです。

* devicons TOPページ

* devicons に用意されているアイコン

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のロゴを表示 -->

* djangoやjenkins、その他にGroovyなどのアイコンまで揃っています

devicon : 公式ページ / cheatsheatページ / レポジトリ


6. font-linux

 font-linux は主要な Unix系OS が集められたアイコンセットです。Linux のマスコットキャラクター「tux」を始め、「Ubuntu」「centos」「linuxmint」「raspberry-pi」など 合計 30種類の ディストリビューションのロゴが揃っています。

* font-linux TOPページ

* font-linuxに用意されているアイコン

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に用意されている全てのアイコン

font-linux : 公式ページ / レポジトリ


7. flag-icon-css

flag-icon-cssは 世界中の国旗が集められたアイコンです。ボタン一つで " 日本語 -> 英語 へ切り替え " のような i18が必要なサイトのインディケーターとして使うと便利そうです。

* flag-icon-css TOPページ

* flag-icon-cssに用意されているアイコン

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 : 公式ページ / レポジトリ


Summary

以上がWebデザインで簡単に使えるアイコンの紹介でした。

iconoを除くアイコンセットは画像(svg)ファイルも用意されているので、Web以外でも ドキュメントやスライドショー作成時に利用すると 一味違った面白いことができあそうです。

また、Webpack上で使う場合の記事も過去に投稿しているので、そちらも合わせてご覧ください。

過去記事 : webpack2でテンプレート用の複数ライブラリを1CSSファイルにビルドする

 

この記事のカテゴリ

プログラミング

この記事のタグ

Webデザイン , CSS

Socialシェアボタン

スポンサーリンク