全部無料！CSSのみで追加出来るアイコンライブラリまとめ
WEBZINNEトピックス編集部公開日：2020年10月28日
CSSのみでアイコンを追加出来るアイコンライブラリをまとめました。無料で使えるものだけをピックアップしています。
Fontawesome
アイコンライブラリとして一番有名なのがFontawesome。アイコンの種類が豊富でクオリティが高いため定番アイコンとして利用している方も多いライブラリです。
CSSだけでアイコンを追加できますが、実態は巨大なフォントなので、CDNを使ってもロードに時間がかかってレンダリングブロックが発生するというデメリットもあります。
HTMLヘッダで読み込むことが出来るCDNのURLは、会員登録をすることで取得することができます。
<script src="https://kit.fontawesome.com/XXX.js"></script>
Bootstrap Icons
Twitter社が公開しているCSSフレームワーク・Bootstrapにはアイコンも付属しています。
種類も豊富で、Fontawesomeほど他のサイトと被らないことと、SVGファイルなので必要なものだけ個別にCSSやHTMLからロードできるため、軽量化が可能な点が大きなメリットです。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Material icons(Google Icons)
意外と知られていませんが、Googleもフリーのアイコンを公開しています。
Googleのデザイン言語である「マテリアルデザイン」に準拠したアイコンで、SVGとして利用することも、Webフォントとして利用することもできます。
Webフォントでも80kbほどなので軽量なのが特徴です。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
css.gg
700以上のアイコンを含むアイコンライブラリ。CDNからライブラリ全体をロードすることも可能ですし、個別にアイコンを呼び出しことも可能です。
CDNだけでなく、SVGでの個別ダウンロードも出来るほか、Node.jsプロジェクト用のnpmのライブラリも用意されているため、使い勝手は抜群です。
<link href='https://css.gg/css' rel='stylesheet'>
<link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>
npm i css.gg
uxwing
種類も豊富で他のアイコンライブラリに内容なユニークなアイコンもあるのがuxwing。
SVGやPNGをダウンロードして使うほか、ダウンロードしたライブラリ本体を自分のサーバーから出力してCSSライブラリとして使うことも可能です。
<link rel='stylesheet' href='yourpath/uxwing-iconsfont.css' />
CSSのみで追加出来るアイコンライブラリを見てきました。
どれも高品質で無料で使えるので、Webサイトだけでなくアプリなどでも使えるので、ブックマークしておくのがオススメです！