各種ソーシャルサービスのロゴSVGコードとブランドカラーの備忘録

  • Posted on
  • Category : Tips
各種ソーシャルサービスのロゴSVGコードとブランドカラーの備忘録

サイトを見に来てくれた人に拡散・シェアをしてもらうために、今ではブログに限らず様々なタイプのサイトでもソーシャルボタンが設置されています。設置時に公式で発行されているコードを利用することももちろんありますが、表示速度の問題やサイトのテイストにデザインを合わせたいという理由から、独自デザインでソーシャルボタンを設置することも多くなってきました。その際、各種ソーシャルブランドのロゴやカラーを基本的に利用すると思いますが、使う度に調べたりするのも少し面倒なので、個人的によく利用されている(している)と思う各種ソーシャルのロゴSVGコードとブランドカラーを自分用に一覧化したのでシェアします。

※ロゴデザインやブランドカラーはこの記事公開時点のものになります。
場合によってはデザインやカラーが大きく変更されている可能性もありますので、そういったことが心配な場合は自身で各サービスのガイドラインページを確認してください。

濃いカラー部分は一定のルールで作成したカラー

ちなみに、これはガイドラインに記載がされているとかではなく個人的に作成してみたものになりますが、以下では各種ソーシャルのブランドカラーに加え、3Dボタンやグラデーションなどを使ったデザインにしたい時に使えるように、ブランドカラーを一定のルールで変更したカラーも一緒に掲載しています。

例えば、この画像は3Dボタン風にしたものになりますが、基本的なカラーはブランドカラーを指定し、下の少し濃いカラー部分は先述した一定のルールで作成したカラーを使用しています。

Twitter

Twitter

カラーA:#55acee
カラーB:#4892cb

SVG Code

<path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z"></path>

Facebook

Facebook

カラーA:#3b5998
カラーB:#324c81

SVG Code

<path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0"></path>

Google+

Google+

カラーA:#dc4e41
カラーB:#bb4237

SVG Code

<path d="M5.09 7.273v1.745H7.98c-.116.75-.873 2.197-2.887 2.197-1.737 0-3.155-1.44-3.155-3.215S3.353 4.785 5.09 4.785c.99 0 1.652.422 2.03.786l1.382-1.33c-.887-.83-2.037-1.33-3.41-1.33C2.275 2.91 0 5.184 0 8s2.276 5.09 5.09 5.09c2.94 0 4.888-2.065 4.888-4.974 0-.334-.036-.59-.08-.843H5.09zM16 7.273h-1.455V5.818H13.09v1.455h-1.454v1.454h1.455v1.455h1.455V8.727H16"></path>

はてなブックマーク

はてなブックマーク

カラーA:#00a5de
カラーB:#008cbd

SVG Code

<path d="M15.611,10.206h-3.089V1.382h3.089V10.206z M10.449,10.804c0,0.703-0.146,1.318-0.441,1.852c-0.294,0.531-0.714,0.945-1.265,1.236c-0.445,0.237-0.995,0.41-1.651,0.514c-0.656,0.1-1.729,0.152-3.218,0.152H0.169V1.442h3.596c1.479,0,2.51,0.048,3.099,0.142c0.586,0.097,1.089,0.261,1.512,0.493c0.483,0.269,0.852,0.627,1.107,1.074c0.25,0.451,0.379,0.973,0.379,1.563c0,0.744-0.188,1.336-0.567,1.771C8.913,6.928,8.311,7.259,7.481,7.484c0.933,0.071,1.659,0.399,2.182,0.983C10.188,9.05,10.449,9.831,10.449,10.804z M3.489,6.981h0.714c0.881,0,1.482-0.098,1.813-0.289c0.326-0.196,0.49-0.529,0.49-1.004c0-0.492-0.154-0.838-0.458-1.039C5.74,4.45,5.145,4.351,4.257,4.351H3.489V6.981z M7.062,10.808c0-0.553-0.159-0.938-0.483-1.155C6.26,9.435,5.66,9.325,4.793,9.325H3.489v2.865h1.249c0.845,0,1.447-0.105,1.796-0.32C6.887,11.657,7.062,11.302,7.062,10.808z M14.066,11.089c-0.975,0-1.764,0.789-1.764,1.764s0.789,1.766,1.764,1.766s1.765-0.791,1.765-1.766S15.041,11.089,14.066,11.089z"></path>

Instagram

Instagram

カラーA:#125688
カラーB:#0f4974

SVG Code

<path d="M14.154 16H1.846C.826 16 0 15.173 0 14.153V1.846C0 .826.826 0 1.846 0h12.308C15.174 0 16 .826 16 1.846v12.307c0 1.02-.826 1.847-1.846 1.847M8 4.923C6.3 4.923 4.923 6.3 4.923 8S6.3 11.077 8 11.077 11.077 9.7 11.077 8C11.077 6.3 9.7 4.923 8 4.923m6.154-2.462c0-.34-.275-.614-.616-.614h-1.846c-.34 0-.615.275-.615.615V4.31c0 .34.276.615.615.615h1.846c.34 0 .616-.276.616-.615V2.46zm0 4.31H12.76c.103.392.163.804.163 1.23 0 2.72-2.204 4.923-4.923 4.923-2.72 0-4.923-2.204-4.923-4.923 0-.426.06-.838.162-1.23H1.845v6.768c0 .34.275.615.616.615h11.076c.34 0 .616-.275.616-.615v-6.77z"></path>

Pinterest

Pinterest

カラーA:#bd081c
カラーB:#a10718

SVG Code

<path d="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.915-1.376-3.254-3.342-3.254-2.276 0-3.61 1.707-3.61 3.472 0 .687.263 1.424.593 1.825.066.08.075.15.057.23-.06.252-.196.796-.223.907-.035.146-.115.178-.268.107-.998-.465-1.624-1.926-1.624-3.1 0-2.524 1.834-4.84 5.287-4.84 2.774 0 4.932 1.977 4.932 4.62 0 2.757-1.74 4.977-4.153 4.977-.81 0-1.572-.422-1.833-.92l-.5 1.902c-.18.695-.667 1.566-.994 2.097.75.232 1.545.357 2.37.357 4.417 0 8-3.582 8-8s-3.583-8-8-8z"></path>

Tumblr

Tumblr

カラーA:#36465d
カラーB:#2e3c4f

SVG Code

<path d="M9.708 16c-3.396 0-4.687-2.504-4.687-4.274V6.498H3.403V4.432C5.83 3.557 6.412 1.368 6.55.12c.01-.086.077-.12.115-.12H9.01v4.076h3.2v2.422H8.997v4.98c.01.667.25 1.58 1.472 1.58h.067c.424-.012.994-.136 1.29-.278l.77 2.283c-.288.424-1.594.916-2.77.936h-.12z"></path>

Pocket

Pocket

カラーA:#ef3f56
カラーB:#cb3649

SVG Code

<path d="M12.533 6.84L8.77 10.45c-.213.204-.486.306-.76.306-.273 0-.547-.102-.76-.306L3.488 6.84c-.437-.418-.45-1.113-.032-1.55.42-.438 1.114-.452 1.55-.033l3.005 2.88 3.005-2.88c.436-.42 1.13-.405 1.55.032.42.437.405 1.13-.032 1.55zm3.388-5.028c-.207-.572-.755-.956-1.363-.956H1.45c-.6 0-1.144.376-1.357.936-.063.166-.095.34-.095.515v4.828l.055.96c.232 2.184 1.365 4.092 3.12 5.423.03.024.063.047.095.07l.02.015c.94.687 1.992 1.152 3.128 1.382.524.105 1.06.16 1.592.16.492 0 .986-.046 1.472-.136.058-.013.116-.023.175-.037.016-.002.033-.01.05-.018 1.088-.237 2.098-.69 3.004-1.352l.02-.014.096-.072c1.754-1.33 2.887-3.24 3.12-5.423l.054-.96V2.307c0-.167-.02-.333-.08-.495z"></path>

RSS

RSS

カラーA:#ffa500
カラーB:#d98c00

SVG Code

<path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.985 2.194-2.196 2.194C.984 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"></path>

Feedly

Feedly

カラーA:#6cc655
カラーB:#5ca848

SVG Code

<path d="M4.93 14.622l-4.518-4.55c-.55-.55-.55-1.74 0-2.26L6.886 1.31c.52-.52 1.68-.52 2.198 0l6.504 6.503c.55.55.55 1.74 0 2.26l-4.52 4.55c-.274.274-.702.457-1.13.457H6c-.397 0-.794-.183-1.07-.458zm4.123-1.77c.092-.092.092-.276 0-.367l-.885-.886c-.092-.092-.275-.092-.366 0l-.886.885c-.092.09-.092.275 0 .366l.702.673h.733l.703-.672zm0-3.757c.062-.06.062-.213 0-.274l-.946-.946c-.06-.06-.214-.06-.275 0l-2.748 2.748c-.092.092-.092.306 0 .397l.64.64h.734l2.595-2.565zm0-3.725c.062-.06.092-.244 0-.305l-.916-.916c-.06-.062-.244-.062-.335 0l-4.61 4.61c-.062.06-.093.244-.032.305l.733.702h.702L9.053 5.37z"></path>

自身でちゃんと公式からロゴデータを取得したいとかカラーコードを確認したいという場合は、先日よく利用されていると思う各種サービスのガイドラインへのリンクを一覧化したので、こちらから容易に各種サービスのガイドラインを確認することができます。

また、以下で紹介している「Simple Icons」では、様々なサービスやサイトのSVGロゴデータやカラーコードがまとめて一覧化されており非常に便利です。

Back to Top

各種ソーシャルサービスのロゴSVGコードとブランドカラーの備忘録

各種ソーシャルサービスのロゴSVGコードとブランドカラーの備忘録

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。