X(旧Twitter)ロゴのダウンロードURLとSVGコード。デザイナー、コーチ、ディレクター / 井川

.

Memo

XのロゴのダウンロードURLとSVGコード。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

Xロゴの公式ダウンロードURL。

𝕏のロゴ

現時点(2023年11月初旬)では、日本語のダウンロードサイトが見つからないが、英語で「x logo download」と検索すると、下記のページが表示される。

Brand toolkit

𝕏ロゴのダウンロードURL:https://about.twitter.com/en/who-we-are/brand-toolkit

公式ロゴはこの「Brand toolkit」のページからダウンロードができる。

Xの公式ロゴ。ダウンロードサイトの画像。


𝕏ロゴのSVGコード。

SVGコード。

上記のサイト左上のロゴのソースで、SVGコードも確認できる。

HTML
<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="none" class="u01b__icon-home"> 
 <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"></path> 
</svg>
CSS

そのままだと大きいので、CSSで幅を30%にし、真ん中に配置した場合。

svg {
 width: 30%;
 margin: auto;
}
実際の表示。

X(旧Twitter)ログインページでのロゴ。

このページでのロゴは「Brand toolkit」のロゴと太さなどがちょっと違っている。

X(旧Twitter)のログインページのロゴ。

HTML
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-rxcuwo r-1777fci r-m327ed r-dnmrzs r-494qqr r-bnwqim r-1plcrui r-lrvibr">
 <g>
  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z">
  </path>
 </g>
</svg>
CSS

例として、CSSで幅を30%にし、真ん中に配置。

svg {
 width: 30%;
 margin: auto;
}
実際の表示。


SVGコードはコピペでイラレやFigmaへ貼り付けられる。
Illustrator

イラレへコピペした場合。自動的にベクター画像となる。

IllustratorへコピペしたXのSVG。

Figma

Figmaへコピペした場合も同様。

FigmaへコピペしたXのSVG。

ロゴの色などはガイドラインによって決められているので、勝手に変更しないように注意が必要。

Twitterのような青い鳥のような。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。