使えるCSS3アイコン集

アプリの軽量化に一番効果的なのは画像を使わないことです。単純なアイコンなら、わざわざ画像を使わず、CSS3で実現するのがベストだと思います。

こちらは、使えそうなCSS3アイコンを置いているサイトです。
CSS3 Icons
CSS3 Monochrome Icon Set

モバイルアプリでよく見るメニューアイコン(☰)も上のアイコン集の中にありましたが、 ☰ でも十分かもしれませんね。

ところで設定ボタンとしてよく使われる歯車アイコンですが、どうしても見つけられなかったので自分でサクッと作ってみました。

CSS

...
/*##### ICONS #####*/
div.icon {
  height: 32px;
  width: 32px;
  position: relative;
  margin: 15px;
  overflow: hidden;
  display: inline-block;
}

/* 
 * Gear 
 */
div.icon div.gear:before {
  content: '';
  width: 18px;
  height: 18px;
  background: transparent;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border: 5px dotted #333;
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: -1
}
div.icon div.gear {
  width: 8px;
  height: 8px;
  background: transparent;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 6px solid #333;
  position: absolute;
  left: 4px;
  top: 4px;
}
...

HTML

<div class="icon">
  <div class="gear"></div>
</div>

こんなふうに見えます。

Chrome ver.32 で確認済みです。
※dottedに対応していないFirefox ver.26以下ではタダの丸に見えるかもしれません。

追記 2017/01/22： Bootstrap Icons もいいよ

ここまで紹介しておいてなんですが、今ならBootstrapのIcons(glyphicon)で事足りる場面も多いと思います。(むしろ個人的にはそっちBootstrap Iconsを推奨)