From 544a669778e8a1343503e0512079bca18e7825cb Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Mon, 28 Nov 2022 14:54:19 -0500
Subject: [PATCH] ISTWCMS-5881: css to change icon presentation, social icon
now using inline svg
---
src/patterns/01-core/props/_colors.scss | 2 +-
src/patterns/01-core/props/_media.scss | 1 +
src/patterns/01-core/props/_sizes.scss | 2 +
src/patterns/03-layouts/footer/_footer.scss | 16 ++-----
src/patterns/03-layouts/footer/footer.twig | 9 +++-
src/patterns/03-layouts/footer/footer.yml | 14 +++---
.../site-container/site-container.yml | 20 ++++++--
.../03-layouts/site-footer/_site-footer.scss | 5 ++
.../03-layouts/site-footer/site-footer.twig | 2 +-
.../03-layouts/site-footer/site-footer.yml | 14 +++---
src/patterns/04-components/_index.scss | 1 -
src/patterns/04-components/icon/_icon.scss | 11 +++++
.../icon/icon--button/_icon--button.scss | 48 +++++++++++++++++--
src/patterns/04-components/links/_links.scss | 24 +++++-----
.../menu/menu--footer/_menu--footer.scss | 2 +-
.../menu/menu--social/_menu--social.scss | 26 ----------
.../menu/menu--social/menu--social.twig | 11 +++--
.../menu/menu--social/menu--social.yml | 14 +++---
.../_social-media--icon.scss | 47 ------------------
.../social-media--icon.twig | 4 --
.../social-media--icon/social-media--icon.yml | 3 --
.../svg/icons/_facebook-box.svg.twig | 7 ++-
.../svg/icons/_facebook.svg.twig | 4 +-
.../svg/icons/_instagram-box.svg.twig | 27 ++++++++++-
.../svg/icons/_instagram.svg.twig | 25 ++++++++--
.../svg/icons/_linkedin-box.svg.twig | 4 +-
.../svg/icons/_linkedin.svg.twig | 4 +-
.../04-components/svg/icons/_rss.svg.twig | 3 +-
.../svg/icons/_tiktok-box.svg.twig | 11 +++++
.../04-components/svg/icons/_tiktok.svg.twig | 9 ++++
.../svg/icons/_twitter-box.svg.twig | 10 +++-
.../04-components/svg/icons/_twitter.svg.twig | 13 +++--
.../svg/icons/_youtube-box.svg.twig | 13 ++++-
.../04-components/svg/icons/_youtube.svg.twig | 9 ++--
src/patterns/04-components/svg/svgs.yml | 2 +
.../uw-images/icons/instagram.svg | 25 ++++++++--
.../04-components/uw-images/icons/tiktok.svg | 12 +++++
.../04-components/uw-images/icons/twitter.svg | 13 +++--
.../04-components/uw-images/icons/youtube.svg | 12 +++--
39 files changed, 306 insertions(+), 173 deletions(-)
delete mode 100644 src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
delete mode 100644 src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig
delete mode 100644 src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml
create mode 100644 src/patterns/04-components/svg/icons/_tiktok-box.svg.twig
create mode 100644 src/patterns/04-components/svg/icons/_tiktok.svg.twig
create mode 100644 src/patterns/04-components/uw-images/icons/tiktok.svg
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index 07fdc89f..80e26152 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 ae3a18d9..e50b9831 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 c4ddcaf9..6f0f09d1 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 03fd07a2..c8fad0cd 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 457d9f6e..892cb10c 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 159396d5..7882184a 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 f67d72c3..23b314e3 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 1878934f..c32c6e5d 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 66489b4c..d50ebe1c 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 54ae89b0..eaedf190 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 ba5f1c53..c9124e0e 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 d793bc14..d433c31e 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 d28186da..029f2d7c 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 6b536f89..3687ca14 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 f760379c..7d057c2c 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 8ec163d3..b549451c 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 3cfc73d9..5d6a568a 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 2358ec17..d735aa0c 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 09eec393..00000000
--- 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 d9a27940..00000000
--- 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 7bc50593..00000000
--- 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 b8bb15c7..23aeb7ff 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 80eadf05..9daa61d0 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 0cbf40eb..82f3a124 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 f3dda1de..b1985f2e 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 534ef95d..81b67572 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 c7f73b0b..81b67572 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 8e4c6a8e..99c04a0b 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 00000000..3353b69f
--- /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 00000000..828c921d
--- /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 27d6a92d..b54ba0e5 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 85ad94be..51eef7ba 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 19be899f..c8e2d63d 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 60d6fb35..8be39d99 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 9d28ef09..c7ed0501 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 f3dda1de..1e7549d4 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 00000000..10bfb324
--- /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 85ad94be..51eef7ba 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 60d6fb35..1eccd3f0 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>
--
GitLab