diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index 07fdc89fd658b049ac901cff250ba2a8fedd1ea0..80e2615251c42017f503fa3a0a77365f4396194b 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -83,7 +83,7 @@
   --uw-black: #000;
   --uw-black-1: #dfdfdf;
   --uw-black-2: #a2a2a2;
-  --uw-black-3: #787878;
+  --uw-black-3: #787878; //local  site footer color
   --uw-black-4: #000;
   --uw-black-primary: #000;
   --uw-gold: #fdd54f;
diff --git a/src/patterns/01-core/props/_media.scss b/src/patterns/01-core/props/_media.scss
index ae3a18d90d5b134a803d5430e8cffd53e72fc43d..e50b98316020c31a04c6eedcd56d29fc67065376 100644
--- a/src/patterns/01-core/props/_media.scss
+++ b/src/patterns/01-core/props/_media.scss
@@ -1,6 +1,7 @@
 // Media Query Ranges
 $screen-xxs: 240px;
 $screen-xs: 30rem;
+$screen-fb: 37.5rem;
 $screen-sm: 40.06rem;
 $screen-md: 48.06rem;
 $screen-lg: 63.1875rem;
diff --git a/src/patterns/01-core/props/_sizes.scss b/src/patterns/01-core/props/_sizes.scss
index c4ddcaf94ce9df0814ed7de99541bb8d4ba8853d..6f0f09d1d7665f20514e1e68786c26759ad4e023 100644
--- a/src/patterns/01-core/props/_sizes.scss
+++ b/src/patterns/01-core/props/_sizes.scss
@@ -9,7 +9,9 @@
   --size-2: 1rem;      // 16px sm
   --size-205: 1.25rem; // 20px
   --size-3: 1.5rem;    // 24px md
+  --size-305: 1.75rem;
   --size-4: 2rem;      // 32px lg
+  --size-405: 2.125rem;
   --size-5: 2.5rem;    // 40px
   --size-6: 3rem;      // 48px
   --size-7: 3.5rem;    // 56px xl
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index 03fd07a2652b0ae05883ee14c77649ddc366433c..c8fad0cd9035f6a5546c5112c24b412bb2841afa 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -9,18 +9,14 @@
   width: 100%;
   &__wrapper {
     @include uw-contained-width();
-    display: grid;
-    grid-template-columns: 100%;
     padding: var(--size-2);
     text-size-adjust: none;
-    @media(min-width: $screen-xs) {
+    @media(min-width: $screen-sm) {
+      display: grid;
       grid-template-columns: 50% 50%;
     }
     @media(min-width: $screen-md) {
-      grid-template-columns: 28% auto 14rem;
-    }
-    @media(min-width: $screen-lg) {
-      grid-template-columns: 28% auto 16rem;
+      grid-template-columns: 25% auto 17rem;
     }
   }
   &__address {
@@ -49,7 +45,7 @@
     -webkit-font-smoothing: antialiased;
     grid-column: 1 / 3;
     padding-bottom: var(--size-1);
-    @media(min-width: $screen-xs) {
+    @media(min-width: $screen-sm) {
       grid-column: 1 / 2;
       grid-row: 2 / 3;
     }
@@ -62,10 +58,9 @@
     grid-column: 1 / 3;
     grid-row: 3 / 4;
     margin: 0 auto;
-    max-width: 13rem;
     text-align: center;
     width: 100%;
-    @media(min-width: $screen-xs) {
+    @media(min-width: $screen-sm) {
       grid-column: 2 / 3;
       grid-row: 2 / 3;
     }
@@ -73,7 +68,6 @@
       grid-column: 3 / 4;
       grid-row: 1 / 2;
       margin: 0;
-      max-width: 16rem;
       padding-left: var(--size-1);
       text-align: left;
     }
diff --git a/src/patterns/03-layouts/footer/footer.twig b/src/patterns/03-layouts/footer/footer.twig
index 457d9f6ee3b0dd13c0e1c83c40c7066f83bbad52..892cb10caad1d25e82225402a7e95df631baf6ee 100644
--- a/src/patterns/03-layouts/footer/footer.twig
+++ b/src/patterns/03-layouts/footer/footer.twig
@@ -4,13 +4,18 @@
             {% include "@layouts/site-footer/site-footer.twig" with {
                 body: "The standard Lorem Ipsum passage, used since the 1500s<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                 site_name: "Faculty of Environment",
-                logo_link: "https://uwaterloo.ca/",
+                logo_link: "https://uwaterloo.ca/environment",
                 logo_url: "/images/uwaterloo-logo.svg",
                 logo_alt_text: "Faculty of Environment",
+                social_media: sf_social_media,
                 facebook: "https://www.facebook.com/University.Waterloo"
             } %}
         {% endblock %}
     </div>
+  {%  if pattern_lab %}
+    {%  set faculty = faculty ? faculty : 'org-default' %}
+    {%  set branding_level = branding_level ? branding_level : 'full' %}
+  {% endif %}
     <div class="uw-footer__wrapper">
       {% if branding_level == 'full' %}
       <div class="uw-footer__address">
@@ -24,7 +29,7 @@
         <div class="uw-footer__social">
           {% include "@components/menu/menu--social/menu--social.twig" with {
             'social_media': social_media,
-            social_media_placement: 'global-site-footer',
+            "social_media_placement": 'global-site-footer',
 
           } %}
             <div class="uw-footer__social-directory">
diff --git a/src/patterns/03-layouts/footer/footer.yml b/src/patterns/03-layouts/footer/footer.yml
index 159396d523c7e31687fdac7f0345192b80ae8e25..7882184aa6fd6877280bc8d9ef59b32883d6c362 100644
--- a/src/patterns/03-layouts/footer/footer.yml
+++ b/src/patterns/03-layouts/footer/footer.yml
@@ -64,16 +64,18 @@ footer_menu:
     in_active_trail: false
 social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
-    - text: "Twitter"
-      url: "https://twitter.com/uWaterloo"
-    - text: "YouTube"
-      url: "https://www.youtube.com/user/uwaterloo"
     - text: "Instagram"
       url: "https://www.instagram.com/uofwaterloo/"
+    - text: "Tiktok"
+      url: "https://www.tiktok.com"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
 social_media_placement: "global-site-footer"
 modifier_classes: 'black'
 territorial_text: '<p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land granted to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is coordinated within our <a href="https://uwaterloo.ca/indigenous" >Office of Indigenous Relations</a>.</p>'
diff --git a/src/patterns/03-layouts/site-container/site-container.yml b/src/patterns/03-layouts/site-container/site-container.yml
index f67d72c30dc4005034c5d53ddceeb5196c4aae0d..23b314e311e9587dd938efde349c97ac23232355 100644
--- a/src/patterns/03-layouts/site-container/site-container.yml
+++ b/src/patterns/03-layouts/site-container/site-container.yml
@@ -116,18 +116,32 @@ footer_menu:
         attributes:
           class: ''
     in_active_trail: false
-social_media:
+sf_social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
+    - text: "Instagram"
+      url: "https://www.instagram.com/uofwaterloo/"
     - text: "Twitter"
       url: "https://twitter.com/uWaterloo"
+    - text: "LinkedIn"
+      url: "https://www.linkedin.com/edu/school?id=10875"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
     - text: "YouTube"
       url: "https://www.youtube.com/user/uwaterloo"
+social_media:
+  menu_tree:
     - text: "Instagram"
       url: "https://www.instagram.com/uofwaterloo/"
+    - text: "Tiktok"
+      url: "https://www.tiktok.com"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
 social_media_placement: "global-site-footer"
 nav_items:
   - text: 'About Psychology'
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
index 1878934f4fc2eb8249604776b87c2e0688029f9c..c32c6e5df812d4dfa3b4df20af0a924108bed1a5 100644
--- a/src/patterns/03-layouts/site-footer/_site-footer.scss
+++ b/src/patterns/03-layouts/site-footer/_site-footer.scss
@@ -55,6 +55,11 @@
     @media(min-width: $screen-xl) {
       //padding:0;
     }
+    .social-media-list-item{
+      &:last-child {
+        //display: none;
+      }
+    }
   }
 
   &__content {
diff --git a/src/patterns/03-layouts/site-footer/site-footer.twig b/src/patterns/03-layouts/site-footer/site-footer.twig
index 66489b4c340f0a820b879d650c1d2dccf8bfee00..d50ebe1cf7534305b70e0373a0122c37b270ec5b 100644
--- a/src/patterns/03-layouts/site-footer/site-footer.twig
+++ b/src/patterns/03-layouts/site-footer/site-footer.twig
@@ -17,7 +17,7 @@
     {%  endif %}
     <div class="uw-site-footer__social-media">
       {% include "@components/menu/menu--social/menu--social.twig" with {
-        social_media_placement: 'local-site-footer',
+        "social_media_placement": 'local-site-footer',
       } %}
     </div>
     <div class="uw-site-footer__content">
diff --git a/src/patterns/03-layouts/site-footer/site-footer.yml b/src/patterns/03-layouts/site-footer/site-footer.yml
index 54ae89b025f038fbe9101380060a2edafebc24fc..eaedf19047379b5ed3e271b3b3c68dfb020e0d52 100644
--- a/src/patterns/03-layouts/site-footer/site-footer.yml
+++ b/src/patterns/03-layouts/site-footer/site-footer.yml
@@ -7,16 +7,14 @@ home_link : "#"
 facebook: "https://www.facebook.com/University.Waterloo"
 social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
-    - text: "Twitter"
-      url: "https://twitter.com/uWaterloo"
-    - text: "YouTube"
-      url: "https://www.youtube.com/user/uwaterloo"
     - text: "Instagram"
       url: "https://www.instagram.com/uofwaterloo/"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
-    - text: "Snapchat"
-      url: "https://www.snapchat.com/add/uofwaterloo"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
 social_media_placement: "local-site-footer"
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index ba5f1c5381844192f4b5d451ced89d67d60c1a9c..c9124e0ed151a8bcbe67792d31f9e000d52871e1 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -51,7 +51,6 @@
 @forward 'site-logo/site-logo';
 @forward 'site-name/site-name';
 @forward 'skiplinks/skiplinks';
-@forward 'social-media/social-media--icon/social-media--icon';
 @forward 'svg/svg';
 @forward 'tableau/tableau';
 @forward 'tabs/tabs';
diff --git a/src/patterns/04-components/icon/_icon.scss b/src/patterns/04-components/icon/_icon.scss
index d793bc144c3c8efd70d23f5b9a892e2f0f550db4..d433c31ea88b518b42ed5ad1d5de3eee1d541f87 100644
--- a/src/patterns/04-components/icon/_icon.scss
+++ b/src/patterns/04-components/icon/_icon.scss
@@ -16,4 +16,15 @@
   * {
     transition: none;
   }
+  .icon--social &{
+    align-items: center;
+    display: inline-flex;
+    height: var(--size-3);
+    line-height: normal;
+    width: var(--size-3);
+    svg {
+      height: var(--size-3);
+      width: var(--size-3);
+    }
+  }
 }
diff --git a/src/patterns/04-components/icon/icon--button/_icon--button.scss b/src/patterns/04-components/icon/icon--button/_icon--button.scss
index d28186dacdeee09696a9fb795c5009b9fe2b5ce0..029f2d7c22095fdf6d48cee66729ce3925e81a01 100644
--- a/src/patterns/04-components/icon/icon--button/_icon--button.scss
+++ b/src/patterns/04-components/icon/icon--button/_icon--button.scss
@@ -19,7 +19,7 @@ $icon-font-size-small: var(--font-size-0) !default;
   height: var(--size-6);
   line-height: normal;
   padding: 0 var(--size-1);
-  transition: background 0.2s ease-in;
+  transition: all  0.2s ease-in;
 
   .uw-icon {
     align-items: center;
@@ -29,7 +29,6 @@ $icon-font-size-small: var(--font-size-0) !default;
       fill: var(--uw-black);
     }
   }
-
   &.uw-icon-link {
     color: var(--uw-black);
     text-decoration: none;
@@ -38,7 +37,6 @@ $icon-font-size-small: var(--font-size-0) !default;
     &:focus {
       background: $button-background-color-hover;
       color: var(--uw-black) !important;
-
       .uw-icon {
         svg{
           fill: var(--uw-black);
@@ -46,4 +44,48 @@ $icon-font-size-small: var(--font-size-0) !default;
       }
     }
   }
+  &.icon--social{
+    border-radius: 50%;
+    height: var(--size-4);
+    padding: 0 var(--size-05);
+    width: var(--size-4);
+    .uw-site-footer__block &{
+      background: none;
+      border-color: var(--uw-black-3);
+      .uw-icon {
+        svg{
+          fill: var(--uw-white);
+        }
+      }
+      &:hover,
+      &:focus {
+        background: var(--uw-white);
+        border-color: var(--uw-white);
+        .uw-icon {
+          svg{
+            fill: var(--uw-black-3);
+          }
+        }
+      }
+    }
+    .uw-footer__social & {
+      background: none;
+      border-color: solid var(--uw-black);
+      .uw-icon {
+        svg{
+          fill: var(--uw-white);
+        }
+      }
+      &:hover,
+      &:focus {
+        border-color: solid var(--uw-gold);
+        background: var(--uw-gold);
+        .uw-icon {
+          svg{
+            fill: var(--uw-black);
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/patterns/04-components/links/_links.scss b/src/patterns/04-components/links/_links.scss
index 6b536f89170588548212360a8d00d1f3ccb98fa6..3687ca1404aedf0c9b4947feeddb917ff5804ac4 100644
--- a/src/patterns/04-components/links/_links.scss
+++ b/src/patterns/04-components/links/_links.scss
@@ -54,12 +54,12 @@
           var(--uw-black)
         );
       }
-      .uw-site-footer__social-media a {
-        @include link(
-          var(--uw-gray),
-          var(--uw-gray)
-        );
-      }
+      //.uw-site-footer__social-media a {
+      //  @include link(
+      //    var(--uw-gray),
+      //    var(--uw-gray)
+      //  );
+      //}
       .uw-footer__social-directory a{
         @include link-reverse(
           var(--uw-gold),
@@ -189,12 +189,12 @@
           var(--uw-black)
         );
       }
-      .uw-site-footer__social-media a {
-        @include link(
-          var(--gray-5),
-          var(--gray-5)
-        );
-      }
+      //.uw-site-footer__social-media a {
+      //  @include link(
+      //    var(--gray-5),
+      //    var(--gray-5)
+      //  );
+      //}
       .uw-footer__social-directory a{
         @include link-reverse(
           var(--uw-gold),
diff --git a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
index f760379c6323501d197a3677de796f68e05ac7db..7d057c2c92e5dfbd2494e8eb4814e7d929d55f01 100644
--- a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -49,7 +49,7 @@
     &:nth-child(9) {
       border-width: var(--size-xs);
     }
-    @media(min-width: $screen-xs) {
+    @media(min-width: $screen-sm)  {
       padding: 0 0 0 var(--size-1);
       text-align: left;
       &:nth-child(1) {
diff --git a/src/patterns/04-components/menu/menu--social/_menu--social.scss b/src/patterns/04-components/menu/menu--social/_menu--social.scss
index 8ec163d37c47f3b040a5b3bbc754f6b51e4e7078..b549451c001d25e552c240eb9b95a7feb99b293e 100644
--- a/src/patterns/04-components/menu/menu--social/_menu--social.scss
+++ b/src/patterns/04-components/menu/menu--social/_menu--social.scss
@@ -22,29 +22,3 @@
     padding: 0;
   }
 }
-.social-media-i {
-  &::before{
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-}
-.social-media-link {
-  background-color: var(--uw-white);
-  border-radius: 3px;
-  display: block;
-  height: 2.125rem;
-  padding: 0.225rem;
-  position: relative;
-  width: 2.125rem;
-  @media(min-width: $screen-lg) {
-    height: var(--size-5);
-    padding: 0.24rem;
-    width: var(--size-5);
-  }
-  &:hover,
-  &:focus{
-    background-color: transparent;
-    text-decoration: none;
-  }
-}
diff --git a/src/patterns/04-components/menu/menu--social/menu--social.twig b/src/patterns/04-components/menu/menu--social/menu--social.twig
index 3cfc73d92a92316353312ad9a69c716cea510512..5d6a568a6f98dfcc4c50f8d5ae2807e35c28ab91 100644
--- a/src/patterns/04-components/menu/menu--social/menu--social.twig
+++ b/src/patterns/04-components/menu/menu--social/menu--social.twig
@@ -2,11 +2,14 @@
   <ul class="social-media-list {{ social_media_menu_class }}">
     {% for item in social_media.menu_tree %}
       <li class="social-media-list-item">
-        {% include "@components/social-media/social-media--icon/social-media--icon.twig" with {
+        {% include '@components/icon/icon--button/icon--button.twig' with {
+          'url': item.url,
           "text": item.text,
-          "url": item.url,
-          "social_media_placement": social_media_placement
-        }%}
+          "name": item.text | lower,
+          "is_hidden": true,
+          "social_media_placement": social_media_placement,
+          "modifier_classes": "icon--button icon--social",
+        } %}
       </li>
     {% endfor %}
   </ul>
diff --git a/src/patterns/04-components/menu/menu--social/menu--social.yml b/src/patterns/04-components/menu/menu--social/menu--social.yml
index 2358ec1730ae2f8920d184908ae8d0c687646e67..d735aa0ca0f3d56bb6739f18713121a9b94c5247 100644
--- a/src/patterns/04-components/menu/menu--social/menu--social.yml
+++ b/src/patterns/04-components/menu/menu--social/menu--social.yml
@@ -1,13 +1,15 @@
 social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
-    - text: "Twitter"
-      url: "https://twitter.com/uWaterloo"
-    - text: "YouTube"
-      url: "https://www.youtube.com/user/uwaterloo"
     - text: "Instagram"
       url: "https://www.instagram.com/uofwaterloo/"
+    - text: "Tiktok"
+      url: "https://www.tiktok.com"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
 social_media_placement: ""
diff --git a/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss b/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
deleted file mode 100644
index 09eec3938a3739bc13591992834e2b38c3abf879..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@use '../../../01-core' as *;
-
-$social-accounts: 'facebook', 'twitter', 'youtube', 'instagram', 'linkedin', 'snapchat';
-
-.uw-footer{
-  .ifdsu{
-    height: 100%;
-    width: 100%;
-    &::before{
-      content: '';
-    }
-  }
-}
-.uw-footer__wrapper {
-  a{
-    @each $social in $social-accounts {
-      .fdsu-#{$social}::before {
-        @include svg-background-color(var(--uw-black),$social);
-      }
-    }
-    &:hover,
-    &:focus{
-      @each $social in $social-accounts {
-        .fdsu-#{$social}::before {
-          @include svg-background-color(var(--uw-gold),$social);
-        }
-      }
-    }
-  }
-}
-.uw-site-footer {
-  a {
-    @each $social in $social-accounts {
-      .fdsu-#{$social}::before {
-        @include svg-background-color(var(--uw-black-3),$social);
-      }
-    }
-    &:hover,
-    &:focus{
-      @each $social in $social-accounts {
-        .fdsu-#{$social}::before {
-          @include svg-background-color(var(--uw-white),$social);
-        }
-      }
-    }
-  }
-}
diff --git a/src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig b/src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig
deleted file mode 100644
index d9a279406007eb909987c477f7d928a86e48bf7b..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-<a href="{{ url }}" class="social-media-link {{ social_media_placement }}" title="{{ text|lower }}">
-  <i class="ifdsu fdsu-{{ text|lower }} social-media-i {{ social_media_placement }}"></i>
-  <span class="off-screen">{{ text }}</span>
-</a>
diff --git a/src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml b/src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml
deleted file mode 100644
index 7bc50593f11d9a257861a312fd558e4b9f0eecec..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-text: "facebook"
-url: "https://www.facebook.com/university.waterloo"
-social_media_placement: "global-site-footer"
diff --git a/src/patterns/04-components/svg/icons/_facebook-box.svg.twig b/src/patterns/04-components/svg/icons/_facebook-box.svg.twig
index b8bb15c787b4399f33809d112e11f6b78336404e..23aeb7ff1561f6da07b98ce253a8736e0b4684ec 100644
--- a/src/patterns/04-components/svg/icons/_facebook-box.svg.twig
+++ b/src/patterns/04-components/svg/icons/_facebook-box.svg.twig
@@ -1,4 +1,7 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>facebook-box</title>
-<path d="M25.951 2.351h-19.936c-2.404 0-4.352 1.947-4.352 4.351v19.936c0 2.404 1.948 4.353 4.352 4.353h19.936c2.403 0 4.352-1.949 4.352-4.353v-19.936c0-2.404-1.949-4.351-4.352-4.351zM24.221 11.263l-1.899 0.001c-1.491 0-1.781 0.71-1.781 1.749v2.294h3.555l-0.463 3.591h-3.093v9.212h-3.708v-9.212h-3.101v-3.591h3.101v-2.649c0-3.075 1.876-4.747 4.618-4.747 1.315 0 2.442 0.097 2.77 0.142v3.21z"></path>
+  <g>
+    <path class="st0" d="M32,16.1c0-8.84-7.16-16-16-16S0,7.26,0,16.1C0,24.08,5.85,30.7,13.5,31.9V20.72H9.44V16.1h4.06v-3.53
+		c0-4.01,2.39-6.22,6.04-6.22c1.75,0,3.58,0.31,3.58,0.31v3.94h-2.02c-1.99,0-2.61,1.23-2.61,2.5v3h4.44l-0.71,4.62H18.5V31.9
+		C26.15,30.7,32,24.08,32,16.1z"/>
+  </g>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_facebook.svg.twig b/src/patterns/04-components/svg/icons/_facebook.svg.twig
index 80eadf05b1b53a9232f8b0ad9f2789d166087fca..9daa61d0f1169781a102eb23e184fa3864c2f971 100644
--- a/src/patterns/04-components/svg/icons/_facebook.svg.twig
+++ b/src/patterns/04-components/svg/icons/_facebook.svg.twig
@@ -1,4 +1,4 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>facebook</title>
-<path d="M22.311 17.806l0.672-5.215h-5.164v-3.332c0-1.509 0.421-2.54 2.585-2.54l2.759-0.001v-4.664c-0.477-0.065-2.113-0.206-4.024-0.206-3.982 0-6.708 2.429-6.708 6.895v3.847h-4.505v5.217h4.505v13.38h5.386v-13.38l4.493 0.001z"></path>
+  <title>facebook</title>
+  <path d="M22.311 17.806l0.672-5.215h-5.164v-3.332c0-1.509 0.421-2.54 2.585-2.54l2.759-0.001v-4.664c-0.477-0.065-2.113-0.206-4.024-0.206-3.982 0-6.708 2.429-6.708 6.895v3.847h-4.505v5.217h4.505v13.38h5.386v-13.38l4.493 0.001z"></path>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_instagram-box.svg.twig b/src/patterns/04-components/svg/icons/_instagram-box.svg.twig
index 0cbf40ebc308ae34e0252fa91944ec1c2b70879c..82f3a12401ed56ccc8337eb7c22ea3668161e8ca 100644
--- a/src/patterns/04-components/svg/icons/_instagram-box.svg.twig
+++ b/src/patterns/04-components/svg/icons/_instagram-box.svg.twig
@@ -1,4 +1,27 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>instagram-box</title>
-<path d="M18.629 13.87h1.885c0.415 0 0.751-0.339 0.751-0.752v-1.796c0-0.413-0.336-0.754-0.751-0.754h-1.885c-0.415 0-0.753 0.341-0.753 0.754v1.797c0 0.412 0.338 0.751 0.753 0.751zM15.819 13.919c1.852 0 3.353 1.453 3.353 3.246s-1.501 3.247-3.353 3.247c-1.851 0-3.352-1.453-3.352-3.247s1.501-3.246 3.352-3.246zM21.007 17.347c0 2.775-2.323 5.024-5.188 5.024s-5.187-2.249-5.187-5.024c0-0.499 0.077-0.977 0.216-1.431h-1.533v7.046c0 0.367 0.298 0.663 0.663 0.663h11.618c0.366 0 0.662-0.296 0.662-0.663v-7.046h-1.468c0.14 0.455 0.216 0.934 0.216 1.431zM19.617 14.012h1.884c0.415 0 0.751-0.338 0.751-0.751v-1.795c0-0.413-0.336-0.755-0.751-0.755h-1.884c-0.416 0-0.754 0.343-0.754 0.755v1.796c0 0.412 0.338 0.75 0.754 0.75zM25.787 2.357h-19.969c-2.408 0-4.359 1.951-4.359 4.361v19.968c0 2.406 1.951 4.359 4.359 4.359h19.969c2.408 0 4.359-1.953 4.359-4.359v-19.968c0-2.41-1.951-4.361-4.359-4.361zM24.146 23.403c0 1.177-0.963 2.14-2.141 2.14h-12.403c-1.177 0-2.142-0.961-2.142-2.139v-12.403c0-1.179 0.965-2.141 2.142-2.141h12.402c1.178 0 2.141 0.962 2.141 2.141v12.403h0.001z"></path>
+  <g>
+    <defs>
+      <path id="SVGID_1_" d="M9.31,0.26C7.62,0.34,6.46,0.61,5.45,1.01C4.41,1.41,3.52,1.96,2.64,2.84C1.76,3.73,1.22,4.62,0.82,5.66
+			C0.42,6.67,0.16,7.83,0.08,9.52C0.01,11.21-0.01,11.75,0,16.07c0.01,4.31,0.03,4.86,0.11,6.55c0.08,1.69,0.35,2.84,0.75,3.85
+			c0.41,1.04,0.95,1.93,1.84,2.81c0.88,0.88,1.77,1.42,2.82,1.83c1.01,0.39,2.17,0.66,3.86,0.73c1.69,0.07,2.24,0.09,6.55,0.08
+			c4.32-0.01,4.86-0.03,6.55-0.11c1.69-0.08,2.84-0.35,3.85-0.75c1.04-0.41,1.93-0.95,2.81-1.84c0.88-0.88,1.42-1.77,1.83-2.82
+			c0.39-1.01,0.66-2.17,0.73-3.86c0.07-1.7,0.09-2.24,0.08-6.55c-0.01-4.31-0.03-4.86-0.11-6.55c-0.08-1.69-0.35-2.85-0.75-3.86
+			c-0.41-1.04-0.95-1.93-1.84-2.81c-0.88-0.88-1.77-1.42-2.82-1.83c-1.01-0.39-2.17-0.66-3.86-0.73c-1.69-0.08-2.24-0.09-6.55-0.08
+			C11.54,0.16,11,0.18,9.31,0.26 M9.49,28.98c-1.55-0.07-2.39-0.32-2.95-0.54c-0.74-0.29-1.27-0.63-1.83-1.19
+			c-0.56-0.56-0.9-1.08-1.19-1.82c-0.22-0.56-0.48-1.4-0.55-2.95c-0.08-1.67-0.1-2.18-0.1-6.42c-0.01-4.24,0.01-4.74,0.08-6.42
+			C3.01,8.1,3.27,7.25,3.49,6.69c0.29-0.74,0.63-1.27,1.19-1.83c0.56-0.56,1.08-0.9,1.82-1.19c0.56-0.22,1.4-0.48,2.95-0.55
+			c1.68-0.08,2.18-0.1,6.42-0.1c4.24-0.01,4.74,0.01,6.42,0.08c1.55,0.07,2.39,0.32,2.95,0.54c0.74,0.29,1.27,0.63,1.83,1.19
+			c0.56,0.56,0.9,1.08,1.19,1.83c0.22,0.56,0.48,1.4,0.55,2.95c0.08,1.68,0.1,2.18,0.11,6.42c0.01,4.24-0.01,4.74-0.08,6.42
+			c-0.07,1.55-0.32,2.39-0.54,2.95c-0.29,0.74-0.63,1.27-1.19,1.83c-0.55,0.56-1.08,0.9-1.82,1.19c-0.56,0.22-1.4,0.48-2.95,0.55
+			c-1.68,0.08-2.18,0.1-6.42,0.1C11.67,29.07,11.17,29.06,9.49,28.98 M22.45,7.55c0,1.05,0.86,1.9,1.91,1.9
+			c1.05,0,1.9-0.86,1.9-1.91c0-1.05-0.86-1.9-1.91-1.9C23.3,5.64,22.44,6.49,22.45,7.55 M7.73,16.05c0.01,4.51,3.67,8.15,8.17,8.14
+			c4.51-0.01,8.15-3.67,8.14-8.17c-0.01-4.5-3.67-8.15-8.17-8.14C11.37,7.89,7.72,11.55,7.73,16.05 M10.59,16.05
+			c-0.01-2.92,2.36-5.3,5.29-5.31c2.92-0.01,5.3,2.36,5.31,5.29c0.01,2.93-2.36,5.3-5.29,5.31C12.97,21.34,10.6,18.97,10.59,16.05"
+      />
+    </defs>
+    <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+    <clipPath id="SVGID_00000046315800585618256990000016117885291638299784_">
+      <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+    </clipPath>
+  </g>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_instagram.svg.twig b/src/patterns/04-components/svg/icons/_instagram.svg.twig
index f3dda1de7fc3a767a9018c32826849f4fac6f830..b1985f2e93ff56f07ce66fe39fdc62b786b9fcf9 100644
--- a/src/patterns/04-components/svg/icons/_instagram.svg.twig
+++ b/src/patterns/04-components/svg/icons/_instagram.svg.twig
@@ -1,4 +1,23 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>instagram</title>
-<path d="M5.134 2.557h20.928c1.988 0 3.614 1.625 3.614 3.614v20.931c0 1.987-1.625 3.609-3.614 3.609h-20.928c-1.987 0-3.615-1.62-3.615-3.609v-20.931c0-1.988 1.629-3.614 3.615-3.614zM22.033 5.682c-0.7 0-1.271 0.576-1.271 1.272v3.033c0 0.697 0.571 1.269 1.271 1.269h3.182c0.7 0 1.267-0.572 1.267-1.269v-3.033c0-0.697-0.567-1.272-1.267-1.272h-3.182zM26.493 14.464h-2.477c0.237 0.767 0.365 1.574 0.365 2.415 0 4.683-3.92 8.481-8.756 8.481-4.834 0-8.753-3.797-8.753-8.481 0-0.842 0.129-1.648 0.363-2.415h-2.585v11.892c0 0.619 0.503 1.119 1.119 1.119h19.606c0.618 0 1.118-0.5 1.118-1.119v-11.892zM15.625 11.094c-3.122 0-5.657 2.453-5.657 5.479s2.535 5.481 5.657 5.481c3.123 0 5.658-2.454 5.658-5.481 0-3.025-2.535-5.479-5.658-5.479z"></path>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<g>
+  <g>
+    <path id="SVGID_1_" d="M9.86,1.57C8.31,1.65,7.25,1.89,6.32,2.26C5.37,2.62,4.56,3.12,3.75,3.94c-0.82,0.82-1.3,1.63-1.67,2.58
+			C1.72,7.45,1.47,8.51,1.4,10.06c-0.06,1.55-0.09,2.05-0.07,6.01c0.01,3.95,0.02,4.45,0.1,6.01c0.07,1.55,0.32,2.61,0.68,3.53
+			c0.38,0.95,0.87,1.77,1.68,2.57c0.8,0.8,1.62,1.3,2.58,1.68c0.93,0.35,1.99,0.61,3.53,0.67s2.05,0.09,6.01,0.07
+			c3.96-0.01,4.45-0.02,6.01-0.1c1.55-0.07,2.61-0.32,3.53-0.68c0.95-0.38,1.77-0.87,2.57-1.68c0.8-0.8,1.3-1.62,1.68-2.58
+			c0.35-0.93,0.61-1.99,0.67-3.53c0.06-1.56,0.09-2.05,0.07-6.01c-0.01-3.95-0.02-4.45-0.1-6.01s-0.32-2.61-0.68-3.53
+			c-0.38-0.95-0.87-1.77-1.68-2.57c-0.8-0.8-1.62-1.3-2.58-1.68c-0.93-0.35-1.99-0.61-3.53-0.67c-1.55-0.07-2.05-0.09-6.01-0.07
+			C11.9,1.48,11.41,1.5,9.86,1.57 M10.03,27.9c-1.43-0.06-2.19-0.29-2.71-0.5c-0.68-0.27-1.17-0.57-1.68-1.08
+			c-0.51-0.51-0.83-0.99-1.08-1.67c-0.21-0.51-0.44-1.28-0.5-2.71c-0.07-1.54-0.1-2-0.1-5.89c-0.01-3.89,0.01-4.34,0.07-5.89
+			c0.05-1.4,0.29-2.18,0.5-2.71C4.8,6.78,5.1,6.29,5.62,5.78S6.6,4.95,7.29,4.69c0.51-0.21,1.28-0.44,2.71-0.5
+			c1.54-0.07,2-0.1,5.89-0.1c3.89-0.01,4.34,0.01,5.89,0.07c1.43,0.06,2.19,0.29,2.71,0.5c0.68,0.27,1.17,0.57,1.68,1.08
+			c0.51,0.51,0.83,0.99,1.08,1.68c0.21,0.51,0.44,1.28,0.5,2.71c0.07,1.54,0.1,2,0.1,5.89s-0.01,4.34-0.07,5.89
+			c-0.06,1.43-0.29,2.19-0.5,2.71c-0.27,0.68-0.57,1.17-1.08,1.68c-0.5,0.51-0.99,0.83-1.67,1.08c-0.51,0.21-1.28,0.44-2.71,0.5
+			c-1.54,0.07-2,0.1-5.89,0.1C12.03,27.97,11.56,27.97,10.03,27.9 M21.9,8.25c0,0.96,0.79,1.74,1.75,1.74S25.4,9.2,25.4,8.24
+			S24.6,6.5,23.64,6.5S21.9,7.28,21.9,8.25 M8.41,16.04c0.01,4.13,3.36,7.47,7.48,7.46c4.13-0.01,7.47-3.36,7.46-7.48
+			c-0.01-4.12-3.36-7.47-7.48-7.46C11.75,8.57,8.41,11.92,8.41,16.04 M11.03,16.04c-0.01-2.68,2.16-4.86,4.85-4.86
+			c2.68-0.01,4.86,2.16,4.86,4.85s-2.16,4.86-4.85,4.86C13.21,20.89,11.04,18.72,11.03,16.04"/>
+  </g>
+</g>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_linkedin-box.svg.twig b/src/patterns/04-components/svg/icons/_linkedin-box.svg.twig
index 534ef95da55bc5c51a181b699426997e4882d878..81b675729e504a9b546e9625c012709e58a9e100 100644
--- a/src/patterns/04-components/svg/icons/_linkedin-box.svg.twig
+++ b/src/patterns/04-components/svg/icons/_linkedin-box.svg.twig
@@ -1,4 +1,4 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>linkedin-box</title>
-<path d="M25.513 3.020h-19.058c-2.297 0-4.161 1.861-4.161 4.161v19.056c0 2.296 1.864 4.16 4.161 4.16h19.058c2.297 0 4.16-1.864 4.16-4.16v-19.055c-0-2.3-1.863-4.162-4.16-4.162zM12.313 22.809h-2.883v-8.676h2.883v8.676zM10.87 12.948h-0.017c-0.969 0-1.594-0.665-1.594-1.497 0-0.852 0.646-1.498 1.63-1.498 0.988 0 1.594 0.647 1.613 1.498 0 0.833-0.626 1.497-1.632 1.497zM22.71 22.809h-2.884v-4.642c0-1.164-0.418-1.962-1.461-1.962-0.797 0-1.27 0.538-1.479 1.056-0.077 0.184-0.095 0.446-0.095 0.703v4.846h-2.883c0 0 0.038-7.86 0-8.677h2.883v1.229c0.385-0.591 1.068-1.432 2.599-1.432 1.896 0 3.319 1.239 3.319 3.905v4.974zM16.791 15.392v-0.030c-0.006 0.010-0.015 0.020-0.020 0.030h0.020z"></path>
+  <title>linkedin</title>
+  <path d="M8.426 29.83v-18.25h-6.065v18.25h6.065zM5.391 9.088c2.118 0 3.434-1.398 3.434-3.15-0.040-1.792-1.316-3.152-3.394-3.152-2.072 0-3.43 1.36-3.43 3.152 0 1.751 1.316 3.15 3.353 3.15h0.036zM11.783 29.83h6.065v-10.193c0-0.541 0.039-1.092 0.2-1.479 0.439-1.089 1.435-2.221 3.112-2.221 2.195 0 3.073 1.679 3.073 4.128v9.766h6.065v-10.464c0-5.607-2.992-8.214-6.982-8.214-3.272 0-4.707 1.83-5.511 3.074h0.042v-2.646h-6.065c0.082 1.717 0.002 18.25 0.002 18.25v0z"></path>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_linkedin.svg.twig b/src/patterns/04-components/svg/icons/_linkedin.svg.twig
index c7f73b0b8e9666186da94127a33055fc0a5e352c..81b675729e504a9b546e9625c012709e58a9e100 100644
--- a/src/patterns/04-components/svg/icons/_linkedin.svg.twig
+++ b/src/patterns/04-components/svg/icons/_linkedin.svg.twig
@@ -1,4 +1,4 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>linkedin</title>
-<path d="M8.426 29.83v-18.25h-6.065v18.25h6.065zM5.391 9.088c2.118 0 3.434-1.398 3.434-3.15-0.040-1.792-1.316-3.152-3.394-3.152-2.072 0-3.43 1.36-3.43 3.152 0 1.751 1.316 3.15 3.353 3.15h0.036zM11.783 29.83h6.065v-10.193c0-0.541 0.039-1.092 0.2-1.479 0.439-1.089 1.435-2.221 3.112-2.221 2.195 0 3.073 1.679 3.073 4.128v9.766h6.065v-10.464c0-5.607-2.992-8.214-6.982-8.214-3.272 0-4.707 1.83-5.511 3.074h0.042v-2.646h-6.065c0.082 1.717 0.002 18.25 0.002 18.25v0z"></path>
+  <title>linkedin</title>
+  <path d="M8.426 29.83v-18.25h-6.065v18.25h6.065zM5.391 9.088c2.118 0 3.434-1.398 3.434-3.15-0.040-1.792-1.316-3.152-3.394-3.152-2.072 0-3.43 1.36-3.43 3.152 0 1.751 1.316 3.15 3.353 3.15h0.036zM11.783 29.83h6.065v-10.193c0-0.541 0.039-1.092 0.2-1.479 0.439-1.089 1.435-2.221 3.112-2.221 2.195 0 3.073 1.679 3.073 4.128v9.766h6.065v-10.464c0-5.607-2.992-8.214-6.982-8.214-3.272 0-4.707 1.83-5.511 3.074h0.042v-2.646h-6.065c0.082 1.717 0.002 18.25 0.002 18.25v0z"></path>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_rss.svg.twig b/src/patterns/04-components/svg/icons/_rss.svg.twig
index 8e4c6a8e4d3d7f47c56cec2addbcf596009361ce..99c04a0b0ae3f9c1534635c6507caf66a50134dd 100644
--- a/src/patterns/04-components/svg/icons/_rss.svg.twig
+++ b/src/patterns/04-components/svg/icons/_rss.svg.twig
@@ -1,5 +1,4 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-     viewBox="0 0 28.8 28.8">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>RSS</title>
   <path d="M10.2,21.7c0,1.7-1.4,3.1-3.1,3.1S4,23.5,4,21.7c0-1.7,1.4-3.1,3.1-3.1S10.2,20,10.2,21.7L10.2,21.7z M18.7,24
 	c-0.4-7.5-6.4-13.5-13.9-13.9c-0.5,0-0.8,0.3-0.8,0.8v2.3C4,13.6,4.3,14,4.6,14c5.4,0.4,9.7,4.7,10.1,10.1c0,0.4,0.4,0.7,0.8,0.7
diff --git a/src/patterns/04-components/svg/icons/_tiktok-box.svg.twig b/src/patterns/04-components/svg/icons/_tiktok-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3353b69f87ae561864ffa411064ffdcfd8b91bf8
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_tiktok-box.svg.twig
@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#231F20;}
+</style>
+<path class="st0" d="M18.91,23.34c-0.1,2.34-2.08,4.25-4.5,4.25c-0.55,0-1.09-0.1-1.58-0.29c0.5,0.17,1.03,0.29,1.58,0.29
+	C16.85,27.59,18.83,25.7,18.91,23.34V2.33h3.93c0.38,2,1.6,3.72,3.28,4.78l0,0c1.16,0.74,2.57,1.18,4.06,1.18v1.16l0,0v4.08
+	c-2.78,0-5.36-0.88-7.47-2.34v10.66c0,5.32-4.42,9.65-9.87,9.65c-2.1,0-4.06-0.65-5.66-1.75l0,0c-2.55-1.75-4.21-4.63-4.21-7.89
+	c0-5.32,4.42-9.65,9.87-9.65c0.46,0,0.9,0.04,1.33,0.1v1.24c-4.96,0.1-9.02,3.81-9.57,8.56c0.55-4.75,4.61-8.46,9.59-8.56v4.12
+	c-0.42-0.13-0.86-0.21-1.33-0.21c-2.48,0-4.52,1.98-4.52,4.4c0,1.7,0.99,3.16,2.42,3.91l0,0c0.63,0.32,1.33,0.51,2.1,0.51
+	c2.42,0,4.4-1.89,4.5-4.25L17.36,1h5.36c0,0.46,0.04,0.9,0.13,1.33h-3.93L18.91,23.34z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_tiktok.svg.twig b/src/patterns/04-components/svg/icons/_tiktok.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..828c921da6974443548ee79e2f483635437a6090
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_tiktok.svg.twig
@@ -0,0 +1,9 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+  <path d="M18.27,23.38c-0.09,2.27-2.01,4.12-4.36,4.12c-0.54,0-1.05-0.09-1.53-0.28c0.48,0.17,1,0.28,1.53,0.28
+	C16.28,27.5,18.2,25.67,18.27,23.38V3.01h3.81c0.37,1.94,1.55,3.6,3.18,4.64l0,0c1.13,0.72,2.5,1.15,3.94,1.15v1.13l0,0v3.96
+	c-2.7,0-5.19-0.85-7.25-2.27v10.33c0,5.16-4.29,9.35-9.57,9.35c-2.03,0-3.94-0.63-5.49-1.7l0,0c-2.48-1.7-4.08-4.49-4.08-7.65
+	c0-5.16,4.29-9.35,9.57-9.35c0.44,0,0.87,0.04,1.29,0.09v1.2c-4.81,0.09-8.74,3.7-9.28,8.3c0.54-4.6,4.47-8.21,9.3-8.3v3.99
+	c-0.41-0.13-0.83-0.2-1.29-0.2c-2.4,0-4.38,1.92-4.38,4.27c0,1.65,0.96,3.07,2.35,3.79l0,0c0.61,0.31,1.29,0.5,2.03,0.5
+	c2.35,0,4.27-1.83,4.36-4.12l0.02-20.39h5.19c0,0.44,0.04,0.87,0.13,1.29h-3.81L18.27,23.38z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_twitter-box.svg.twig b/src/patterns/04-components/svg/icons/_twitter-box.svg.twig
index 27d6a92dd7f54f6f96736fab54f569af3a42bbd3..b54ba0e57738ca86c7bfd7680d9a12d40dbe644d 100644
--- a/src/patterns/04-components/svg/icons/_twitter-box.svg.twig
+++ b/src/patterns/04-components/svg/icons/_twitter-box.svg.twig
@@ -1,4 +1,10 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>twitter-box</title>
-<path d="M25.492 3.014h-19.010c-2.293 0-4.151 1.858-4.151 4.151v19.011c0 2.292 1.858 4.151 4.151 4.151h19.010c2.292 0 4.15-1.858 4.15-4.151v-19.011c0-2.292-1.857-4.151-4.15-4.151zM22.922 13.59c0.006 0.155 0.009 0.309 0.009 0.463 0 4.729-3.597 10.18-10.178 10.18-2.022 0-3.903-0.593-5.487-1.607 0.28 0.031 0.565 0.051 0.852 0.051 1.679 0 3.22-0.573 4.445-1.534-1.566-0.027-2.887-1.062-3.341-2.484 0.217 0.043 0.443 0.065 0.673 0.065 0.327 0 0.642-0.044 0.943-0.125-1.637-0.33-2.87-1.776-2.87-3.51v-0.045c0.484 0.266 1.034 0.431 1.62 0.447-0.958-0.641-1.59-1.736-1.59-2.977 0-0.656 0.177-1.27 0.485-1.801 1.765 2.168 4.401 3.591 7.374 3.741-0.062-0.264-0.094-0.535-0.094-0.815 0-1.976 1.604-3.579 3.58-3.579 1.029 0 1.96 0.435 2.613 1.132 0.815-0.162 1.579-0.46 2.271-0.871-0.265 0.835-0.834 1.537-1.572 1.979 0.721-0.086 1.412-0.278 2.054-0.562-0.482 0.718-1.087 1.35-1.785 1.853z"></path>
+  <g id="Logo_1_">
+    <path id="white_background" d="M28.06,10.29c0.02,0.27,0.02,0.53,0.02,0.8c0,8.22-6.26,17.71-17.71,17.71v0
+		c-3.38,0-6.69-0.96-9.54-2.79c0.49,0.06,0.99,0.09,1.48,0.09c2.8,0,5.52-0.94,7.73-2.67c-2.66-0.05-5-1.79-5.81-4.32
+		c0.93,0.18,1.89,0.14,2.81-0.11c-2.9-0.59-4.99-3.14-4.99-6.1c0-0.03,0-0.05,0-0.08c0.87,0.48,1.83,0.75,2.82,0.78
+		c-2.73-1.83-3.58-5.47-1.93-8.31c3.16,3.89,7.82,6.25,12.83,6.5c-0.5-2.16,0.18-4.43,1.8-5.95c2.51-2.36,6.45-2.24,8.81,0.27
+		c1.39-0.27,2.73-0.79,3.95-1.51c-0.46,1.44-1.44,2.66-2.74,3.44c1.23-0.15,2.44-0.48,3.57-0.98C30.33,8.31,29.28,9.4,28.06,10.29z"
+    />
+  </g>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_twitter.svg.twig b/src/patterns/04-components/svg/icons/_twitter.svg.twig
index 85ad94beea1259ad98a5dea8fa8a534e094e91d4..51eef7ba54d477f4a75ffd09041d9982f81bafe1 100644
--- a/src/patterns/04-components/svg/icons/_twitter.svg.twig
+++ b/src/patterns/04-components/svg/icons/_twitter.svg.twig
@@ -1,4 +1,11 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>twitter</title>
-<path d="M30.668 7.497c-1.071 0.473-2.223 0.793-3.426 0.938 1.229-0.737 2.177-1.907 2.622-3.3-1.152 0.683-2.426 1.182-3.787 1.452-1.089-1.162-2.64-1.888-4.359-1.888-3.294 0-5.969 2.673-5.969 5.969 0 0.467 0.052 0.92 0.156 1.359-4.959-0.249-9.355-2.624-12.299-6.239-0.513 0.884-0.809 1.909-0.809 3.004 0 2.069 1.053 3.896 2.652 4.964-0.977-0.026-1.897-0.301-2.702-0.745v0.074c0 2.891 2.057 5.303 4.787 5.854-0.499 0.136-1.027 0.209-1.572 0.209-0.384 0-0.758-0.036-1.123-0.108 0.757 2.371 2.96 4.098 5.573 4.144-2.041 1.601-4.612 2.558-7.413 2.558-0.479 0-0.954-0.034-1.422-0.084 2.642 1.69 5.779 2.68 9.152 2.68 10.974 0 16.975-9.093 16.975-16.98 0-0.256-0.006-0.514-0.015-0.772 1.167-0.841 2.176-1.893 2.978-3.091z"></path>
+<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<g id="Logo_1_">
+  <path id="white_background" d="M28.06,10.29c0.02,0.27,0.02,0.53,0.02,0.8c0,8.22-6.26,17.71-17.71,17.71v0
+		c-3.38,0-6.69-0.96-9.54-2.79c0.49,0.06,0.99,0.09,1.48,0.09c2.8,0,5.52-0.94,7.73-2.67c-2.66-0.05-5-1.79-5.81-4.32
+		c0.93,0.18,1.89,0.14,2.81-0.11c-2.9-0.59-4.99-3.14-4.99-6.1c0-0.03,0-0.05,0-0.08c0.87,0.48,1.83,0.75,2.82,0.78
+		c-2.73-1.83-3.58-5.47-1.93-8.31c3.16,3.89,7.82,6.25,12.83,6.5c-0.5-2.16,0.18-4.43,1.8-5.95c2.51-2.36,6.45-2.24,8.81,0.27
+		c1.39-0.27,2.73-0.79,3.95-1.51c-0.46,1.44-1.44,2.66-2.74,3.44c1.23-0.15,2.44-0.48,3.57-0.98C30.33,8.31,29.28,9.4,28.06,10.29z"
+  />
+</g>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_youtube-box.svg.twig b/src/patterns/04-components/svg/icons/_youtube-box.svg.twig
index 19be899fec19819edf9035ad97e2bd57a7483cf8..c8e2d63d19bde445574cf5fbb86acaf6584a4b25 100644
--- a/src/patterns/04-components/svg/icons/_youtube-box.svg.twig
+++ b/src/patterns/04-components/svg/icons/_youtube-box.svg.twig
@@ -1,4 +1,13 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>youtube-box</title>
-<path d="M12.102 19.328v-1.151h-3.843v1.151h1.296v7.014h1.228v-7.014h1.319zM14.33 26.342v-0.663c-0.438 0.502-0.854 0.749-1.258 0.749-0.356 0-0.602-0.144-0.711-0.453-0.061-0.185-0.098-0.475-0.098-0.903v-4.813h1.101v4.48c0 0.258 0 0.393 0.012 0.428 0.027 0.17 0.109 0.257 0.256 0.257 0.222 0 0.455-0.171 0.698-0.516v-4.649h1.103v6.084h-1.103zM18.519 24.604c0 0.55-0.163 0.819-0.48 0.819-0.182 0-0.365-0.087-0.549-0.27v-3.71c0.184-0.18 0.367-0.266 0.549-0.266 0.317 0 0.48 0.282 0.48 0.83v2.597zM19.62 24.516v-2.423c0-0.576-0.038-0.979-0.111-1.222-0.147-0.457-0.442-0.688-0.881-0.688-0.405 0-0.782 0.224-1.138 0.66v-2.666h-1.103v8.165h1.103v-0.589c0.367 0.456 0.746 0.674 1.138 0.674 0.44 0 0.734-0.232 0.881-0.686 0.073-0.256 0.111-0.661 0.111-1.226zM22.678 22.584h-1.101v-0.562c0-0.562 0.185-0.844 0.555-0.844 0.363 0 0.547 0.282 0.547 0.844v0.562zM23.781 24.396v-0.161h-1.124c0 0.444-0.014 0.685-0.025 0.747-0.063 0.295-0.222 0.442-0.491 0.442-0.379 0-0.564-0.28-0.564-0.843v-1.078h2.205v-1.259c0-0.651-0.111-1.128-0.341-1.434-0.309-0.416-0.747-0.625-1.299-0.625-0.564 0-1.004 0.209-1.321 0.625-0.235 0.306-0.34 0.783-0.34 1.434v2.131c0 0.644 0.119 1.125 0.354 1.428 0.318 0.416 0.757 0.625 1.335 0.625 0.576 0 1.027-0.218 1.333-0.66 0.134-0.196 0.22-0.419 0.258-0.661 0.010-0.111 0.023-0.358 0.023-0.71zM15.665 13.446c0.359 0 0.531-0.287 0.531-0.855v-2.587c0-0.568-0.172-0.852-0.531-0.852-0.361 0-0.533 0.284-0.533 0.852v2.587c0 0.568 0.172 0.855 0.533 0.855zM26.198 2.354h-19.979c-2.41 0-4.363 1.953-4.363 4.362v19.98c0 2.409 1.952 4.363 4.363 4.363h19.979c2.409 0 4.361-1.953 4.361-4.363v-19.98c-0-2.409-1.952-4.362-4.361-4.362zM18.227 8.225h1.111v4.524c0 0.262 0 0.399 0.014 0.436 0.024 0.172 0.11 0.261 0.26 0.261 0.223 0 0.456-0.175 0.704-0.522v-4.699h1.114v6.147h-1.114v-0.671c-0.443 0.509-0.866 0.757-1.273 0.757-0.358 0-0.606-0.147-0.717-0.459-0.062-0.184-0.099-0.48-0.099-0.915v-4.86zM14.019 10.227c0-0.655 0.112-1.136 0.348-1.447 0.309-0.421 0.743-0.631 1.298-0.631 0.557 0 0.991 0.21 1.298 0.631 0.233 0.311 0.347 0.792 0.347 1.447v2.152c0 0.656-0.114 1.14-0.347 1.447-0.308 0.421-0.741 0.631-1.298 0.631-0.555 0-0.99-0.21-1.298-0.631-0.236-0.308-0.348-0.792-0.348-1.447v-2.152zM11.040 6.123l0.877 3.239 0.843-3.239h1.249l-1.486 4.907v3.341h-1.236v-3.341c-0.112-0.592-0.358-1.458-0.754-2.61-0.261-0.766-0.533-1.534-0.793-2.297h1.3zM24.487 26.613c-0.224 0.969-1.017 1.685-1.971 1.793-2.262 0.252-4.551 0.253-6.83 0.252-2.279 0.001-4.57 0-6.83-0.252-0.956-0.108-1.75-0.823-1.971-1.793-0.317-1.38-0.317-2.889-0.317-4.312s0.003-2.929 0.321-4.313c0.222-0.969 1.015-1.686 1.97-1.791 2.263-0.252 4.552-0.254 6.831-0.252 2.278-0.002 4.568 0 6.83 0.252 0.955 0.105 1.75 0.821 1.971 1.791 0.318 1.383 0.316 2.89 0.316 4.313s-0 2.931-0.319 4.312z"></path>
+  <style type="text/css">
+    .st0{fill:#282828;}
+    .st1{fill:#FFFFFF;}
+  </style>
+  <g id="XMLID_184_">
+    <path id="XMLID_182_" class="st0" d="M31.34,8.88c-0.36-1.38-1.46-2.47-2.81-2.83c-2.51-0.68-12.48-0.68-12.48-0.68
+		s-9.97,0-12.46,0.68C2.22,6.41,1.14,7.51,0.76,8.88c-0.66,2.49-0.66,7.69-0.66,7.69s0,5.2,0.66,7.71c0.36,1.38,1.46,2.47,2.81,2.83
+		c2.51,0.68,12.48,0.68,12.48,0.68s9.97,0,12.46-0.68c1.38-0.36,2.45-1.46,2.81-2.83C32,21.8,32,16.58,32,16.58S32,11.37,31.34,8.88
+		z"/>
+    <polygon id="XMLID_1355_" class="st1" points="12.78,21.32 21.14,16.58 12.78,11.85 	"/>
+  </g>
 </svg>
diff --git a/src/patterns/04-components/svg/icons/_youtube.svg.twig b/src/patterns/04-components/svg/icons/_youtube.svg.twig
index 60d6fb357c290210198cd49a983381d2f8190f80..8be39d9967825ef4a6658c269e0e37adc080c841 100644
--- a/src/patterns/04-components/svg/icons/_youtube.svg.twig
+++ b/src/patterns/04-components/svg/icons/_youtube.svg.twig
@@ -1,4 +1,7 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>youtube</title>
-<path d="M13.2 2.396h-1.572l-1.063 4.085-1.108-4.085h-1.64c0.329 0.961 0.671 1.93 1.001 2.897 0.499 1.453 0.811 2.545 0.951 3.291v4.214h1.56v-4.215l1.871-6.188zM17.366 10.285v-2.714c0-0.826-0.145-1.432-0.438-1.824-0.388-0.532-0.935-0.797-1.637-0.797-0.699 0-1.247 0.265-1.637 0.797-0.296 0.391-0.439 0.998-0.439 1.824v2.714c0 0.827 0.142 1.437 0.439 1.825 0.39 0.532 0.938 0.797 1.637 0.797 0.703 0 1.249-0.265 1.637-0.797 0.293-0.388 0.438-0.998 0.438-1.825zM15.96 10.551c0 0.716-0.218 1.078-0.671 1.078s-0.672-0.362-0.672-1.078v-3.263c0-0.716 0.218-1.074 0.672-1.074s0.671 0.358 0.671 1.074v3.263zM22.56 12.797v-7.753h-1.406v5.926c-0.311 0.438-0.606 0.658-0.889 0.658-0.187 0-0.295-0.112-0.328-0.329-0.017-0.047-0.017-0.221-0.017-0.55v-5.705h-1.401v6.129c0 0.549 0.045 0.922 0.125 1.155 0.14 0.392 0.451 0.579 0.904 0.579 0.51 0 1.047-0.314 1.604-0.955v0.848h1.407v-0.002zM23.443 21.381c-0.464 0-0.697 0.356-0.697 1.063v0.709h1.389v-0.709c-0-0.708-0.234-1.063-0.692-1.063zM26.419 17.359c-0.28-1.221-1.282-2.126-2.485-2.257-2.855-0.32-5.741-0.322-8.615-0.32-2.874-0.003-5.761 0-8.616 0.32-1.205 0.131-2.204 1.036-2.484 2.257-0.403 1.745-0.405 3.645-0.405 5.439s0 3.697 0.398 5.438c0.282 1.223 1.281 2.124 2.487 2.261 2.852 0.318 5.738 0.32 8.614 0.318 2.874 0.001 5.762 0 8.615-0.318 1.205-0.136 2.205-1.038 2.487-2.261 0.401-1.741 0.403-3.644 0.403-5.438s0.002-3.694-0.399-5.439zM10.797 19.048h-1.665v8.845h-1.547v-8.845h-1.635v-1.452h4.847v1.452zM14.998 27.893h-1.391v-0.837c-0.552 0.633-1.078 0.944-1.588 0.944-0.449 0-0.758-0.181-0.896-0.571-0.077-0.231-0.124-0.598-0.124-1.139v-6.069h1.389v5.65c0 0.326 0 0.495 0.016 0.54 0.031 0.216 0.136 0.326 0.323 0.326 0.28 0 0.573-0.216 0.88-0.651v-5.863h1.391v7.672zM20.279 25.59c0 0.711-0.047 1.223-0.14 1.547-0.184 0.571-0.557 0.863-1.11 0.863-0.493 0-0.971-0.275-1.436-0.849v0.743h-1.39v-10.297h1.39v3.362c0.449-0.549 0.925-0.832 1.436-0.832 0.553 0 0.926 0.292 1.11 0.868 0.093 0.306 0.14 0.815 0.14 1.541v3.054zM25.527 24.312h-2.78v1.36c0 0.71 0.233 1.063 0.709 1.063 0.341 0 0.541-0.184 0.622-0.557 0.012-0.078 0.029-0.383 0.029-0.942h1.419v0.204c0 0.444-0.019 0.755-0.030 0.896-0.047 0.305-0.157 0.586-0.324 0.833-0.386 0.557-0.956 0.832-1.682 0.832s-1.282-0.264-1.682-0.788c-0.295-0.382-0.445-0.99-0.445-1.801v-2.688c0-0.821 0.132-1.423 0.429-1.809 0.4-0.526 0.955-0.79 1.666-0.79 0.696 0 1.25 0.264 1.637 0.79 0.292 0.384 0.433 0.988 0.433 1.809v1.588h-0.001zM18.458 22.268c0.341 0 0.618 0.876 0.618 1.959 0 1.081-0.276 1.959-0.618 1.959-0.34 0-0.617-0.878-0.617-1.959 0-1.083 0.277-1.959 0.617-1.959z"></path>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+  <path  d="M31.34,8.88c-0.36-1.38-1.46-2.47-2.81-2.83c-2.51-0.68-12.48-0.68-12.48-0.68s-9.97,0-12.46,0.68
+	C2.22,6.41,1.14,7.51,0.76,8.88C0.1,11.37,0.1,16.57,0.1,16.57s0,5.2,0.66,7.71c0.36,1.38,1.46,2.47,2.81,2.83
+	c2.51,0.68,12.48,0.68,12.48,0.68s9.97,0,12.46-0.68c1.38-0.36,2.45-1.46,2.81-2.83C32,21.8,32,16.58,32,16.58S32,11.37,31.34,8.88z
+	 M12.78,21.32v-9.47l8.36,4.73L12.78,21.32z"/>
 </svg>
diff --git a/src/patterns/04-components/svg/svgs.yml b/src/patterns/04-components/svg/svgs.yml
index 9d28ef093779bded2c9ec524d864b267ee59a83d..c7ed05016835c2c458296270ae478e09c0248bd6 100644
--- a/src/patterns/04-components/svg/svgs.yml
+++ b/src/patterns/04-components/svg/svgs.yml
@@ -74,6 +74,8 @@ svg_names:
   - si-teach
   - skype
   - snapchat
+  - tiktok
+  - tiktok-box
   - tux
   - twitter
   - twitter-box
diff --git a/src/patterns/04-components/uw-images/icons/instagram.svg b/src/patterns/04-components/uw-images/icons/instagram.svg
index f3dda1de7fc3a767a9018c32826849f4fac6f830..1e7549d45aee566d3ea592952099b20697cbc8a2 100644
--- a/src/patterns/04-components/uw-images/icons/instagram.svg
+++ b/src/patterns/04-components/uw-images/icons/instagram.svg
@@ -1,4 +1,23 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>instagram</title>
-<path d="M5.134 2.557h20.928c1.988 0 3.614 1.625 3.614 3.614v20.931c0 1.987-1.625 3.609-3.614 3.609h-20.928c-1.987 0-3.615-1.62-3.615-3.609v-20.931c0-1.988 1.629-3.614 3.615-3.614zM22.033 5.682c-0.7 0-1.271 0.576-1.271 1.272v3.033c0 0.697 0.571 1.269 1.271 1.269h3.182c0.7 0 1.267-0.572 1.267-1.269v-3.033c0-0.697-0.567-1.272-1.267-1.272h-3.182zM26.493 14.464h-2.477c0.237 0.767 0.365 1.574 0.365 2.415 0 4.683-3.92 8.481-8.756 8.481-4.834 0-8.753-3.797-8.753-8.481 0-0.842 0.129-1.648 0.363-2.415h-2.585v11.892c0 0.619 0.503 1.119 1.119 1.119h19.606c0.618 0 1.118-0.5 1.118-1.119v-11.892zM15.625 11.094c-3.122 0-5.657 2.453-5.657 5.479s2.535 5.481 5.657 5.481c3.123 0 5.658-2.454 5.658-5.481 0-3.025-2.535-5.479-5.658-5.479z"></path>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<g>
+	<g>
+		<path id="SVGID_1_" d="M9.86,1.57C8.31,1.65,7.25,1.89,6.32,2.26C5.37,2.62,4.56,3.12,3.75,3.94c-0.82,0.82-1.3,1.63-1.67,2.58
+			C1.72,7.45,1.47,8.51,1.4,10.06c-0.06,1.55-0.09,2.05-0.07,6.01c0.01,3.95,0.02,4.45,0.1,6.01c0.07,1.55,0.32,2.61,0.68,3.53
+			c0.38,0.95,0.87,1.77,1.68,2.57c0.8,0.8,1.62,1.3,2.58,1.68c0.93,0.35,1.99,0.61,3.53,0.67s2.05,0.09,6.01,0.07
+			c3.96-0.01,4.45-0.02,6.01-0.1c1.55-0.07,2.61-0.32,3.53-0.68c0.95-0.38,1.77-0.87,2.57-1.68c0.8-0.8,1.3-1.62,1.68-2.58
+			c0.35-0.93,0.61-1.99,0.67-3.53c0.06-1.56,0.09-2.05,0.07-6.01c-0.01-3.95-0.02-4.45-0.1-6.01s-0.32-2.61-0.68-3.53
+			c-0.38-0.95-0.87-1.77-1.68-2.57c-0.8-0.8-1.62-1.3-2.58-1.68c-0.93-0.35-1.99-0.61-3.53-0.67c-1.55-0.07-2.05-0.09-6.01-0.07
+			C11.9,1.48,11.41,1.5,9.86,1.57 M10.03,27.9c-1.43-0.06-2.19-0.29-2.71-0.5c-0.68-0.27-1.17-0.57-1.68-1.08
+			c-0.51-0.51-0.83-0.99-1.08-1.67c-0.21-0.51-0.44-1.28-0.5-2.71c-0.07-1.54-0.1-2-0.1-5.89c-0.01-3.89,0.01-4.34,0.07-5.89
+			c0.05-1.4,0.29-2.18,0.5-2.71C4.8,6.78,5.1,6.29,5.62,5.78S6.6,4.95,7.29,4.69c0.51-0.21,1.28-0.44,2.71-0.5
+			c1.54-0.07,2-0.1,5.89-0.1c3.89-0.01,4.34,0.01,5.89,0.07c1.43,0.06,2.19,0.29,2.71,0.5c0.68,0.27,1.17,0.57,1.68,1.08
+			c0.51,0.51,0.83,0.99,1.08,1.68c0.21,0.51,0.44,1.28,0.5,2.71c0.07,1.54,0.1,2,0.1,5.89s-0.01,4.34-0.07,5.89
+			c-0.06,1.43-0.29,2.19-0.5,2.71c-0.27,0.68-0.57,1.17-1.08,1.68c-0.5,0.51-0.99,0.83-1.67,1.08c-0.51,0.21-1.28,0.44-2.71,0.5
+			c-1.54,0.07-2,0.1-5.89,0.1C12.03,27.97,11.56,27.97,10.03,27.9 M21.9,8.25c0,0.96,0.79,1.74,1.75,1.74S25.4,9.2,25.4,8.24
+			S24.6,6.5,23.64,6.5S21.9,7.28,21.9,8.25 M8.41,16.04c0.01,4.13,3.36,7.47,7.48,7.46c4.13-0.01,7.47-3.36,7.46-7.48
+			c-0.01-4.12-3.36-7.47-7.48-7.46C11.75,8.57,8.41,11.92,8.41,16.04 M11.03,16.04c-0.01-2.68,2.16-4.86,4.85-4.86
+			c2.68-0.01,4.86,2.16,4.86,4.85s-2.16,4.86-4.85,4.86C13.21,20.89,11.04,18.72,11.03,16.04"/>
+	</g>
+</g>
 </svg>
diff --git a/src/patterns/04-components/uw-images/icons/tiktok.svg b/src/patterns/04-components/uw-images/icons/tiktok.svg
new file mode 100644
index 0000000000000000000000000000000000000000..10bfb3240cedbc9e6b472facfe925c6109284f8f
--- /dev/null
+++ b/src/patterns/04-components/uw-images/icons/tiktok.svg
@@ -0,0 +1,12 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#000000;}
+</style>
+  <path class="st0" d="M18.27,23.38c-0.09,2.27-2.01,4.12-4.36,4.12c-0.54,0-1.05-0.09-1.53-0.28c0.48,0.17,1,0.28,1.53,0.28
+	C16.28,27.5,18.2,25.67,18.27,23.38V3.01h3.81c0.37,1.94,1.55,3.6,3.18,4.64l0,0c1.13,0.72,2.5,1.15,3.94,1.15v1.13l0,0v3.96
+	c-2.7,0-5.19-0.85-7.25-2.27v10.33c0,5.16-4.29,9.35-9.57,9.35c-2.03,0-3.94-0.63-5.49-1.7l0,0c-2.48-1.7-4.08-4.49-4.08-7.65
+	c0-5.16,4.29-9.35,9.57-9.35c0.44,0,0.87,0.04,1.29,0.09v1.2c-4.81,0.09-8.74,3.7-9.28,8.3c0.54-4.6,4.47-8.21,9.3-8.3v3.99
+	c-0.41-0.13-0.83-0.2-1.29-0.2c-2.4,0-4.38,1.92-4.38,4.27c0,1.65,0.96,3.07,2.35,3.79l0,0c0.61,0.31,1.29,0.5,2.03,0.5
+	c2.35,0,4.27-1.83,4.36-4.12l0.02-20.39h5.19c0,0.44,0.04,0.87,0.13,1.29h-3.81L18.27,23.38z"/>
+</svg>
diff --git a/src/patterns/04-components/uw-images/icons/twitter.svg b/src/patterns/04-components/uw-images/icons/twitter.svg
index 85ad94beea1259ad98a5dea8fa8a534e094e91d4..51eef7ba54d477f4a75ffd09041d9982f81bafe1 100644
--- a/src/patterns/04-components/uw-images/icons/twitter.svg
+++ b/src/patterns/04-components/uw-images/icons/twitter.svg
@@ -1,4 +1,11 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>twitter</title>
-<path d="M30.668 7.497c-1.071 0.473-2.223 0.793-3.426 0.938 1.229-0.737 2.177-1.907 2.622-3.3-1.152 0.683-2.426 1.182-3.787 1.452-1.089-1.162-2.64-1.888-4.359-1.888-3.294 0-5.969 2.673-5.969 5.969 0 0.467 0.052 0.92 0.156 1.359-4.959-0.249-9.355-2.624-12.299-6.239-0.513 0.884-0.809 1.909-0.809 3.004 0 2.069 1.053 3.896 2.652 4.964-0.977-0.026-1.897-0.301-2.702-0.745v0.074c0 2.891 2.057 5.303 4.787 5.854-0.499 0.136-1.027 0.209-1.572 0.209-0.384 0-0.758-0.036-1.123-0.108 0.757 2.371 2.96 4.098 5.573 4.144-2.041 1.601-4.612 2.558-7.413 2.558-0.479 0-0.954-0.034-1.422-0.084 2.642 1.69 5.779 2.68 9.152 2.68 10.974 0 16.975-9.093 16.975-16.98 0-0.256-0.006-0.514-0.015-0.772 1.167-0.841 2.176-1.893 2.978-3.091z"></path>
+<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<g id="Logo_1_">
+  <path id="white_background" d="M28.06,10.29c0.02,0.27,0.02,0.53,0.02,0.8c0,8.22-6.26,17.71-17.71,17.71v0
+		c-3.38,0-6.69-0.96-9.54-2.79c0.49,0.06,0.99,0.09,1.48,0.09c2.8,0,5.52-0.94,7.73-2.67c-2.66-0.05-5-1.79-5.81-4.32
+		c0.93,0.18,1.89,0.14,2.81-0.11c-2.9-0.59-4.99-3.14-4.99-6.1c0-0.03,0-0.05,0-0.08c0.87,0.48,1.83,0.75,2.82,0.78
+		c-2.73-1.83-3.58-5.47-1.93-8.31c3.16,3.89,7.82,6.25,12.83,6.5c-0.5-2.16,0.18-4.43,1.8-5.95c2.51-2.36,6.45-2.24,8.81,0.27
+		c1.39-0.27,2.73-0.79,3.95-1.51c-0.46,1.44-1.44,2.66-2.74,3.44c1.23-0.15,2.44-0.48,3.57-0.98C30.33,8.31,29.28,9.4,28.06,10.29z"
+  />
+</g>
 </svg>
diff --git a/src/patterns/04-components/uw-images/icons/youtube.svg b/src/patterns/04-components/uw-images/icons/youtube.svg
index 60d6fb357c290210198cd49a983381d2f8190f80..1eccd3f0ed4c3fb02c7358b4455f3da7e82f284c 100644
--- a/src/patterns/04-components/uw-images/icons/youtube.svg
+++ b/src/patterns/04-components/uw-images/icons/youtube.svg
@@ -1,4 +1,10 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>youtube</title>
-<path d="M13.2 2.396h-1.572l-1.063 4.085-1.108-4.085h-1.64c0.329 0.961 0.671 1.93 1.001 2.897 0.499 1.453 0.811 2.545 0.951 3.291v4.214h1.56v-4.215l1.871-6.188zM17.366 10.285v-2.714c0-0.826-0.145-1.432-0.438-1.824-0.388-0.532-0.935-0.797-1.637-0.797-0.699 0-1.247 0.265-1.637 0.797-0.296 0.391-0.439 0.998-0.439 1.824v2.714c0 0.827 0.142 1.437 0.439 1.825 0.39 0.532 0.938 0.797 1.637 0.797 0.703 0 1.249-0.265 1.637-0.797 0.293-0.388 0.438-0.998 0.438-1.825zM15.96 10.551c0 0.716-0.218 1.078-0.671 1.078s-0.672-0.362-0.672-1.078v-3.263c0-0.716 0.218-1.074 0.672-1.074s0.671 0.358 0.671 1.074v3.263zM22.56 12.797v-7.753h-1.406v5.926c-0.311 0.438-0.606 0.658-0.889 0.658-0.187 0-0.295-0.112-0.328-0.329-0.017-0.047-0.017-0.221-0.017-0.55v-5.705h-1.401v6.129c0 0.549 0.045 0.922 0.125 1.155 0.14 0.392 0.451 0.579 0.904 0.579 0.51 0 1.047-0.314 1.604-0.955v0.848h1.407v-0.002zM23.443 21.381c-0.464 0-0.697 0.356-0.697 1.063v0.709h1.389v-0.709c-0-0.708-0.234-1.063-0.692-1.063zM26.419 17.359c-0.28-1.221-1.282-2.126-2.485-2.257-2.855-0.32-5.741-0.322-8.615-0.32-2.874-0.003-5.761 0-8.616 0.32-1.205 0.131-2.204 1.036-2.484 2.257-0.403 1.745-0.405 3.645-0.405 5.439s0 3.697 0.398 5.438c0.282 1.223 1.281 2.124 2.487 2.261 2.852 0.318 5.738 0.32 8.614 0.318 2.874 0.001 5.762 0 8.615-0.318 1.205-0.136 2.205-1.038 2.487-2.261 0.401-1.741 0.403-3.644 0.403-5.438s0.002-3.694-0.399-5.439zM10.797 19.048h-1.665v8.845h-1.547v-8.845h-1.635v-1.452h4.847v1.452zM14.998 27.893h-1.391v-0.837c-0.552 0.633-1.078 0.944-1.588 0.944-0.449 0-0.758-0.181-0.896-0.571-0.077-0.231-0.124-0.598-0.124-1.139v-6.069h1.389v5.65c0 0.326 0 0.495 0.016 0.54 0.031 0.216 0.136 0.326 0.323 0.326 0.28 0 0.573-0.216 0.88-0.651v-5.863h1.391v7.672zM20.279 25.59c0 0.711-0.047 1.223-0.14 1.547-0.184 0.571-0.557 0.863-1.11 0.863-0.493 0-0.971-0.275-1.436-0.849v0.743h-1.39v-10.297h1.39v3.362c0.449-0.549 0.925-0.832 1.436-0.832 0.553 0 0.926 0.292 1.11 0.868 0.093 0.306 0.14 0.815 0.14 1.541v3.054zM25.527 24.312h-2.78v1.36c0 0.71 0.233 1.063 0.709 1.063 0.341 0 0.541-0.184 0.622-0.557 0.012-0.078 0.029-0.383 0.029-0.942h1.419v0.204c0 0.444-0.019 0.755-0.030 0.896-0.047 0.305-0.157 0.586-0.324 0.833-0.386 0.557-0.956 0.832-1.682 0.832s-1.282-0.264-1.682-0.788c-0.295-0.382-0.445-0.99-0.445-1.801v-2.688c0-0.821 0.132-1.423 0.429-1.809 0.4-0.526 0.955-0.79 1.666-0.79 0.696 0 1.25 0.264 1.637 0.79 0.292 0.384 0.433 0.988 0.433 1.809v1.588h-0.001zM18.458 22.268c0.341 0 0.618 0.876 0.618 1.959 0 1.081-0.276 1.959-0.618 1.959-0.34 0-0.617-0.878-0.617-1.959 0-1.083 0.277-1.959 0.617-1.959z"></path>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;}
+</style>
+  <path class="st0" d="M31.34,8.88c-0.36-1.38-1.46-2.47-2.81-2.83c-2.51-0.68-12.48-0.68-12.48-0.68s-9.97,0-12.46,0.68
+	C2.22,6.41,1.14,7.51,0.76,8.88C0.1,11.37,0.1,16.57,0.1,16.57s0,5.2,0.66,7.71c0.36,1.38,1.46,2.47,2.81,2.83
+	c2.51,0.68,12.48,0.68,12.48,0.68s9.97,0,12.46-0.68c1.38-0.36,2.45-1.46,2.81-2.83C32,21.8,32,16.58,32,16.58S32,11.37,31.34,8.88z
+	 M12.78,21.32v-9.47l8.36,4.73L12.78,21.32z"/>
 </svg>