これ、たぶん2025年に聞いた「いちばんデカい誤解」なんだけど。
アイコンは飾りって思ってる人、まだ多い。
違う。わりと残酷に違う。
アイコンはUIの「言語」だから、雑に選ぶと読み違えが起きるし、逆に揃うと説明文が消える。Next.jsで作ってると、そこが露骨に効いてくる。
結論（先に言う）：Next.jsのアイコン選びは「React対応・SVG/JSX・tree-shaking・ライセンス」の4点で決まり、用途別にHeroicons/Lucide/Material Symbols/Iconifyなどを使い分けると実装とデザインの揉め事が減る。
- まず見る：React/Next.js公式の導入手段（コンポーネント or SVG）
- 地味に痛い：tree-shakingできないとバンドルが太る
- 揉める所：線の太さ・角の丸み・塗り/線の統一
- 最後に刺さる：ライセンス（商用OKか、表記が要るか）
- 困ったら：Iconifyで「他セットから持ってくる」逃げ道
まず現場で揉めるのは「見た目」じゃなくて運用だ
Next.jsでアイコン運用を安定させるには、SVG/Reactコンポーネント供給と、スタイルの一貫性（stroke/filled/duotone）が揃うライブラリを選ぶ必要がある。
デザインの話っぽいのに、実際は運用の話。
アイコンって、増える。勝手に増える。
最初は「検索アイコンだけ」だったのが、通知、設定、外部リンク、ダウンロード…って増殖して、気づくと画面のそこら中に小さい意思表示が並ぶ。
で、統一されてないと。
ユーザーは「なんか変」としか言わない。
こっちは「strokeが…」とか言いたいのにね。
経験則：線アイコン（outline）と塗りアイコン（solid）を混ぜると、UIが急に落ち着かなくなる。地味に効く。
あと、Next.jsだとコンポーネントとして扱えるかが大きい。JSX/TSXで持てると、色やサイズをpropsで統一できる。
逆にSVGをコピペ運用にすると、どこかで「同じアイコンなのに線幅が違う事件」が起きる。起きた。何回も。
用途で切る：この15個、全部「刺さる場所」が違う
2025年のNext.js向けアイコンライブラリは、Heroicons・Lucide・Material Symbols・Iconifyなどの定番を軸に、デザイン/企業向け/量で分岐する。
ここから先、ちょっと雑に言う。
だって「最強の一個」って、ないから。
あるのは「あなたのプロダクトの性格に合うやつ」。それだけ。
1) Lineicons：オールインワン系。30,000+（うち4,000+無料）、10スタイル、SVG/JSX/TSX/WebP/Base64/NPM/HTMLまで揃えてくる。FigmaプラグインやCDNもある。
こういうの、便利なんだよ。便利すぎて怖い。
「探せば何でもある」って、逆に意思決定を遅くするから。沼。
2) Heroicons：Tailwind CSSの空気を吸ってる人向け。316+で、outline/solidが素直。Tailwindユーティリティと相性が良い。
Tailwindの作者側が出してる、っていう安心感はデカい。
でも安心感って、麻酔にもなる。
3) Feather Icons：280+、SVGベース、軽い、線がきれい。ミニマルUIの定番。
シンプルなツールバーとか、ナビとか、そういう所で生きる。
静か。
4) Lucide：Featherのコミュニティフォーク。1,500+まで増えて、更新も速い。React/Vue/Svelte対応、tree-shakable。
Lucideは「増えたFeather」って覚え方でだいたい合ってる。
…たぶんね。
5) Material Icons / Material Symbols：Google系。3つのビジュアルスタイル、SVG/アイコンフォント/Reactコンポーネント。アクセシビリティやCSS変数も視野に入ってる。
アプリっぽいUI、特にモバイル寄りの雰囲気だと強い。
ただ、Material感が出る。出すぎる時もある。
6) Ant Design Icons：企業ダッシュボード寄り。780+、Reactファーストでantdと噛み合う。tree-shakingも考慮。
「業務っぽさ」が欲しいなら、早い。
早いっていうか、最短。
7) MUI Icons：MUI利用者のためのMaterial Designアイコン群。2,000+、Reactコンポーネントでprops調整しやすい。アクセシビリティも織り込み。
MUI入れてるなら、変に寄り道しない方が平和なことが多い。
平和。大事。
8) Just Icons：太めで機能的。5,000+のオープンソース、SVG/JSX対応。管理画面やダッシュボードで映える。
線が強いと、画面が締まる。
締まりすぎて圧が出る時もあるけど。
9) Phosphor Icons：デザイン寄り。9,000+、bold/light/fill/duotone、重みをpropsで切り替えたり、アニメーションも扱える。
ここ、テンション上がる人は上がる。
動くアイコン、ちょっとした瞬間に「ちゃんと作ってる感」を出せるから。
ただし、やりすぎると目が疲れる。ユーザーの目が。
10) Font Awesome：2025でもまだ強い。ブランド/ソーシャル系が厚い。React/Next.jsサポートも公式にあるし、SVGとフォントの両モードで運用できる。
「とりあえずロゴ系はFont Awesome」みたいな現場、普通にある。
普通にね。
11) Iconify：単体ライブラリというよりゲート。200+のライブラリから200,000+アイコンにアクセスできる。lazy-loadingやtree-shakingの話も出てくる。
これ、便利すぎて危険枠その2。
どのセットのアイコンを使ったか分からなくなると、統一感が死ぬ。
死ぬ。ほんとに。
12) Bootstrap Icons：2,000+、MITライセンス、どのフレームワークでも使いやすい。Next.jsでも普通にいける。
Bootstrap使ってなくても、アイコンだけ借りるのは全然アリ。
こういう「素直さ」は助かる。
13) Streamline Icons：プレミアム品質寄りで、業界カテゴリが強い。12,000+の無料アイコン（Next.js向けとして紹介されがち）、Figma/SVG/PNG/Reactもある。
チームで「見た目の精度」を揃えたい時に出番が来る。
ピクセルが揃ってるやつ。あれ。
14) CoreUI Icons：管理画面向け。4,200+、linear/duotone/brand、SVG+React、フットプリント小さめでアクセシビリティも意識。
バックオフィスとか、社内ツールとか、そういう場所の空気に合う。
地味だけど、効く。
15) もう一回まとめると：「ミニマル系（Feather/Lucide）」「フレームワーク密着（Heroicons/MUI/Ant）」「量と汎用（Lineicons/Iconify/Font Awesome）」「デザイン重視（Phosphor/Streamline）」って分かれ方がしっくり来る。
もちろん例外はある。
例外だらけだけど。
アイコンは小さいのに、プロダクトの人格を決める。雑に混ぜると、人格が分裂する。
Next.jsで地味に詰まるポイント：バンドルとアクセシビリティ
Next.jsでは、アイコンをReactコンポーネントとしてimportし、tree-shakingで未使用アイコンを落とせる設計がバンドル最適化に直結する。
ここ、テンション低めに言うけど。
後で泣くやつ。
バンドル：アイコンって「1個ずつ使ってるつもり」でも、importの仕方が雑だとごっそり入る。気づいたら数百KB〜みたいな話、普通にある。
特に、まとめてimportする書き方。
やりがち。
アクセシビリティ：装飾目的ならaria-hidden、意味を持つならラベル（titleやaria-label）…みたいな基本が、結局いちばん効く。
日本の案件だと、JIS X 8341-3（Webアクセシビリティの文脈）に触れる場面もあるし、自治体/大学/公共寄りは特に空気が変わる。
急に真面目になる。なるしかない。
ツール：私はLighthouse（Chrome DevTools）で「未使用JSっぽい気配」と、アクセシビリティの指摘を先に殴りに行くことが多い。叩かれる前に自分で叩く。
それと、Storybookを使ってるチームだと「アイコン一覧ページ」を作ると揉め事が減る。視覚で殴れるから。
スクショ用：アイコンライブラリ自分チェック表（地獄を避ける）
Next.jsのアイコン選定は、導入方法・tree-shaking・スタイル統一・ライセンス・デザイナー連携を同時に満たすチェックが必要だ。
はい、ここだけは実用品。
これ、後で自分を助ける。
- 導入形態：Reactコンポーネント（JSX/TSX）で配布されてる？ それともSVG配布が主？
- tree-shaking：「使ってないアイコン」がビルドで落ちる設計？ importが粒度細かい？
- スタイル一貫：outline/solid/duotoneが混ざっても破綻しない？ 線幅が揃う？
- カスタム性：size/color/stroke/weightをpropsで触れる？（Phosphorみたいにweight切替できると強い）
- アクセシビリティ：aria-hidden/title/aria-labelの運用ルールを決められる？
- デザイン連携：FigmaプラグインやFigma向けアセットがある？（Lineicons/Streamlineはこの手が強い）
- ライセンス：MIT系で気楽？ 商用で表記が必要？ チームの法務が嫌がるタイプ？
- ブランド系：SNS/決済/企業ロゴが必要ならFont Awesome等の厚みがある？
- 例外対応：どうしても足りない時の逃げ道（Iconifyなど）を用意してる？
「無料で全部いける」で始めると、だいたい途中で誰かが静かにキレる。キレる人は大抵、最後に片付ける人。
日本の現場だと、ここで話が変になる（ちょい愚痴）
日本のWeb制作では、社内稟議・JIS X 8341-3対応・Figma運用の有無で、採用できるアイコンライブラリの現実解が変わる。
突然だけど、稟議ってさ。
UIの話を「購入申請の文章」に翻訳する作業が発生するんだよね。
その瞬間、デザインの温度が下がる。
さーって。
通路の話：日本だと、制作会社や社内のフロントが集まる場所って、結局GitHubと、Figmaと、あとSlack（かTeams）なんだよね。そこで「このアイコンどこから？」が追える形じゃないと、運用が壊れる。
壊れるっていうか、静かに腐る。
環境の話：地味に多いのが「社内端末が古い」「ブラウザ縛りがある」。アイコンフォントで逃げたくなる瞬間はある。でもフォントはフォントで、表示やアクセシビリティの癖が出る。
どっちに転んでも、癖。
文化の話：「統一感が大事」って言うわりに、最後に突然「この1個だけ他社のロゴ入れて」みたいな話が来る。
来る。来るんだよ。
そういう時にIconifyみたいな抜け道があると、精神が少し守られる。
最後に：小さい挑戦、やってみて（逃げないやつ）
Next.jsのUI品質は、同一ライブラリのアイコンで30個以上を統一運用できるかどうかで、体感の完成度が変わる。
で、ここで終わり…に見せかけて。
小さい挑戦。
挑戦：あなたのNext.jsプロジェクト（または作りかけでもOK）で、同じライブラリのアイコンを「30個」拾って、全部にルールを当ててみて。
- サイズは固定（例：20 or 24）
- 色はトークン経由（直書き禁止）
- 装飾アイコンはaria-hidden、意味があるならラベル付け
- outline/solidを混ぜない（混ぜるなら理由を書く）
30個やると、だいたい途中で「あ、これ無理だ」って瞬間が来る。
その時に、どのライブラリへ逃げるか。
そこが、あなたのプロダクトの性格。
