WEBZINNE

website-buildingのサムネイル

ウェブサイト構築

全部無料!CSSのみで追加出来るアイコンライブラリまとめ

WEBZINNEトピックス編集部のアイコンWEBZINNEトピックス編集部

公開日:2020年10月28日

CSSのみでアイコンを追加出来るアイコンライブラリをまとめました。無料で使えるものだけをピックアップしています。

Fontawesome

アイコンライブラリとして一番有名なのがFontawesome。アイコンの種類が豊富でクオリティが高いため定番アイコンとして利用している方も多いライブラリです。

Fontawesome

CSSだけでアイコンを追加できますが、実態は巨大なフォントなので、CDNを使ってもロードに時間がかかってレンダリングブロックが発生するというデメリットもあります。

HTMLヘッダで読み込むことが出来るCDNのURLは、会員登録をすることで取得することができます。

<script src="https://kit.fontawesome.com/XXX.js"></script>

Bootstrap Icons

Twitter社が公開しているCSSフレームワーク・Bootstrapにはアイコンも付属しています。

Bootstrap Icons

種類も豊富で、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もフリーのアイコンを公開しています。

Material icons

Googleのデザイン言語である「マテリアルデザイン」に準拠したアイコンで、SVGとして利用することも、Webフォントとして利用することもできます。

Webフォントでも80kbほどなので軽量なのが特徴です。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

css.gg

700以上のアイコンを含むアイコンライブラリ。CDNからライブラリ全体をロードすることも可能ですし、個別にアイコンを呼び出しことも可能です。

css.gg

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。

uxwing

SVGやPNGをダウンロードして使うほか、ダウンロードしたライブラリ本体を自分のサーバーから出力してCSSライブラリとして使うことも可能です。

<link rel='stylesheet' href='yourpath/uxwing-iconsfont.css' />

CSSのみで追加出来るアイコンライブラリを見てきました。

どれも高品質で無料で使えるので、Webサイトだけでなくアプリなどでも使えるので、ブックマークしておくのがオススメです!

「ウェブサイト構築」の記事