【コピペ用】ツイッター、フェイスブック、インスタのSVGロゴで簡単に利用できるソーシャルアイコンセットを作る。

Webデザイン

今年の5月にインスタグラムのロゴが変わったことは記憶に新しい。iPhone上のアイコンの色がいきなり変わったので、「ん？🧐」ってなった（形状は変わらず、色だけ）

Facebook社がMeta社になり、内容修正のため一時期ダウンロードできなくなっていたのですが、Instagramのロゴがようやくダウンロードできるようになっていた。

この機会に、ソーシャルアイコンをいつでも簡単に設置できるように、コピペ用コードを作っておこうと思います。画像でなくsvgで作っておくことて利用も楽ちんですしね😎

各種正規のロゴをダウンロード

Instagram（インスタグラム）

Instagramブランド | Instagram | Brand Portal

上記ページより少しスクロールすると「ロゴパック」とあり、利用規約にチェックを入れてダウンロードします。同じようにフェイスブック、ツイッターもダウンロードします

Facebook（フェイスブック）

ロゴ | Facebook app | Brand Portal

Twitter（ツイッター）

Twitterについて | Twitterロゴ、ブランドガイドライン、ツイートツール

それぞれのアイコンを四角の中に入れていきます

ダウンロードしたロゴを各ブランドイメージカラーを背景にした四角いボタンを作っていこうと思います。

ツイッターのロゴデータの中に角丸を背景にしたepsデータがあったのでこれを土台に作っていきます。

オブジェクトのサイズを調べると、天地左右400pxのアートボードに左右250pxのツイッターアイコンが天地左右中央配置され、背景のブルーは50pxのラウンドである事がわかりました。

HTML
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
CSS
ul{ display: flex; justify-content: space-between; } li{ width:30%;/* アイコンのサイズは適当に修正してください */ height:auto; aspect-ratio: 1/1; } li a{ border-radius: 12.5%; display: block; width:100%; height:100%; background-color:#000; display: flex; align-items: center; justify-content: center; }

とりあえず3つの角丸四角を作っていきます。400pxのアートボードに50pxのラウンドが設定されていたのでCSSもそれに合わせて「border-radius:12.5%;」にします。

すると上記のような状態に。アイコンのサイズによって隙間が変わってきます。今回は3つなので33.33%以下の数値を適当に変更してください。

SVGコードを取得

次に、SVGコードを取得していきます。新規で天地左右250pxのアートボードを作成し、配置します。

別名保存でSVGファイルを選択して「保存」をクリックすると上記の画面に。

これは補足ですが、初期値で上部赤枠の「小数点以下の桁数」は1になっているようで、ここの数値が少ないと複雑な形状のパスはきれいに取得できない事がよくあります。7ってかなり高い数値なのですが、私の場合いつも7にしていてそのままだけなので気にしないでください。今回のような簡単な形状の場合はもっと少ない数値でいいかもしれません。

「SVGコード」をクリックすると上記のようなコードが書き出しされます。このソースはかなり邪魔なソースがあるので、

必要なソース以外は削除しました。

HTML
<ul> <li> <a href=""> <svg viewBox="0 0 250 250"> <path d="M79.0232925,226.5888062c94.3434067,0,145.9356995-78.1605988,145.9356995-145.9356079 c0-2.2210999-0.045105-4.4319-0.1466064-6.6309967c10.0139923-7.239502,18.7198944-16.2727013,25.5876007-26.5571022 c-9.1907959,4.0821991-19.0807037,6.8339996-29.4555054,8.0742989c10.5890045-6.3487968,18.719696-16.3964996,22.5540009-28.3727989 c-9.9125977,5.8753014-20.8851013,10.1488991-32.5679932,12.4498024 c-9.3600006-9.969202-22.6894073-16.2052021-37.4396973-16.2052021c-28.3279114,0-51.299202,22.9712009-51.299202,51.2875977 c0,4.0258026,0.4510956,7.9394989,1.3307953,11.6948013C80.895195,84.2509003,43.094696,63.8395996,17.8003998,32.8050995 c-4.4094,7.5781021-6.9467001,16.3855019-6.9467001,25.7793007c0,17.7952003,9.055501,33.5041008,22.8246994,42.6942024 c-8.4126987-0.2588043-16.3177986-2.5707016-23.2305984-6.4162064c-0.0113001,0.2140045-0.0113001,0.4288025-0.0113001,0.653801 c0,24.8432999,17.6823959,45.5815964,41.1497955,50.2847061c-4.3078003,1.1721954-8.841198,1.8040924-13.5210991,1.8040924 c-3.3041954,0-6.5181961-0.3269958-9.6418991-0.9250946c6.5293999,20.377594,25.4634972,35.2068939,47.9159966,35.6246948 C58.7809982,196.0621948,36.6667976,204.260498,12.6355,204.260498c-4.1386995,0-8.2208996-0.2368011-12.2355003-0.7102966 C23.1005001,218.0973053,50.0526962,226.5888062,79.0232925,226.5888062"/> </svg> </a> </li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
CSS
li a svg{ width:62.5%; fill:#fff; }

HTMLにツイッターのsvgのコードを追加し、CSSもsvgが表示されるよう修正。横幅400pxの中に250pxのアイコンがあったで、svgの横幅は62.5%に設定、fillの色を白にしました。

フェイスブックやインスタグラムのロゴも横幅250pxに合わせてサイズを調整してsvgのコードを取得しました（viewBoxの設定でできるので本当は250pxにする必要ないけど）

<ul> <li><a href=""><svg viewBox="0 0 250 250"><path d="M79.0232925,226.5888062c94.3434067,0,145.9356995-78.1605988,145.9356995-145.9356079 c0-2.2210999-0.045105-4.4319-0.1466064-6.6309967c10.0139923-7.239502,18.7198944-16.2727013,25.5876007-26.5571022 c-9.1907959,4.0821991-19.0807037,6.8339996-29.4555054,8.0742989c10.5890045-6.3487968,18.719696-16.3964996,22.5540009-28.3727989 c-9.9125977,5.8753014-20.8851013,10.1488991-32.5679932,12.4498024 c-9.3600006-9.969202-22.6894073-16.2052021-37.4396973-16.2052021c-28.3279114,0-51.299202,22.9712009-51.299202,51.2875977 c0,4.0258026,0.4510956,7.9394989,1.3307953,11.6948013C80.895195,84.2509003,43.094696,63.8395996,17.8003998,32.8050995 c-4.4094,7.5781021-6.9467001,16.3855019-6.9467001,25.7793007c0,17.7952003,9.055501,33.5041008,22.8246994,42.6942024 c-8.4126987-0.2588043-16.3177986-2.5707016-23.2305984-6.4162064c-0.0113001,0.2140045-0.0113001,0.4288025-0.0113001,0.653801 c0,24.8432999,17.6823959,45.5815964,41.1497955,50.2847061c-4.3078003,1.1721954-8.841198,1.8040924-13.5210991,1.8040924 c-3.3041954,0-6.5181961-0.3269958-9.6418991-0.9250946c6.5293999,20.377594,25.4634972,35.2068939,47.9159966,35.6246948 C58.7809982,196.0621948,36.6667976,204.260498,12.6355,204.260498c-4.1386995,0-8.2208996-0.2368011-12.2355003-0.7102966 C23.1005001,218.0973053,50.0526962,226.5888062,79.0232925,226.5888062"/></svg></a></li> <li><a href=""><svg viewBox="0 0 250 250"><path d="M249.9999695,125.759552c0-69.0355988-55.964386-124.9999771-124.9999695-124.9999771 S0.0000241,56.7239571,0.0000241,125.759552c0,62.391098,45.7106895,114.1040039,105.4687271,123.4808807v-87.3480835H73.7304764 V125.759552H105.46875V98.2204971c0-31.3281708,18.6617508-48.6328087,47.2141571-48.6328087 c13.6763763,0,27.9811401,2.4414062,27.9811401,2.4414062v30.7617149h-15.7624054 c-15.5278473,0-20.3703918,9.6354141-20.3703918,19.520813v23.4479294h34.6679535l-5.5419922,36.1327972H144.53125v87.3480835 C204.2892914,239.8635559,249.9999695,188.15065,249.9999695,125.759552z"/></svg></a></li> <li><a href=""><svg viewBox="0 0 250 250"><path d="M125.532692,22.3898125c33.376503,0,37.3298264,0.1272945,50.510643,0.7286549 c12.1872864,0.5561218,18.8061218,2.5923309,23.2108154,4.3041344c5.8345795,2.2674847,9.998642,4.9764957,14.3726044,9.3504505 c4.3741608,4.3741455,7.0831604,8.5382004,9.350647,14.3728065c1.711792,4.4046745,3.7480164,11.0235138,4.3041382,23.2106247 c0.6013489,13.1809998,0.728653,17.1343307,0.728653,50.5108261s-0.1273041,37.3298187-0.728653,50.5106354 c-0.5561218,12.1873016-2.5923462,18.8061218-4.3041382,23.2108307c-2.2674866,5.8345642-4.9764862,9.9986267-9.3504486,14.3725891 c-4.3741608,4.3741608-8.5382233,7.0831604-14.3728027,9.350647c-4.4046936,1.711792-11.0235291,3.7480316-23.2108154,4.3041382 c-13.1789246,0.6013641-17.1318817,0.728653-50.510643,0.728653s-37.3317184-0.1272888-50.510643-0.728653 c-12.1872902-0.5561066-18.8061295-2.5923462-23.210804-4.3041382c-5.8346062-2.2674866-9.998661-4.9764862-14.372612-9.3504486 c-4.3740654-4.374054-7.0831604-8.5382233-9.3506451-14.3727875c-1.7118015-4.4047089-3.7480125-11.0235291-4.3041325-23.2106628 c-0.6013622-13.1809845-0.7286568-17.1343079-0.7286568-50.5108032s0.1272945-37.3298264,0.7286568-50.510643 c0.5561199-12.187294,2.5923309-18.8061333,4.3041325-23.2108078c2.2674847-5.8346062,4.9764957-9.998661,9.3504505-14.3726158 c4.3741455-4.3741455,8.5382004-7.0831566,14.3728065-9.3506413c4.4046745-1.7118034,11.0235138-3.7480125,23.2106285-4.3041344 C88.2028732,22.517107,92.1562042,22.3898125,125.532692,22.3898125 M125.532692-0.132714 c-33.9480209,0-38.2047806,0.1437832-51.5373077,0.7520728c-13.3050499,0.6071143-22.3913574,2.7201819-30.342617,5.8102732 c-8.2197342,3.1944146-15.190815,7.4684701-22.1400948,14.417654C14.5634899,27.796566,10.2894335,34.7676468,7.0950189,42.987381 c-3.0900908,7.9512596-5.2031584,17.0375671-5.8102727,30.3426132 c-0.6082897,13.3325272-0.7520729,17.5891953-0.7520729,51.5373154c0,33.9480286,0.1437832,38.2047729,0.7520729,51.5372925 c0.6071143,13.305069,2.7201819,22.3913574,5.8102727,30.3426208c3.1944146,8.2196503,7.4684711,15.1908264,14.417654,22.1400909 c6.9492798,6.9492035,13.9203606,11.2232666,22.1400948,14.4176636c7.9512596,3.0901031,17.0375671,5.2031555,30.342617,5.8102722 c13.3325272,0.6083984,17.5892868,0.7520752,51.5373077,0.7520752s38.2047653-0.1436768,51.5373001-0.7520752 c13.3050537-0.6071167,22.3913574-2.7201691,30.3426208-5.8102722c8.2197266-3.194397,15.1908264-7.4684601,22.1400909-14.4176636 c6.9492035-6.9492645,11.2232666-13.9203644,14.4176636-22.1400909c3.0901031-7.9512634,5.2031555-17.0375519,5.8102722-30.3426208 c0.6082916-13.3325195,0.7520752-17.5892639,0.7520752-51.5372925s-0.1437836-38.2047882-0.7520752-51.5373154 c-0.6071167-13.3050461-2.7201691-22.3913536-5.8102722-30.3426132c-3.194397-8.2197342-7.4684601-15.190815-14.4176636-22.1400948 c-6.9492645-6.9491844-13.9203644-11.2232399-22.1400909-14.417654c-7.9512634-3.090091-17.0375671-5.2031584-30.3426208-5.8102732 C163.7374573,0.0110691,159.4807281-0.132714,125.532692-0.132714L125.532692-0.132714z"/> <path class="st0" d="M125.532692,60.6781082c-35.4507065,0-64.1891937,28.7384644-64.1891937,64.1892014 c0,35.4506989,28.7384911,64.1891632,64.1891937,64.1891632s64.1892014-28.7384644,64.1892014-64.1891632 C189.7218933,89.4165726,160.9833984,60.6781082,125.532692,60.6781082z M125.532692,166.5339508 c-23.0118484,0-41.6666718-18.6547852-41.6666718-41.6666412c0-23.0118866,18.6548233-41.6666794,41.6666718-41.6666794 c23.011879,0,41.6666794,18.6547928,41.6666794,41.6666794 C167.1993713,147.8791656,148.5445709,166.5339508,125.532692,166.5339508z"/> <circle class="st0" cx="192.2580261" cy="58.1419792" r="15.0000019"/></svg></a></li> </ul>

先程の要領ですべてのアイコンのsvgを設置していきます。

Instagramのグラデーションの指定色がわからない・・・

li:nth-child(1) a{ background-color: #1D9BF0; } li:nth-child(2) a{ background-color: #1877F2; }

それぞれのブランドカラーを背景色に適用しました。

  • ツイッターは#1D9BF0
  • フェイスブックは#1877F2

ツイッターとフェイスブックはそれぞれepsファイルがあるのでそのままブランドカラーを容易に利用できるのですが、

インスタグラムのファイルをダウンロードして解凍すると中身は上記のようになっています。インスタグラムだけグラデーションだからか、色のついたepsのファイルはなく正確な指定色が実はわからない。。。😅

Instagramのブランドガイダンスページのヘッダーの色に注目

なのでブランド概要のヘッダーのソースを拝見して🧐使われている色が

  • #FFD521（黄）
  • #F50000（赤）
  • #B900B4（紫）

だということがわかりました。

CSS
li:nth-child(3) a{ background:linear-gradient(45deg, #FFD521 0%, #F50000 50%, #B900B4 100%); }

無事、インスタアイコンの背景がおそらく正規の指定色のグラデーションになった（ついでにマウスオーバーで背景が黒になるようにした）

ここまでのまとめ

以下、ここまでのまとめです。

HTML
<ul> <li><a href=""><svg viewBox="0 0 250 250"><path d="M79.0232925,226.5888062c94.3434067,0,145.9356995-78.1605988,145.9356995-145.9356079 c0-2.2210999-0.045105-4.4319-0.1466064-6.6309967c10.0139923-7.239502,18.7198944-16.2727013,25.5876007-26.5571022 c-9.1907959,4.0821991-19.0807037,6.8339996-29.4555054,8.0742989c10.5890045-6.3487968,18.719696-16.3964996,22.5540009-28.3727989 c-9.9125977,5.8753014-20.8851013,10.1488991-32.5679932,12.4498024 c-9.3600006-9.969202-22.6894073-16.2052021-37.4396973-16.2052021c-28.3279114,0-51.299202,22.9712009-51.299202,51.2875977 c0,4.0258026,0.4510956,7.9394989,1.3307953,11.6948013C80.895195,84.2509003,43.094696,63.8395996,17.8003998,32.8050995 c-4.4094,7.5781021-6.9467001,16.3855019-6.9467001,25.7793007c0,17.7952003,9.055501,33.5041008,22.8246994,42.6942024 c-8.4126987-0.2588043-16.3177986-2.5707016-23.2305984-6.4162064c-0.0113001,0.2140045-0.0113001,0.4288025-0.0113001,0.653801 c0,24.8432999,17.6823959,45.5815964,41.1497955,50.2847061c-4.3078003,1.1721954-8.841198,1.8040924-13.5210991,1.8040924 c-3.3041954,0-6.5181961-0.3269958-9.6418991-0.9250946c6.5293999,20.377594,25.4634972,35.2068939,47.9159966,35.6246948 C58.7809982,196.0621948,36.6667976,204.260498,12.6355,204.260498c-4.1386995,0-8.2208996-0.2368011-12.2355003-0.7102966 C23.1005001,218.0973053,50.0526962,226.5888062,79.0232925,226.5888062"/></svg></a></li> <li><a href=""><svg viewBox="0 0 250 250"><path d="M249.9999695,125.759552c0-69.0355988-55.964386-124.9999771-124.9999695-124.9999771 S0.0000241,56.7239571,0.0000241,125.759552c0,62.391098,45.7106895,114.1040039,105.4687271,123.4808807v-87.3480835H73.7304764 V125.759552H105.46875V98.2204971c0-31.3281708,18.6617508-48.6328087,47.2141571-48.6328087 c13.6763763,0,27.9811401,2.4414062,27.9811401,2.4414062v30.7617149h-15.7624054 c-15.5278473,0-20.3703918,9.6354141-20.3703918,19.520813v23.4479294h34.6679535l-5.5419922,36.1327972H144.53125v87.3480835 C204.2892914,239.8635559,249.9999695,188.15065,249.9999695,125.759552z"/></svg></a></li> <li><a href=""><svg viewBox="0 0 250 250"><path d="M125.532692,22.3898125c33.376503,0,37.3298264,0.1272945,50.510643,0.7286549 c12.1872864,0.5561218,18.8061218,2.5923309,23.2108154,4.3041344c5.8345795,2.2674847,9.998642,4.9764957,14.3726044,9.3504505 c4.3741608,4.3741455,7.0831604,8.5382004,9.350647,14.3728065c1.711792,4.4046745,3.7480164,11.0235138,4.3041382,23.2106247 c0.6013489,13.1809998,0.728653,17.1343307,0.728653,50.5108261s-0.1273041,37.3298187-0.728653,50.5106354 c-0.5561218,12.1873016-2.5923462,18.8061218-4.3041382,23.2108307c-2.2674866,5.8345642-4.9764862,9.9986267-9.3504486,14.3725891 c-4.3741608,4.3741608-8.5382233,7.0831604-14.3728027,9.350647c-4.4046936,1.711792-11.0235291,3.7480316-23.2108154,4.3041382 c-13.1789246,0.6013641-17.1318817,0.728653-50.510643,0.728653s-37.3317184-0.1272888-50.510643-0.728653 c-12.1872902-0.5561066-18.8061295-2.5923462-23.210804-4.3041382c-5.8346062-2.2674866-9.998661-4.9764862-14.372612-9.3504486 c-4.3740654-4.374054-7.0831604-8.5382233-9.3506451-14.3727875c-1.7118015-4.4047089-3.7480125-11.0235291-4.3041325-23.2106628 c-0.6013622-13.1809845-0.7286568-17.1343079-0.7286568-50.5108032s0.1272945-37.3298264,0.7286568-50.510643 c0.5561199-12.187294,2.5923309-18.8061333,4.3041325-23.2108078c2.2674847-5.8346062,4.9764957-9.998661,9.3504505-14.3726158 c4.3741455-4.3741455,8.5382004-7.0831566,14.3728065-9.3506413c4.4046745-1.7118034,11.0235138-3.7480125,23.2106285-4.3041344 C88.2028732,22.517107,92.1562042,22.3898125,125.532692,22.3898125 M125.532692-0.132714 c-33.9480209,0-38.2047806,0.1437832-51.5373077,0.7520728c-13.3050499,0.6071143-22.3913574,2.7201819-30.342617,5.8102732 c-8.2197342,3.1944146-15.190815,7.4684701-22.1400948,14.417654C14.5634899,27.796566,10.2894335,34.7676468,7.0950189,42.987381 c-3.0900908,7.9512596-5.2031584,17.0375671-5.8102727,30.3426132 c-0.6082897,13.3325272-0.7520729,17.5891953-0.7520729,51.5373154c0,33.9480286,0.1437832,38.2047729,0.7520729,51.5372925 c0.6071143,13.305069,2.7201819,22.3913574,5.8102727,30.3426208c3.1944146,8.2196503,7.4684711,15.1908264,14.417654,22.1400909 c6.9492798,6.9492035,13.9203606,11.2232666,22.1400948,14.4176636c7.9512596,3.0901031,17.0375671,5.2031555,30.342617,5.8102722 c13.3325272,0.6083984,17.5892868,0.7520752,51.5373077,0.7520752s38.2047653-0.1436768,51.5373001-0.7520752 c13.3050537-0.6071167,22.3913574-2.7201691,30.3426208-5.8102722c8.2197266-3.194397,15.1908264-7.4684601,22.1400909-14.4176636 c6.9492035-6.9492645,11.2232666-13.9203644,14.4176636-22.1400909c3.0901031-7.9512634,5.2031555-17.0375519,5.8102722-30.3426208 c0.6082916-13.3325195,0.7520752-17.5892639,0.7520752-51.5372925s-0.1437836-38.2047882-0.7520752-51.5373154 c-0.6071167-13.3050461-2.7201691-22.3913536-5.8102722-30.3426132c-3.194397-8.2197342-7.4684601-15.190815-14.4176636-22.1400948 c-6.9492645-6.9491844-13.9203644-11.2232399-22.1400909-14.417654c-7.9512634-3.090091-17.0375671-5.2031584-30.3426208-5.8102732 C163.7374573,0.0110691,159.4807281-0.132714,125.532692-0.132714L125.532692-0.132714z"/> <path class="st0" d="M125.532692,60.6781082c-35.4507065,0-64.1891937,28.7384644-64.1891937,64.1892014 c0,35.4506989,28.7384911,64.1891632,64.1891937,64.1891632s64.1892014-28.7384644,64.1892014-64.1891632 C189.7218933,89.4165726,160.9833984,60.6781082,125.532692,60.6781082z M125.532692,166.5339508 c-23.0118484,0-41.6666718-18.6547852-41.6666718-41.6666412c0-23.0118866,18.6548233-41.6666794,41.6666718-41.6666794 c23.011879,0,41.6666794,18.6547928,41.6666794,41.6666794 C167.1993713,147.8791656,148.5445709,166.5339508,125.532692,166.5339508z"/> <circle class="st0" cx="192.2580261" cy="58.1419792" r="15.0000019"/></svg></a></li> </ul>
CSS
ul{ display: flex; justify-content: space-between; } li{ width:30%;/* アイコンのサイズは適当に修正してください */ height:auto; aspect-ratio: 1/1; } li a{ border-radius: 12.5%; display: block; width:100%; height:100%; background-color:#000; display: flex; align-items: center; justify-content: center; } li a svg{ width:62.5%; fill:#fff; } li:nth-child(1) a{ background-color: #1D9BF0; } li:nth-child(2) a{ background-color: #1877F2; } li:nth-child(3) a{ background:linear-gradient(45deg, #FFD521 0%, #F50000 50%, #B900B4 100%); } li a:hover{ background-color: #000; } li:nth-child(3) a:hover{ background:linear-gradient(45deg, #000 0%, #000 50%, #000 100%); }

マウスオーバー時のアニメーションが効かない（linear-gradientのhover問題）

今までソーシャルアイコンがベタ色だったからよかったんですが、今回からインスタの背景がグラデーションになったことによりマウスオーバーしてふわっとアニメーションで色を変えたい、といった場合に問題がありました。

グラデーションを表現するlinear-gradientはホバーでtransition効かないんです😥

というわけでもう少し加工します。

CSS
li a{ border-radius: 12.5%; display: block; width:100%; height:100%; background-color: rgba(0,0,0,0);/* 透過率0 */ display: flex; align-items: center; justify-content: center; transition: background-color,.3s;/* ホバーでアニメーション */ } li a svg{ width:62.5%; fill:#fff; } li:nth-child(1){ background-color: #1D9BF0; } li:nth-child(2){ background-color: #1877F2; } li:nth-child(3){ background:linear-gradient(45deg, #FFD521 0%, #F50000 50%, #B900B4 100%); } li a:hover{ background-color: rgba(0,0,0,1);/* ホバーで透過率1 */ }

liタグの背景をブランドカラーにしてaタグの背景を黒で透過率0（透明）を初期状態にし、ホバーで透過率をなし（つまり透明でなくなる）に設定します。これで完成。

まとめ

以下、最終版です。

HTML
<ul> <li><a href=""><svg viewBox="0 0 250 250"><path d="M79.0232925,226.5888062c94.3434067,0,145.9356995-78.1605988,145.9356995-145.9356079 c0-2.2210999-0.045105-4.4319-0.1466064-6.6309967c10.0139923-7.239502,18.7198944-16.2727013,25.5876007-26.5571022 c-9.1907959,4.0821991-19.0807037,6.8339996-29.4555054,8.0742989c10.5890045-6.3487968,18.719696-16.3964996,22.5540009-28.3727989 c-9.9125977,5.8753014-20.8851013,10.1488991-32.5679932,12.4498024 c-9.3600006-9.969202-22.6894073-16.2052021-37.4396973-16.2052021c-28.3279114,0-51.299202,22.9712009-51.299202,51.2875977 c0,4.0258026,0.4510956,7.9394989,1.3307953,11.6948013C80.895195,84.2509003,43.094696,63.8395996,17.8003998,32.8050995 c-4.4094,7.5781021-6.9467001,16.3855019-6.9467001,25.7793007c0,17.7952003,9.055501,33.5041008,22.8246994,42.6942024 c-8.4126987-0.2588043-16.3177986-2.5707016-23.2305984-6.4162064c-0.0113001,0.2140045-0.0113001,0.4288025-0.0113001,0.653801 c0,24.8432999,17.6823959,45.5815964,41.1497955,50.2847061c-4.3078003,1.1721954-8.841198,1.8040924-13.5210991,1.8040924 c-3.3041954,0-6.5181961-0.3269958-9.6418991-0.9250946c6.5293999,20.377594,25.4634972,35.2068939,47.9159966,35.6246948 C58.7809982,196.0621948,36.6667976,204.260498,12.6355,204.260498c-4.1386995,0-8.2208996-0.2368011-12.2355003-0.7102966 C23.1005001,218.0973053,50.0526962,226.5888062,79.0232925,226.5888062"/></svg></a></li> <li><a href=""><svg viewBox="0 0 250 250"><path d="M249.9999695,125.759552c0-69.0355988-55.964386-124.9999771-124.9999695-124.9999771 S0.0000241,56.7239571,0.0000241,125.759552c0,62.391098,45.7106895,114.1040039,105.4687271,123.4808807v-87.3480835H73.7304764 V125.759552H105.46875V98.2204971c0-31.3281708,18.6617508-48.6328087,47.2141571-48.6328087 c13.6763763,0,27.9811401,2.4414062,27.9811401,2.4414062v30.7617149h-15.7624054 c-15.5278473,0-20.3703918,9.6354141-20.3703918,19.520813v23.4479294h34.6679535l-5.5419922,36.1327972H144.53125v87.3480835 C204.2892914,239.8635559,249.9999695,188.15065,249.9999695,125.759552z"/></svg></a></li> <li><a href=""><svg viewBox="0 0 250 250"><path d="M125.532692,22.3898125c33.376503,0,37.3298264,0.1272945,50.510643,0.7286549 c12.1872864,0.5561218,18.8061218,2.5923309,23.2108154,4.3041344c5.8345795,2.2674847,9.998642,4.9764957,14.3726044,9.3504505 c4.3741608,4.3741455,7.0831604,8.5382004,9.350647,14.3728065c1.711792,4.4046745,3.7480164,11.0235138,4.3041382,23.2106247 c0.6013489,13.1809998,0.728653,17.1343307,0.728653,50.5108261s-0.1273041,37.3298187-0.728653,50.5106354 c-0.5561218,12.1873016-2.5923462,18.8061218-4.3041382,23.2108307c-2.2674866,5.8345642-4.9764862,9.9986267-9.3504486,14.3725891 c-4.3741608,4.3741608-8.5382233,7.0831604-14.3728027,9.350647c-4.4046936,1.711792-11.0235291,3.7480316-23.2108154,4.3041382 c-13.1789246,0.6013641-17.1318817,0.728653-50.510643,0.728653s-37.3317184-0.1272888-50.510643-0.728653 c-12.1872902-0.5561066-18.8061295-2.5923462-23.210804-4.3041382c-5.8346062-2.2674866-9.998661-4.9764862-14.372612-9.3504486 c-4.3740654-4.374054-7.0831604-8.5382233-9.3506451-14.3727875c-1.7118015-4.4047089-3.7480125-11.0235291-4.3041325-23.2106628 c-0.6013622-13.1809845-0.7286568-17.1343079-0.7286568-50.5108032s0.1272945-37.3298264,0.7286568-50.510643 c0.5561199-12.187294,2.5923309-18.8061333,4.3041325-23.2108078c2.2674847-5.8346062,4.9764957-9.998661,9.3504505-14.3726158 c4.3741455-4.3741455,8.5382004-7.0831566,14.3728065-9.3506413c4.4046745-1.7118034,11.0235138-3.7480125,23.2106285-4.3041344 C88.2028732,22.517107,92.1562042,22.3898125,125.532692,22.3898125 M125.532692-0.132714 c-33.9480209,0-38.2047806,0.1437832-51.5373077,0.7520728c-13.3050499,0.6071143-22.3913574,2.7201819-30.342617,5.8102732 c-8.2197342,3.1944146-15.190815,7.4684701-22.1400948,14.417654C14.5634899,27.796566,10.2894335,34.7676468,7.0950189,42.987381 c-3.0900908,7.9512596-5.2031584,17.0375671-5.8102727,30.3426132 c-0.6082897,13.3325272-0.7520729,17.5891953-0.7520729,51.5373154c0,33.9480286,0.1437832,38.2047729,0.7520729,51.5372925 c0.6071143,13.305069,2.7201819,22.3913574,5.8102727,30.3426208c3.1944146,8.2196503,7.4684711,15.1908264,14.417654,22.1400909 c6.9492798,6.9492035,13.9203606,11.2232666,22.1400948,14.4176636c7.9512596,3.0901031,17.0375671,5.2031555,30.342617,5.8102722 c13.3325272,0.6083984,17.5892868,0.7520752,51.5373077,0.7520752s38.2047653-0.1436768,51.5373001-0.7520752 c13.3050537-0.6071167,22.3913574-2.7201691,30.3426208-5.8102722c8.2197266-3.194397,15.1908264-7.4684601,22.1400909-14.4176636 c6.9492035-6.9492645,11.2232666-13.9203644,14.4176636-22.1400909c3.0901031-7.9512634,5.2031555-17.0375519,5.8102722-30.3426208 c0.6082916-13.3325195,0.7520752-17.5892639,0.7520752-51.5372925s-0.1437836-38.2047882-0.7520752-51.5373154 c-0.6071167-13.3050461-2.7201691-22.3913536-5.8102722-30.3426132c-3.194397-8.2197342-7.4684601-15.190815-14.4176636-22.1400948 c-6.9492645-6.9491844-13.9203644-11.2232399-22.1400909-14.417654c-7.9512634-3.090091-17.0375671-5.2031584-30.3426208-5.8102732 C163.7374573,0.0110691,159.4807281-0.132714,125.532692-0.132714L125.532692-0.132714z"/> <path class="st0" d="M125.532692,60.6781082c-35.4507065,0-64.1891937,28.7384644-64.1891937,64.1892014 c0,35.4506989,28.7384911,64.1891632,64.1891937,64.1891632s64.1892014-28.7384644,64.1892014-64.1891632 C189.7218933,89.4165726,160.9833984,60.6781082,125.532692,60.6781082z M125.532692,166.5339508 c-23.0118484,0-41.6666718-18.6547852-41.6666718-41.6666412c0-23.0118866,18.6548233-41.6666794,41.6666718-41.6666794 c23.011879,0,41.6666794,18.6547928,41.6666794,41.6666794 C167.1993713,147.8791656,148.5445709,166.5339508,125.532692,166.5339508z"/> <circle class="st0" cx="192.2580261" cy="58.1419792" r="15.0000019"/></svg></a></li> </ul>
CSS
ul{ display: flex; justify-content: space-between; } li{ border-radius: 12.5%; width:30%;/* アイコンのサイズは適当に修正してください */ height:auto; aspect-ratio: 1/1; } li a{ border-radius: 12.5%; display: block; width:100%; height:100%; background-color: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background-color,.3s; } li a svg{ width:62.5%; fill:#fff; } li:nth-child(1){ background-color: #1D9BF0; } li:nth-child(2){ background-color: #1877F2; } li:nth-child(3){ background:linear-gradient(45deg, #FFD521 0%, #F50000 50%, #B900B4 100%); } li a:hover{ background-color: rgba(0,0,0,1); }

これでいつでもサイトに簡単にソーシャルアイコンを設置できます🥳