SNSアイコンの利用ガイドライン解説！Xを含む2023年最新の8種類まとめ

WebサイトやモバイルアプリにSNSへのリンクやシェアボタンを設置する際に必要となるのが、各SNSのアイコン画像です。最近ではTwitterがXへと名前を変えたことにより、サービス内で使用しているSNSアイコンのアップデート対応をした方も多いのではないでしょうか？

このような用途で使用されるSNSのロゴアイコンは、それぞれのSNSによって管理されており、利用方法についてもガイドラインが設けられています。とはいえ、ガイドラインは英語でのみ提供されていることも多く、最新ガイドラインやアイコンの公式ダウンロードリンクを見つけるのが難しいというようなことも。本記事では、そのようなSNSアイコンの素材ダウンロードリンクと利用ガイドラインをまとめています。

Twitterから名前を変更したXは、ロゴ・アイコンの利用に関する詳しいガイドラインをまだ一般公開しておらず、ロゴの画像データのみ先立って提供しています。

Xアイコンのダウンロードリンクと配布形式

https://about.twitter.com/en/who-we-are/brand-toolkit

Xのロゴは、公式サイトの「ブランドツールキット」よりダウンロードすることができます。

1. 黒色（PNG）

2. 白色（PNG）

3. SVG

Xアイコンの利用ガイドライン

Xロゴのガイドラインは現時点では一般公開されていないものの、ブランドガイドラインに関する問い合わせ窓口を設けているようです。不明な点があれば、『trademarks@x.com』にメールで問い合わせをすることが可能です。

Instagramは公式サイトにてブランドガイドラインとブランドアセットを提供しています。Instagramのグリフアイコンは、ガイドラインに沿った形であればサイトからダウンロードして使用することができます。しかし、ライブ配信やラジオ、屋外広告、A4サイズ以上の印刷物で使用する場合には利用イメージを共有の上、使用許可を得る必要があるとのことです。

Instagramアイコンのダウンロードリンクと配布形式

https://about.meta.com/ja/brand/resources/instagram/instagram-brand/

Instagramのアイコンは「Instagramブランドリソースサイト」にて配布されています。背景にグラデーションのついたアプリアイコンではなく、線のみのグリフアイコンが配布されており、SNSアイコンとしてはこちらを使用するようにと定められています。配布されているグリフアイコンと形式は以下の通りです。

1. グラデーション（Illustrator, PNG, SVG）

2. 黒色（Illustrator, PNG, JPEG, SVG）

3. 白色（Illustrator, PNG, SVG）

Instagramアイコンの利用ガイドライン

Instagramのアイコンに関する詳しいガイドラインは、「グリフアイコンに関するガイドライン」にて日本語で確認することができます。基本的に押さえておきたいポイントは以下の通りです。

利用可能な色

基本的に白か黒が推奨されているものの、周りの色に合わせて自由に変更することも可能

余白

グリフの上下左右に、最低でもグリフ半分のサイズの余白が必要

最小サイズ

29 x 29px

禁止事項

• グリフのすぐ近くへのコピーの配置

• グリフのすぐ近くへのロゴの配置

• グリフの改変、変形、回転

FacebookのSNSアイコンは、公式のブランドリソースセンターにて配布されています。ガイドラインに同意のうえ、ダウンロードして利用することができますが、テレビ、デジタル広告、印刷パッケージなどで使用する場合は、クリエイティブをリリースする前にFacebookチームの審査を受ける必要があるとのことです。

Facebookアイコンのダウンロードリンクと配布形式

https://about.meta.com/ja/brand/resources/facebookapp/logo/

Facebookのアイコンは、「公式のブランドリソースセンター」にて配布されており、ブランドカラーの青をはじめ、白・黒・グレーを含む4色が含まれています。

1. 青色（EPS, PNG）

2. 黒色（EPS, PNG）

3. 白色（EPS, PNG）

4. グレー（EPS, PNG）

Facebookアイコンの利用ガイドライン

Facebookアイコンのガイドラインは、アイコンのダウンロードページとダウンロードしたzipファイル内にPDF形式で含まれています。注意するべき点として、Facebookアイコンは背景の丸を含めて一つのアイコンであるため、四角などに形を変更して使用することはできません。

利用可能な色

ブランドカラーの青か白を使用。ソーシャルアイコンとして使用する場合は、公式で配布されている青・白・黒・グレーの4色のみ使用可能。

余白

アイコンの上下左右にアイコンの1/4サイズの余白が必要

最小サイズ

視認可能なサイズで使用すること。

禁止事項

• Facebookロゴの形をした物理的なオブジェクトの作成や、アニメーションの作成

• デザイン、サイズ、色などの変更

• パートナーシップ、スポンサーシップ、Facebookによる推薦などを暗示すること

自身のYouTubeチャンネルを持つ個人や企業も増えてきて、YouTubeのアイコンをソーシャルアイコン的に利用したいケースも多いのではないでしょうか？YouTubeアイコンは、リンク先をYouTubeチャンネルとする場合にはSNSアイコンとして使用することができます。ただし、YouTubeのロゴやアイコンを使用する場合には必ず、「ブランド使用申請フォーム」よりYouTubeに連絡の上、審査・承認を得る必要があるので注意が必要です。

YouTubeアイコンのダウンロードリンクと配布形式

https://www.youtube.com/intl/ALL_jp/howyoutubeworks/resources/brand-resources/#logos-icons-and-colors

YouTubeのアイコンは「YouTubeのブランド関連情報」ページよりダウンロードすることができます。YouTubeが提供しているアイコンのフォーマットは以下の通りです。

1. フルカラーアイコン（Illustrator, EPS, PNG）

2. ライトモノクロアイコン（Illustrator, EPS, PNG）

3. ダークモノクロアイコン（Illustrator, EPS, PNG）

YouTubeアイコンの利用ガイドライン

YouTubeロゴ・アイコンの利用ガイドラインは、ダウンロードページに記載されています。

利用可能な色

• フルカラーアイコンの三角形は必ず白を使用

• モノクロアイコンには、黒に近いグレー（#282828）または白（#FFFFFF）のみ使用可能

• モノクロアイコンの三角形には背景を透過させる

YouTubeロゴ・アイコンはグレーの色も指定色以外は使用禁止

他のSNSアイコンと並べて使用するような場合に、任意のグレーを使用することができるかについてYouTubeに問い合わせてみましたが、ガイドラインに定義された「黒に近いグレー（#282828）」以外のグレーを使用することは禁止されているとのことでした

余白

上下左右にアイコン内の三角形のサイズ以上の余白が必要

最小サイズ

高さ20dp（20px）

禁止事項

• ロゴを改変すること

• フレーズまたは文章の中でロゴを使用すること

ポートフォリオサイトやコーポーレートサイトでは、ビジネスSNSのLinkedInをSNSアイコンとして使用したいケースも多いのではないでしょうか？LinkedInでは、LinkedInプロフィールへのリンクとして使用する場合は特別な許可を必要とせずアイコンを使用することができます。

LinkedInアイコンのダウンロードリンクと配布形式

https://brand.linkedin.com/downloads

LinkedInのアイコンは「公式のダウンロードページ」よりダウンロードすることができます。LinkedInが提供しているアイコン・ロゴのフォーマットは以下の通りです。

1. ロゴ（PNG, EPS）

2. アイコン（PNG）

上記のページを確認すると、PNGファイルのみの提供のように見えますが、EPSファイルも「利用ガイドライン」の中にダウンロードリンクが存在します。

LinkedInロゴの利用ガイドライン

LinkedInのブランドポリシーのページにてガイドラインが定められています。LinkedInプロフィールへのリンクとしてアイコンを使用する場合以外には、申請が必要である点には注意が必要です。

利用可能な色

• ブランドカラーの青

• モノクロで使用する場合は、背景色が濃い場合は白や黒を使用可能

余白

上下左右に「i」の横幅の2倍の余白が必要

最小サイズ

高さ21px

禁止事項

• ロゴを改変すること

Lineについても、公式サイトにてアイコンの配布を行っています。

Lineアイコンのダウンロードリンクと配布形式

https://www.linebiz.com/jp/logo/

Lineのブランドアイコンは、「Lineのアイコンガイドラインページ」にて提供されています。サイト内では、ブランドアイコンとアプリアイコンが提供されていますが、SNSアイコンとして使用する場合は、ブランドアイコンの方を利用するようにしましょう。

• ブランドアイコン（Illustrator, Photoshop, PNG）

Lineアイコンの利用ガイドライン

Lineのブランドアイコン使用に関するガイドラインは、アイコン配布ページにて詳しく記載されています。

利用可能な色

ブランドカラーの緑を使用すること。色の変更は不可。

余白

上下左右にアイコン幅の1/2の余白が必要

最小サイズ

• モバイルでは40px

• PCでは20px

禁止事項

• アイコンの変形（配布されている円形のアイコンはAndroid用のアプリアイコン）

• 装飾

• 文中での使用

2022年にロゴをリニューアルしたnoteについても、ブランドガイドラインと一緒にロゴ・アイコンのデータファイルを提供しています。

noteアイコンのダウンロードリンクと配布形式

https://www.help-note.com/hc/ja/articles/360000235582

noteのロゴ・アイコンデータは、「noteのブランドガイドライン」にて配布されています。noteが提供しているロゴ・アイコンのフォーマットは以下の通りです。

• 正方形アイコン黒色（SVG, PNG）

• 正方形アイコン白色（SVG, PNG）

• ロゴ黒色（SVG, PNG）

• ロゴ白色（SVG, PNG）

noteロゴの利用ガイドライン

noteロゴのガイドラインは、画像データと一緒にPDF形式でダウンロードすることができます。noteは、SNSアイコンとして使用する場合も正方形のタイプロゴの使用を基本としていますが、可読性が担保できない場合には、「n」のアイコンを正方形（角丸可）または正円で使用することができるとのことです。

利用可能な色

基本色（#000000）とサブカラー（#FFFFFF）でのみ使用可能。

余白

上下左右にnとoの間のスペースの1.7倍の余白が必要

最小サイズ

横幅30px

禁止事項

• ロゴ・アイコンの変形

• 基本色・サブカラー以外の使用

• アウトラインでの表現

• 影や装飾をつけること

デザインツールとして知られるFigmaですが、Figma Communityのリリース以降はデザインSNS的な立ち位置でSNSアイコンの並びで使用される機会も増えてきました。

Figmaアイコンのダウンロードリンクと配布形式

https://www.figma.com/ja/using-the-figma-brand/

Figmaのワードマークとアイコンは、「Figma商標ガイドライン」にて提供されています。Figmaが提供しているフォーマットは以下の通りです。

• フルカラーアイコン（SVG）

• 白色アイコン（SVG）

• 黒色アイコン（SVG）

• 白色ワードマーク（SVG）

• 黒色ワードマーク（SVG）

Figmaアイコンの利用ガイドライン

Figmaのアイコン・ワードマークの利用ガイドラインは、Figma CommunityにてFigmaファイル形式で配布されており、「Figma Style Guide」から入手可能です。

利用可能な色

ブランドカラー・白色・黒色での利用が可能

余白

• ワードマークでは上下左右に「a」と同じサイズの余白が必要

• ロゴアイコンでは、上下左右にアイコン内の円形と同じサイズの余白が必要

最小サイズ

視認性を担保すること

禁止事項

• ロゴ・アイコンの変形

• 影や装飾をつけること

• アイコンとワードマークを一緒に使うこと

Figmaのアイコンとワードマークは一緒に使ってはいけない？

ガイドライン内で意外に思われるかもしれないのが、Figmaのアイコンとワードマークを隣同士に配置することが禁止されているということです。Figmaのアイコンは頭文字の「F」をモチーフにしていることから、これらを並べるとFFigmaと読めてしまうことが理由であるようです。

Instagramのように一緒に配置されるSNSアイコンに合わせて色を調整することができるものもあれば、YouTubeやLineのように色の変更が許可されていない場合もあります。それぞれのサービスのSNSアイコンで利用できる色は以下の通りです。

サービスごとに使用可能な色や形には違いがあるため、いくつかのSNSアイコンを並べて表示するような場合には、共通で使える色があれば同色にまとめることもできそうですが、多くのSNSアイコンを表示する必要がある場合には、それぞれのオリジナルのブランドカラーと形で使うのが最も汎用性の高い利用方法となりそうです。