SVGアイコンの色をCSSで自由に変える方法｜YouTube・Instagramアイコンを例に解説

Posted on by

Webサイトを制作していると、SNSアイコンの色をブランドカラーに合わせて変更したい場面がよくあります。例えば、YouTubeなら赤、Instagramならグラデーションカラーといったように、公式のブランドカラーに合わせることで、視覚的な統一感やユーザーの認識性が高まります。

しかし、通常の <img> タグでSVGを読み込んでいる場合、CSSだけで色を変更することは基本的にできません。この記事では、SVGアイコンの色をCSSで自由に変更する方法を、YouTubeとInstagramの実例を使いながら解説します。

なぜ <img> タグのSVGは色を変えられないのか

例えば次のようなコードでSVGを読み込んでいる場合を考えてみましょう。

<img src="/img/common/youtube.svg" alt="YouTube">

この場合、SVGは「画像ファイル」として扱われます。
つまりCSSは画像の内部構造（pathなど）にアクセスできないため、fillなどの色指定が効きません。

そのため、SVGの色を変更したい場合は SVGをHTMLに直接書く（インラインSVG） 必要があります。

SVGをインライン化するメリット

SVGをHTMLに直接書くことで、以下のようなメリットがあります。

① CSSで色変更できる

fillを使って簡単に色を変更できます。

② hoverアニメーションが可能

マウスホバーで色を変えるなどの演出ができます。

③ JavaScript操作も可能

アニメーションやクリックイベントを追加できます。

④ 画像読み込みが減り高速化

外部画像を読み込まないため、表示速度の改善にもつながります。

YouTubeアイコンの色をhoverで変える

まずはYouTubeアイコンの例です。
通常はグレー、hoverするとYouTubeの赤色になるようにします。

HTML

<a href="#" class="youtube-link" aria-label="YouTube">
<svg class="youtube-icon" viewBox="0 0 24 24" width="40" height="40">
  <path d="M23.5 6.2c-.3-1.2-1.2-2.1-2.4-2.4C18.9 3.2 12 3.2 12 3.2s-6.9 0-9.1.6C1.7 4.1.8 5 .5 6.2.0 8.4 0 12 0 12s0 3.6.5 5.8c.3 1.2 1.2 2.1 2.4 2.4 2.2.6 9.1.6 9.1.6s6.9 0 9.1-.6c1.2-.3 2.1-1.2 2.4-2.4.5-2.2.5-5.8.5-5.8s0-3.6-.5-5.8zM9.6 15.5v-7l6.2 3.5-6.2 3.5z"/>
</svg>
</a>

CSS

.youtube-icon{
  fill:#777;
  transition:0.3s;
}.youtube-link:hover .youtube-icon{
  fill:#ff0000;
}

このようにすると、hover時にYouTubeカラーに変わります。

Instagramアイコンをグラデーションにする

Instagramは単色ではなく、公式カラーはグラデーションです。

そのためSVGでは linearGradient を使って色を指定します。

HTML

<a href="#" class="instagram-link" aria-label="Instagram">
<svg class="instagram-icon" viewBox="0 0 24 24" width="40" height="40"><defs>
<linearGradient id="instagramGradient" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#feda75"/>
<stop offset="25%" stop-color="#fa7e1e"/>
<stop offset="50%" stop-color="#d62976"/>
<stop offset="75%" stop-color="#962fbf"/>
<stop offset="100%" stop-color="#4f5bd5"/>
</linearGradient>
</defs><path d="M12 2.2c3.2 0 3.6.01 4.9.07 1.17.05 1.97.24 2.43.4.61.24 1.05.53 1.51 1s.76.9 1 1.51c.16.46.35 1.26.4 2.43.06 1.3.07 1.7.07 4.9s-.01 3.6-.07 4.9c-.05 1.17-.24 1.97-.4 2.43-.24.61-.53 1.05-1 1.51s-.9.76-1.51 1c-.46.16-1.26.35-2.43.4-1.3.06-1.7.07-4.9.07s-3.6-.01-4.9-.07c-1.17-.05-1.97-.24-2.43-.4-.61-.24-1.05-.53-1.51-1s-.76-.9-1-1.51c-.16-.46-.35-1.26-.4-2.43C2.21 15.6 2.2 15.2 2.2 12s.01-3.6.07-4.9c.05-1.17.24-1.97.4-2.43.24-.61.53-1.05 1-1.51s.9-.76 1.51-1c.46-.16 1.26-.35 2.43-.4C8.4 2.21 8.8 2.2 12 2.2z"/>
</svg>
</a>

CSS

.instagram-icon{
  fill:#777;
  transition:0.3s;
}.instagram-link:hover .instagram-icon{
  fill:url(#instagramGradient);
}

これでhoverするとInstagramカラーになります。

SNSアイコンをまとめて管理する方法

サイト制作では、SNSアイコンをまとめて管理しておくと便利です。

例えば共通クラスを作ると管理が楽になります。

.sns-icon{
  width:40px;
  height:40px;
  transition:0.3s;
}

そして各SNSごとに色を指定します。

.youtube:hover{
  fill:#ff0000;
}.instagram:hover{
  fill:url(#instagramGradient);
}

実務でおすすめのSVGアイコン管理方法

Web制作の現場では、次のような管理方法がよく使われます。

  • SVGはインライン化
  • SNSアイコンは共通クラスで管理
  • hoverカラーをブランドカラーにする

こうすることで、

  • CSSで簡単にデザイン変更
  • hoverアニメーション対応
  • パフォーマンス改善

といったメリットがあります。

コピペで使えるSNSアイコンSVG完全セット（10種類）

ここでは、Web制作でよく使うSNSアイコンをコピペで使えるSVG形式でまとめています。
すべて hoverカラー対応 です。

共通CSS

まずは共通CSSです。

.sns-icons{
display:flex;
gap:20px;
}.sns-icon{
width:40px;
height:40px;
fill:#777;
transition:.3s;
cursor:pointer;
}

YouTube

<svg class="sns-icon youtube" viewBox="0 0 24 24">
<path d="M23.5 6.2c-.3-1.2-1.2-2.1-2.4-2.4C18.9 3.2 12 3.2 12 3.2s-6.9 0-9.1.6C1.7 4.1.8 5 .5 6.2.0 8.4 0 12 0 12s0 3.6.5 5.8c.3 1.2 1.2 2.1 2.4 2.4 2.2.6 9.1.6 9.1.6s6.9 0 9.1-.6c1.2-.3 2.1-1.2 2.4-2.4.5-2.2.5-5.8.5-5.8s0-3.6-.5-5.8z"/>
</svg>
.youtube:hover{fill:#FF0000;}

Instagram

<svg class="sns-icon instagram" viewBox="0 0 24 24"><defs>
<linearGradient id="igGradient" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#feda75"/>
<stop offset="25%" stop-color="#fa7e1e"/>
<stop offset="50%" stop-color="#d62976"/>
<stop offset="75%" stop-color="#962fbf"/>
<stop offset="100%" stop-color="#4f5bd5"/>
</linearGradient>
</defs><path d="M12 2.2c3.2 0 3.6.01 4.9.07..." />
</svg>
.instagram:hover{fill:url(#igGradient);}

X（Twitter）

<svg class="sns-icon twitter" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69a4.3 4.3 0 001.88-2.37c-.83.49-1.75.84-2.73 1.04A4.28 4.28 0 0015.5 4c-2.4 0-4.34 1.94-4.34 4.34 0 .34.04.67.11.98A12.13 12.13 0 013 5.15a4.32 4.32 0 001.34 5.79 4.28 4.28 0 01-1.97-.55v.06c0 2.02 1.44 3.7 3.36 4.08-.35.1-.72.15-1.1.15-.27 0-.53-.03-.78-.07.53 1.64 2.05 2.83 3.86 2.86A8.6 8.6 0 012 19.54 12.12 12.12 0 008.56 21c7.87 0 12.18-6.52 12.18-12.18 0-.19 0-.38-.01-.56A8.65 8.65 0 0024 5.1a8.5 8.5 0 01-2.54.7z"/>
</svg>
.twitter:hover{fill:#000;}

Facebook

<svg class="sns-icon facebook" viewBox="0 0 24 24">
<path d="M22 12a10 10 0 10-11.6 9.9v-7h-2.2v-2.9h2.2V9.7c0-2.2 1.3-3.4 3.3-3.4.96 0 1.96.17 1.96.17v2.2h-1.1c-1.1 0-1.44.68-1.44 1.38v1.66h2.45l-.39 2.9h-2.06v7A10 10 0 0022 12"/>
</svg>
.facebook:hover{fill:#1877F2;}

LINE

<svg class="sns-icon line" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 5.58 2 10c0 2.5 1.58 4.72 4.02 6.18L5 22l5.13-2.75c.6.08 1.22.13 1.87.13 5.52 0 10-3.58 10-8s-4.48-8-10-8"/>
</svg>
.line:hover{fill:#06C755;}

TikTok

<svg class="sns-icon tiktok" viewBox="0 0 24 24">
<path d="M21 8.5a7 7 0 01-4.5-1.7V15a5 5 0 11-5-5c.34 0 .67.03 1 .1v2.5a2.5 2.5 0 102.5 2.5V2h2.5a4.5 4.5 0 003.5 4.5v2z"/>
</svg>
.tiktok:hover{fill:#000;}

Pinterest

<svg class="sns-icon pinterest" viewBox="0 0 24 24">
<path d="M12 2a10 10 0 00-3.5 19.4c-.05-.83-.1-2.1.02-3l1.2-5.1s-.3-.6-.3-1.5c0-1.4.8-2.5 1.8-2.5.86 0 1.27.64 1.27 1.4 0 .85-.54 2.12-.82 3.3-.24 1 .5 1.8 1.5 1.8 1.8 0 3.2-1.9 3.2-4.6 0-2.4-1.7-4.1-4.2-4.1-2.9 0-4.6 2.2-4.6 4.5 0 .9.34 1.9.78 2.4.08.1.1.2.07.3l-.3 1.2c-.05.2-.17.24-.4.15-1.5-.7-2.4-2.8-2.4-4.5 0-3.7 2.7-7 7.8-7 4.1 0 7.3 2.9 7.3 6.7 0 4-2.5 7.2-6 7.2-1.2 0-2.4-.6-2.8-1.4l-.7 2.7c-.25.95-.93 2.13-1.4 2.86A10 10 0 1012 2"/>
</svg>
.pinterest:hover{fill:#E60023;}

LinkedIn

<svg class="sns-icon linkedin" viewBox="0 0 24 24">
<path d="M4.98 3.5C4.98 5 3.87 6 2.49 6 1.1 6 0 5 0 3.5S1.1 1 2.49 1c1.38 0 2.49 1 2.49 2.5zM.5 8h4V24h-4zM8 8h3.8v2.2h.05c.53-1 1.84-2.2 3.8-2.2 4.06 0 4.8 2.67 4.8 6.15V24h-4v-8.5c0-2-.03-4.5-2.75-4.5-2.76 0-3.18 2.16-3.18 4.36V24H8z"/>
</svg>
.linkedin:hover{fill:#0A66C2;}

SVGスプライト版（超高速）

大量のアイコンを使う場合は SVGスプライト が最速です。

スプライト定義

<svg style="display:none"><symbol id="icon-youtube" viewBox="0 0 24 24">
<path d="M23.5 6.2..."/>
</symbol><symbol id="icon-instagram" viewBox="0 0 24 24">
<path d="M12 2.2..."/>
</symbol><symbol id="icon-line" viewBox="0 0 24 24">
<path d="M12 2..."/>
</symbol></svg>

使用方法

<svg class="sns-icon youtube">
<use xlink:href="#icon-youtube"></use>
</svg>

SVGスプライトのメリット

① HTMLが軽い
② 同じSVGを何度も使える
③ HTTPリクエスト削減
④ パフォーマンス改善

大規模サイトでは SVGスプライトが標準的な方法です。

まとめ

SVGアイコンの色を変更する場合は、次のポイントを押さえましょう。

① <img>タグのSVGは色変更できない
② SVGをHTMLに直接書く（インラインSVG）
③ CSSのfillで色を変更する
④ Instagramはグラデーションを使う

この方法を使えば、YouTube・InstagramなどのSNSアイコンを
サイトデザインに合わせて柔軟にカスタマイズできます。

SVGアイコンを使うことで

  • CSSで色変更
  • hoverアニメーション
  • 高画質
  • 軽量

といったメリットがあります。

特にSNSアイコンはブランドカラーがあるため、
SVG＋CSSで管理するとデザインの自由度が大きく上がります。

Web制作では非常に便利なテクニックなので、ぜひ活用してみてください。