Update social links

src/scss/components/footer/_footer.scss

@@ -62,5 +62,5 @@
 
 .iati-footer__social {
   display: flex;
-  gap: 0.5rem;
+  gap: 18px;
 }

src/scss/components/footer/footer.stories.ts

@@ -2,7 +2,12 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories";
-import { Linkedin, Twitter, Youtube } from "../../components/icon/icon.stories";
+import {
+  Facebook,
+  Linkedin,
+  X,
+  Youtube,
+} from "../../components/icon/icon.stories";
 import { Default as NewsletterForm } from "../../components/newsletter-form/newsletter-form.stories";
 import {
   AdditionInfo as AdditionalInfoFooterBlock,
@@ -59,20 +64,23 @@ export const Footer: Story = {
             ${CountrySwitcher.render?.call({ ...args })}
             <div class="iati-footer__social">
               <a
-                https://www.linkedin.com/company/international-aid-transparency-initiative/"
+                href="https://www.linkedin.com/company/international-aid-transparency-initiative/"
                 aria-label="LinkedIn"
               >
                 ${Linkedin.render?.call({ ...args })}
               </a>
-              <a href="https://twitter.com/IATI_aid" aria-label="Twitter">
-                ${Twitter.render?.call({ ...args })}
+              <a href="https://x.com/IATI_aid" aria-label="X">
+                ${X.render?.call({ ...args })}
               </a>
               <a
                 href="https://www.youtube.com/channel/UCAVH1gcgJXElsj8ENC-bDQQ"
                 aria-label="YouTube"
               >
                 ${Youtube.render?.call({ ...args })}
               </a>
+              <a href="https://www.facebook.com/IATIaid/" aria-label="Facebook">
+                ${Facebook.render?.call({ ...args })}
+              </a>
             </div>
           </div>
         </div>

src/scss/components/icon/_icon.scss

@@ -1,22 +1,25 @@
 .iati-icon {
   display: inline-block;
-  height: 45px;
-  width: 45px;
-  border-radius: 100%;
-  background-color: white;
+  height: 36px;
+  aspect-ratio: 1 / 1;
   background-repeat: no-repeat;
-  background-size: 60%;
   background-position: center;
+  background-size: 100%;
 
   &--youtube {
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23FF0000' viewBox='0 0 16 16'><path d='M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z'/></svg>");
+    background-image: url("/src/assets/svg/youtube-logo.svg");
+    aspect-ratio: 1.2 / 1;
   }
 
-  &--twitter {
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%231DA1F2' viewBox='0 0 16 16'><path d='M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15'/></svg>");
+  &--x {
+    background-image: url("/src/assets/svg/x-logo.svg");
   }
 
   &--linkedin {
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%230762C8' viewBox='0 0 16 16'><path d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'/></svg>");
+    background-image: url("/src/assets/svg/linkedin-logo.svg");
+  }
+
+  &--facebook {
+    background-image: url("/src/assets/svg/facebook-logo.svg");
   }
 }

src/scss/components/icon/icon.stories.ts

@@ -17,10 +17,14 @@ export const Youtube: Story = {
   render: () => html`<i class="iati-icon iati-icon--youtube"></i>`,
 };
 
-export const Twitter: Story = {
-  render: () => html`<i class="iati-icon iati-icon--twitter"></i>`,
+export const X: Story = {
+  render: () => html`<i class="iati-icon iati-icon--x"></i>`,
 };
 
 export const Linkedin: Story = {
   render: () => html`<i class="iati-icon iati-icon--linkedin"></i>`,
 };
+
+export const Facebook: Story = {
+  render: () => html`<i class="iati-icon iati-icon--facebook"></i>`,
+};