目次
- はじめに：そのアイコン、本当に重くないですか？
- 結論：アイコンは「SVGで必要分だけ」が最適解
- 無料アイコン素材を選ぶ基準
- 1. Heroicons
- 特徴
- 実務感想
- 2. Bootstrap Icons
- 特徴
- 向いているサイト
- 3. Remix Icon
- 特徴
- 4. Feather Icons
- 特徴
- 5. Fluent UI Icons
- 6. Material Symbols
- 特徴
- 7. Tabler Icons
- 特徴
- 8. Line Icons（無料版）
- 9. Iconoir
- 10. IcoMoon
- 特徴
- 11. Simple Icons（ブランドロゴ）
- 12. Unicode記号（最軽量）
- SVGを使うべき理由（技術的解説）
- PNGとの違い
- 実務でおすすめの使い方
- ① SVG直書き（最強）
- ② 疑似要素で背景指定
- ③ imgタグ使用
- よくある失敗例
- DevToolsでの確認方法
- スマホ崩れ・横スクロール問題
- 内部リンク想定：関連知識
- まとめ：もう重いアイコンは卒業
はじめに：そのアイコン、本当に重くないですか？
昔は「とりあえずFont Awesomeを読み込む」が定番でした。
私も何も考えずCDNを貼っていました。
でもあるとき、
Lighthouseでパフォーマンスを測ったら――
使っていない数百個のアイコンまで読み込んでいることに気づいたんです。
そこから、SVG直書き派に変わりました。
今のWeb制作は、
- 必要なアイコンだけ読み込む
- 軽量なSVGを使う
- CSSで色やサイズを制御する
これが基本です。
この記事では、
実務でも安心して使える無料アイコン素材を厳選して紹介します。
結論：アイコンは「SVGで必要分だけ」が最適解
現在の最適解はこれです。
✔ SVG形式
✔ 直接埋め込み可能
✔ 商用利用OK
✔ CSSで色変更可能
✔ 不要なファイルを読み込まない
Font Awesomeの代替は、もう十分あります。
無料アイコン素材を選ぶ基準
初心者が迷わないために、まず基準を整理します。
- SVG形式でダウンロード可能
- パスがシンプルで編集しやすい
- 商用利用OK
- 登録不要
- ライセンスが明確
特に重要なのは SVG対応。
PNGではCSSで色変更できません。
1. Heroicons
特徴
- Tailwind公式
- ミニマルで統一感あり
- SVG即使用可
実務感想
管理画面系と相性抜群。
線の太さがちょうどいい。
2. Bootstrap Icons
https://icons.getbootstrap.com/
特徴
- 2,000以上
- Webフォント対応
- シンプルで汎用性高い
向いているサイト
コーポレート、ブログ全般。
3. Remix Icon
特徴
- 丸みのある優しいデザイン
- UI向けに最適化
- SVGすぐ使える
迷ったらここ。
バランスがいいです。
4. Feather Icons
特徴
- 極細ライン
- 軽量
- シンプル設計
個人サイトやLP向き。
5. Fluent UI Icons
Microsoft系UIに最適。
視認性が高い。
6. Material Symbols
https://fonts.google.com/icons
特徴
- Google公式
- 太さ変更可能
- Webフォント形式あり
アプリ系UIに強い。
7. Tabler Icons
特徴
- 4,600以上
- 太さ調整可
- カスタマイズ性高い
種類の多さは圧倒的。
8. Line Icons（無料版）
丸みのあるデザイン。
LPとの相性良し。
9. Iconoir
線の太さ変更可能。
デザインの統一感が出しやすい。
10. IcoMoon
特徴
- 必要なアイコンだけWebフォント化
- 読み込み最小限
- 自作SVGも登録可
パフォーマンス重視ならこれ。
11. Simple Icons（ブランドロゴ）
SNSロゴ専用。
ブランドカラーを保持している点が強み。
12. Unicode記号（最軽量）
HTML直書き可能。
例： ● ★ → ▼
画像不要＝最軽量。
SVGを使うべき理由（技術的解説）
PNGとの違い
PNG：
- 画像扱い
- 色変更不可
- 解像度依存
SVG：
- ベクター
- CSSで色変更可能
- 軽量
- 拡大しても劣化なし
実務でおすすめの使い方
① SVG直書き（最強）
<svg width="20" height="20" stroke="#4087bf" fill="none">
<path d="..."/>
</svg>CSSで色変更可能。
② 疑似要素で背景指定
.btn::after {
content: "";
background: url('/img/icon.svg') no-repeat center/contain;
width: 16px;
height: 16px;
display: inline-block;
}装飾向け。
③ imgタグ使用
<img src="/img/icon.svg" alt="メールアイコン">SEOを考えるならalt必須。
よくある失敗例
- アイコンフォントを丸ごと読み込む
- PNGで色変更しようとする
- SVGをimgで読み込んで色変更できないと悩む
- アイコンの統一感がない
DevToolsでの確認方法
- Networkタブでファイルサイズ確認
- SVGのサイズを確認
- 不要なフォントが読み込まれていないか確認
パフォーマンス改善はここから。
スマホ崩れ・横スクロール問題
- SVGのwidth未指定
- viewBoxが不適切
- inline-blockの余白問題
レスポンシブ時は必ず確認。
内部リンク想定：関連知識
- SVGの基本構造
- CSS疑似要素の使い方
- Webパフォーマンス最適化
- フォントとアイコンの違い
まとめ：もう重いアイコンは卒業
今のWeb制作は、
✔ 必要な分だけ
✔ SVGで軽量
✔ CSSで制御
これが基本です。
特におすすめは：
- Remix Icon（万能型）
- Heroicons（シンプル特化）
- Tabler Icons（種類重視）
Font Awesomeが悪いわけではありません。
でも「最適」とは限らない。
軽く、速く、自由に。
それが今のアイコン選びの正解です。