diff --git a/images/icons/v2/group-outline-20.svg b/images/icons/v2/group-outline-20.svg
new file mode 100644
index 0000000000..f4d336c8db
--- /dev/null
+++ b/images/icons/v2/group-outline-20.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/v2/group-outline-40.svg b/images/icons/v2/group-outline-40.svg
new file mode 100644
index 0000000000..751285beb4
--- /dev/null
+++ b/images/icons/v2/group-outline-40.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/v2/profile-outline-20.svg b/images/icons/v2/profile-outline-20.svg
new file mode 100644
index 0000000000..0309dcbc4b
--- /dev/null
+++ b/images/icons/v2/profile-outline-20.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/v2/profile-outline-40.svg b/images/icons/v2/profile-outline-40.svg
new file mode 100644
index 0000000000..b4c7b89359
--- /dev/null
+++ b/images/icons/v2/profile-outline-40.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-00-12.svg b/images/icons/v2/timer-00-12.svg
index f73171a5f1..5bdc9f1e6b 100644
--- a/images/icons/v2/timer-00-12.svg
+++ b/images/icons/v2/timer-00-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-05-12.svg b/images/icons/v2/timer-05-12.svg
index 537a736ae7..69bb1d0c05 100644
--- a/images/icons/v2/timer-05-12.svg
+++ b/images/icons/v2/timer-05-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-10-12.svg b/images/icons/v2/timer-10-12.svg
index 7e9287380e..e77037c03e 100644
--- a/images/icons/v2/timer-10-12.svg
+++ b/images/icons/v2/timer-10-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-15-12.svg b/images/icons/v2/timer-15-12.svg
index a93963b578..321b411d0a 100644
--- a/images/icons/v2/timer-15-12.svg
+++ b/images/icons/v2/timer-15-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-20-12.svg b/images/icons/v2/timer-20-12.svg
index 1c84e8ec46..4ab3a1b3ea 100644
--- a/images/icons/v2/timer-20-12.svg
+++ b/images/icons/v2/timer-20-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-25-12.svg b/images/icons/v2/timer-25-12.svg
index 07370afce7..27942a18d5 100644
--- a/images/icons/v2/timer-25-12.svg
+++ b/images/icons/v2/timer-25-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-30-12.svg b/images/icons/v2/timer-30-12.svg
index 93b6c11627..55c7bb02f3 100644
--- a/images/icons/v2/timer-30-12.svg
+++ b/images/icons/v2/timer-30-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-35-12.svg b/images/icons/v2/timer-35-12.svg
index 143fb225ee..6dcb9bda2d 100644
--- a/images/icons/v2/timer-35-12.svg
+++ b/images/icons/v2/timer-35-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-40-12.svg b/images/icons/v2/timer-40-12.svg
index 205dbe4691..0b27d77330 100644
--- a/images/icons/v2/timer-40-12.svg
+++ b/images/icons/v2/timer-40-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-45-12.svg b/images/icons/v2/timer-45-12.svg
index 7839099d55..c91d4b82fd 100644
--- a/images/icons/v2/timer-45-12.svg
+++ b/images/icons/v2/timer-45-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-50-12.svg b/images/icons/v2/timer-50-12.svg
index b64dfb6cf8..ac911ea99a 100644
--- a/images/icons/v2/timer-50-12.svg
+++ b/images/icons/v2/timer-50-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-55-12.svg b/images/icons/v2/timer-55-12.svg
index 18a0074d02..1166a6ce1a 100644
--- a/images/icons/v2/timer-55-12.svg
+++ b/images/icons/v2/timer-55-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/v2/timer-60-12.svg b/images/icons/v2/timer-60-12.svg
index 454885e4ee..60d77a921e 100644
--- a/images/icons/v2/timer-60-12.svg
+++ b/images/icons/v2/timer-60-12.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/profile-group.svg b/images/profile-group.svg
deleted file mode 100644
index a6c9788bc3..0000000000
--- a/images/profile-group.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
\ No newline at end of file
diff --git a/images/profile-individual.svg b/images/profile-individual.svg
deleted file mode 100644
index f28b9ea45c..0000000000
--- a/images/profile-individual.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
\ No newline at end of file
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 6f09d00e3c..d45d2586a9 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3067,19 +3067,28 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
.module-avatar__icon--group {
@include light-theme {
- @include color-svg('../images/profile-group.svg', $color-white);
+ @include color-svg('../images/icons/v2/group-outline-40.svg', $color-white);
}
@include dark-theme {
- @include color-svg('../images/profile-group.svg', $color-gray-05);
+ @include color-svg(
+ '../images/icons/v2/group-outline-40.svg',
+ $color-gray-05
+ );
}
}
.module-avatar__icon--direct {
@include light-theme {
- @include color-svg('../images/profile-individual.svg', $color-white);
+ @include color-svg(
+ '../images/icons/v2/profile-outline-40.svg',
+ $color-white
+ );
}
@include dark-theme {
- @include color-svg('../images/profile-individual.svg', $color-gray-05);
+ @include color-svg(
+ '../images/icons/v2/profile-outline-40.svg',
+ $color-gray-05
+ );
}
}
@@ -3093,16 +3102,41 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
}
}
+.module-avatar__icon--28.module-avatar__icon--group {
+ height: 20px;
+ width: 20px;
+ @include light-theme {
+ @include color-svg('../images/icons/v2/group-outline-20.svg', $color-white);
+ }
+ @include dark-theme {
+ @include color-svg(
+ '../images/icons/v2/group-outline-20.svg',
+ $color-gray-05
+ );
+ }
+}
+.module-avatar__icon--28.module-avatar__icon--direct {
+ height: 20px;
+ width: 20px;
+ @include light-theme {
+ @include color-svg(
+ '../images/icons/v2/profile-outline-20.svg',
+ $color-white
+ );
+ }
+ @include dark-theme {
+ @include color-svg(
+ '../images/icons/v2/profile-outline-20.svg',
+ $color-gray-05
+ );
+ }
+}
+
.module-avatar__label--28 {
font-size: 14px;
line-height: 28px;
}
-.module-avatar__icon--28 {
- height: 16px;
- width: 16px;
-}
-
.module-avatar--52 {
height: 52px;
width: 52px;
@@ -3121,8 +3155,12 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
}
.module-avatar__icon--52 {
- height: 26px;
- width: 26px;
+ height: 38px;
+ width: 38px;
+}
+.module-avatar__icon--52.module-avatar__icon--direct {
+ height: 42px;
+ width: 42px;
}
.module-avatar--80 {
@@ -3142,8 +3180,12 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
}
.module-avatar__icon--80 {
- height: 42px;
- width: 42px;
+ height: 58px;
+ width: 58px;
+}
+.module-avatar__icon--80.module-avatar__icon--direct {
+ height: 62px;
+ width: 62px;
}
.module-avatar__icon--note-to-self {
diff --git a/ts/components/Avatar.md b/ts/components/Avatar.md
index f489e31041..0cedf54f27 100644
--- a/ts/components/Avatar.md
+++ b/ts/components/Avatar.md
@@ -94,10 +94,36 @@
```
-### All colors
+### Group Icon
```jsx
+
+
+
+
+```
+
+### Contact Icon
+
+```jsx
+
+
+
+
+
+```
+
+### All colors, 28px
+
+```jsx
+
+