アイコンの線幅を 1.5px で揃えるだけで世界が変わる

違和感の正体

ヘッダにアイコンが並んでいて、なぜか「ガチャガチャ」した印象になる時。多くの場合、原因は線幅。

揃える基準

• 24×24 のアイコン → stroke-width: 1.5
• 16×16 → stroke-width: 1.75
• 32×32 以上 → stroke-width: 1.25

アイコンサイズが小さくなるほど、相対的に線を太くしないと潰れて見えます。

SVG の書き換え

<!-- Before: 異なるアイコンセットからコピペで stroke-width が混在 -->
<svg ... stroke-width="2"> ... </svg>
<svg ... stroke-width="1"> ... </svg>

<!-- After: 統一 -->
<svg ... stroke-width="1.5"> ... </svg>

currentColor を使えば、CSS 側で色を統一できる。

まとめ

アイコンセットを 1 つに絞れない場合でも、stroke-width だけ揃えれば視覚的な統一感はかなり出ます。30 分で世界が変わる。