From 632ea611fab09053130c09d1e6ca481420bf712f Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 23 Aug 2021 12:19:08 +0300
Subject: [PATCH] Get rid of IconSize (#51)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/icons/Add.svelte           |  9 ++---
 .../src/components/icons/Close.svelte         |  9 ++---
 packages/ui/src/components/IconSize.svelte    | 37 -------------------
 packages/ui/src/components/icons/Add.svelte   |  9 ++---
 packages/ui/src/components/icons/Back.svelte  |  9 ++---
 .../ui/src/components/icons/Calendar.svelte   | 11 ++----
 packages/ui/src/components/icons/Check.svelte |  9 ++---
 packages/ui/src/components/icons/Close.svelte |  9 ++---
 .../ui/src/components/icons/Comments.svelte   | 15 +++-----
 packages/ui/src/components/icons/Down.svelte  |  9 ++---
 .../ui/src/components/icons/Forward.svelte    |  9 ++---
 .../ui/src/components/icons/Search.svelte     |  9 ++---
 packages/ui/src/components/icons/ToDo.svelte  | 15 +++-----
 packages/ui/src/components/icons/Up.svelte    |  9 ++---
 .../ui/src/components/internal/Root.svelte    |  1 +
 .../ui/src/components/internal/Status.svelte  | 15 +++-----
 .../components/internal/icons/Close.svelte    |  9 ++---
 .../components/internal/icons/FontSize.svelte | 15 +++-----
 .../src/components/internal/icons/Info.svelte |  6 +--
 .../components/internal/icons/InfoOld.svelte  | 25 -------------
 .../src/components/internal/icons/Mute.svelte |  9 ++---
 .../src/components/internal/icons/WiFi.svelte | 17 ++++-----
 packages/ui/src/index.ts                      |  1 -
 .../src/components/icons/Bookmark.svelte      |  9 ++---
 .../src/components/icons/Check.svelte         | 11 ++----
 .../src/components/icons/Close.svelte         |  9 ++---
 .../src/components/icons/Emoji.svelte         |  9 ++---
 .../src/components/icons/Heart.svelte         |  9 ++---
 .../src/components/icons/MoreH.svelte         | 13 +++----
 .../src/components/icons/Share.svelte         | 11 ++----
 .../src/components/icons/Address.svelte       |  9 ++---
 .../src/components/icons/Attachment.svelte    |  9 ++---
 .../src/components/icons/File.svelte          |  9 ++---
 .../src/components/icons/Mail.svelte          |  9 ++---
 .../src/components/icons/MoreH.svelte         | 13 +++----
 .../src/components/icons/Recruiting.svelte    | 19 ++++------
 .../src/components/icons/File.svelte          |  9 ++---
 .../src/components/icons/Add.svelte           |  9 ++---
 .../src/components/icons/Close.svelte         |  9 ++---
 .../src/components/icons/Collapsed.svelte     |  9 ++---
 .../src/components/icons/Down.svelte          |  9 ++---
 .../src/components/icons/Expanded.svelte      |  9 ++---
 .../src/components/icons/FullRight.svelte     |  9 ++---
 .../src/components/icons/Home.svelte          |  9 ++---
 .../src/components/icons/Lock.svelte          |  9 ++---
 .../src/components/icons/Mention.svelte       |  9 ++---
 .../src/components/icons/MoreH.svelte         | 13 +++----
 .../src/components/icons/Search.svelte        |  9 ++---
 .../src/components/icons/Star.svelte          |  9 ++---
 .../src/components/icons/Thread.svelte        | 15 +++-----
 .../src/components/icons/Up.svelte            |  9 ++---
 .../src/components/icons/VCard.svelte         | 29 +++++++--------
 .../src/components/icons/VKanban.svelte       | 11 ++----
 .../src/components/icons/VList.svelte         | 17 ++++-----
 54 files changed, 195 insertions(+), 412 deletions(-)
 delete mode 100644 packages/ui/src/components/IconSize.svelte
 delete mode 100644 packages/ui/src/components/internal/icons/InfoOld.svelte

diff --git a/packages/presentation/src/components/icons/Add.svelte b/packages/presentation/src/components/icons/Add.svelte
index a4007930a7..6c7f0bb578 100644
--- a/packages/presentation/src/components/icons/Add.svelte
+++ b/packages/presentation/src/components/icons/Add.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
+</svg>
diff --git a/packages/presentation/src/components/icons/Close.svelte b/packages/presentation/src/components/icons/Close.svelte
index ac4ecfab9d..ca01b782b1 100644
--- a/packages/presentation/src/components/icons/Close.svelte
+++ b/packages/presentation/src/components/icons/Close.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
+</svg>
diff --git a/packages/ui/src/components/IconSize.svelte b/packages/ui/src/components/IconSize.svelte
deleted file mode 100644
index dd04fac100..0000000000
--- a/packages/ui/src/components/IconSize.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<!--
-// Copyright © 2020 Anticrm Platform Contributors.
-// 
-// Licensed under the Eclipse Public License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License. You may
-// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
-// 
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// 
-// See the License for the specific language governing permissions and
-// limitations under the License.
--->
-
-<script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
-</script>
-
-<div class={size}>
-  <slot />
-</div>
-
-<style lang="scss">
-  .small {
-    width: 1.143em;
-    height: 1.143em;
-  }
-  .medium {
-    width: 1.429em;
-    height: 1.429em;
-  }
-  .large {
-    width: 1.715em;
-    height: 1.715em;
-  }
-</style>
diff --git a/packages/ui/src/components/icons/Add.svelte b/packages/ui/src/components/icons/Add.svelte
index 512a1fa982..0554580c81 100644
--- a/packages/ui/src/components/icons/Add.svelte
+++ b/packages/ui/src/components/icons/Add.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/Back.svelte b/packages/ui/src/components/icons/Back.svelte
index d8ca3ec3b2..9b7ea666b7 100644
--- a/packages/ui/src/components/icons/Back.svelte
+++ b/packages/ui/src/components/icons/Back.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="10.6,14.4 4.3,8 10.6,1.6 11.4,2.4 5.7,8 11.4,13.6 "/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="10.6,14.4 4.3,8 10.6,1.6 11.4,2.4 5.7,8 11.4,13.6 "/>
+</svg>
diff --git a/packages/ui/src/components/icons/Calendar.svelte b/packages/ui/src/components/icons/Calendar.svelte
index ca33845818..b2e928d8f1 100644
--- a/packages/ui/src/components/icons/Calendar.svelte
+++ b/packages/ui/src/components/icons/Calendar.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M19.5,5h-2.1V4.5c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5V5H8.1V4.5C8.1,4.2,7.9,4,7.6,4S7.1,4.2,7.1,4.5V5H5 C4.2,5,3.5,5.7,3.5,6.5V19c0,0.8,0.7,1.5,1.5,1.5h14.5c0.8,0,1.5-0.7,1.5-1.5V6.5C21,5.7,20.3,5,19.5,5z M5,6h2.1v0.5 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h8.3v0.5c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h2.1C19.7,6,20,6.3,20,6.5v3.1H4.5V6.5 C4.5,6.3,4.7,6,5,6z M19.5,19.5H5c-0.3,0-0.5-0.2-0.5-0.5v-8.3H20V19C20,19.2,19.7,19.5,19.5,19.5z"
-    />
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.5,5h-2.1V4.5c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5V5H8.1V4.5C8.1,4.2,7.9,4,7.6,4S7.1,4.2,7.1,4.5V5H5 C4.2,5,3.5,5.7,3.5,6.5V19c0,0.8,0.7,1.5,1.5,1.5h14.5c0.8,0,1.5-0.7,1.5-1.5V6.5C21,5.7,20.3,5,19.5,5z M5,6h2.1v0.5 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h8.3v0.5c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h2.1C19.7,6,20,6.3,20,6.5v3.1H4.5V6.5 C4.5,6.3,4.7,6,5,6z M19.5,19.5H5c-0.3,0-0.5-0.2-0.5-0.5v-8.3H20V19C20,19.2,19.7,19.5,19.5,19.5z" />
+</svg>
diff --git a/packages/ui/src/components/icons/Check.svelte b/packages/ui/src/components/icons/Check.svelte
index d48788c055..b7b0a252fd 100644
--- a/packages/ui/src/components/icons/Check.svelte
+++ b/packages/ui/src/components/icons/Check.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = '#4474F6'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg">
-    <path d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M13.7,8l-4,5c-0.1,0.1-0.3,0.2-0.5,0.2 S8.8,13.1,8.6,13l-2.3-2.5C6,10.2,6,9.7,6.3,9.4c0.3-0.3,0.8-0.3,1.1,0l1.7,1.9L12.5,7c0.3-0.3,0.7-0.4,1.1-0.1 C13.9,7.2,14,7.6,13.7,8z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M13.7,8l-4,5c-0.1,0.1-0.3,0.2-0.5,0.2 S8.8,13.1,8.6,13l-2.3-2.5C6,10.2,6,9.7,6.3,9.4c0.3-0.3,0.8-0.3,1.1,0l1.7,1.9L12.5,7c0.3-0.3,0.7-0.4,1.1-0.1 C13.9,7.2,14,7.6,13.7,8z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/Close.svelte b/packages/ui/src/components/icons/Close.svelte
index 1062c75201..1897290eed 100644
--- a/packages/ui/src/components/icons/Close.svelte
+++ b/packages/ui/src/components/icons/Close.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/Comments.svelte b/packages/ui/src/components/icons/Comments.svelte
index a2f48206dd..08424fd787 100755
--- a/packages/ui/src/components/icons/Comments.svelte
+++ b/packages/ui/src/components/icons/Comments.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <g>
-      <path d="M10,2.8C6,2.8,2.8,6,2.8,10S6,17.2,10,17.2h4.2c0.4,0,0.6,0,0.8,0c1.1-0.2,1.9-1,2.1-2c0-0.2,0-0.4,0-0.8V10 C17.2,6,14,2.8,10,2.8z M16.1,14.9c-0.1,0.6-0.6,1.1-1.2,1.2c-0.1,0-0.3,0-0.7,0H10c-3.4,0-6.2-2.8-6.2-6.2c0-3.4,2.8-6.2,6.2-6.2 s6.2,2.8,6.2,6.2v4.2C16.2,14.6,16.2,14.8,16.1,14.9z"/>
-      <path d="M12.5,8.7h-5C7.2,8.7,7,8.9,7,9.2s0.2,0.5,0.5,0.5h5c0.3,0,0.5-0.2,0.5-0.5S12.8,8.7,12.5,8.7z"/>
-      <path d="M12.5,12H10c-0.3,0-0.5,0.2-0.5,0.5S9.7,13,10,13h2.5c0.3,0,0.5-0.2,0.5-0.5S12.8,12,12.5,12z"/>
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10,2.8C6,2.8,2.8,6,2.8,10S6,17.2,10,17.2h4.2c0.4,0,0.6,0,0.8,0c1.1-0.2,1.9-1,2.1-2c0-0.2,0-0.4,0-0.8V10 C17.2,6,14,2.8,10,2.8z M16.1,14.9c-0.1,0.6-0.6,1.1-1.2,1.2c-0.1,0-0.3,0-0.7,0H10c-3.4,0-6.2-2.8-6.2-6.2c0-3.4,2.8-6.2,6.2-6.2 s6.2,2.8,6.2,6.2v4.2C16.2,14.6,16.2,14.8,16.1,14.9z"/>
+  <path d="M12.5,8.7h-5C7.2,8.7,7,8.9,7,9.2s0.2,0.5,0.5,0.5h5c0.3,0,0.5-0.2,0.5-0.5S12.8,8.7,12.5,8.7z"/>
+  <path d="M12.5,12H10c-0.3,0-0.5,0.2-0.5,0.5S9.7,13,10,13h2.5c0.3,0,0.5-0.2,0.5-0.5S12.8,12,12.5,12z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/Down.svelte b/packages/ui/src/components/icons/Down.svelte
index feb40df776..fb90dc8ff0 100644
--- a/packages/ui/src/components/icons/Down.svelte
+++ b/packages/ui/src/components/icons/Down.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.8,11.8L11.7,8H4L7.8,11.8z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.8,11.8L11.7,8H4L7.8,11.8z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/Forward.svelte b/packages/ui/src/components/icons/Forward.svelte
index 072b8d8e44..fd1e9c4357 100644
--- a/packages/ui/src/components/icons/Forward.svelte
+++ b/packages/ui/src/components/icons/Forward.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="6.4,14.4 5.6,13.6 11.3,8 5.6,2.4 6.4,1.6 12.7,8 "/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="6.4,14.4 5.6,13.6 11.3,8 5.6,2.4 6.4,1.6 12.7,8 "/>
+</svg>
diff --git a/packages/ui/src/components/icons/Search.svelte b/packages/ui/src/components/icons/Search.svelte
index c9275c19b6..d7481673f5 100644
--- a/packages/ui/src/components/icons/Search.svelte
+++ b/packages/ui/src/components/icons/Search.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14.4,13.6L11.7,11c0.8-1,1.3-2.2,1.3-3.5c0-3-2.5-5.5-5.5-5.5C4.5,2,2,4.5,2,7.5c0,3,2.5,5.5,5.5,5.5 c1.3,0,2.6-0.5,3.5-1.3l2.6,2.6c0.2,0.2,0.5,0.2,0.7,0C14.5,14.2,14.5,13.8,14.4,13.6z M3,7.5C3,5,5,3,7.5,3S12,5,12,7.5 S10,12,7.5,12S3,10,3,7.5z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.4,13.6L11.7,11c0.8-1,1.3-2.2,1.3-3.5c0-3-2.5-5.5-5.5-5.5C4.5,2,2,4.5,2,7.5c0,3,2.5,5.5,5.5,5.5 c1.3,0,2.6-0.5,3.5-1.3l2.6,2.6c0.2,0.2,0.5,0.2,0.7,0C14.5,14.2,14.5,13.8,14.4,13.6z M3,7.5C3,5,5,3,7.5,3S12,5,12,7.5 S10,12,7.5,12S3,10,3,7.5z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/ToDo.svelte b/packages/ui/src/components/icons/ToDo.svelte
index deff343f3c..aba36a1896 100644
--- a/packages/ui/src/components/icons/ToDo.svelte
+++ b/packages/ui/src/components/icons/ToDo.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <g>
-      <path d="M12,0H4C1.8,0,0,1.8,0,4v8c0,2.2,1.8,4,4,4h8c2.2,0,4-1.8,4-4V4C16,1.8,14.2,0,12,0z M15,12c0,1.7-1.3,3-3,3H4 c-1.7,0-3-1.3-3-3V4c0-1.7,1.3-3,3-3h8c1.7,0,3,1.3,3,3V12z"/>
-      <path d="M11.6,4.7L6.8,9.8L4.4,7.3c-0.2-0.2-0.5-0.2-0.7,0C3.5,7.5,3.5,7.8,3.6,8l3.2,3.2l5.5-5.9c0.2-0.2,0.2-0.5,0-0.7 C12.1,4.4,11.8,4.5,11.6,4.7z"/>
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <g>
+    <path d="M12,0H4C1.8,0,0,1.8,0,4v8c0,2.2,1.8,4,4,4h8c2.2,0,4-1.8,4-4V4C16,1.8,14.2,0,12,0z M15,12c0,1.7-1.3,3-3,3H4 c-1.7,0-3-1.3-3-3V4c0-1.7,1.3-3,3-3h8c1.7,0,3,1.3,3,3V12z"/>
+    <path d="M11.6,4.7L6.8,9.8L4.4,7.3c-0.2-0.2-0.5-0.2-0.7,0C3.5,7.5,3.5,7.8,3.6,8l3.2,3.2l5.5-5.9c0.2-0.2,0.2-0.5,0-0.7 C12.1,4.4,11.8,4.5,11.6,4.7z"/>
+  </g>
+</svg>
diff --git a/packages/ui/src/components/icons/Up.svelte b/packages/ui/src/components/icons/Up.svelte
index a48dadb0c5..ca292b277d 100644
--- a/packages/ui/src/components/icons/Up.svelte
+++ b/packages/ui/src/components/icons/Up.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.8,7.2L4,11h7.7L7.8,7.2z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.8,7.2L4,11h7.7L7.8,7.2z"/>
+</svg>
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index 72cab4b6a6..7f07da7c33 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -79,6 +79,7 @@
       min-height: $status-bar-height;
       min-width: 1200px;
       font-size: 12px;
+      line-height: 150%;
 
       .status-info {
         flex-grow: 1;
diff --git a/packages/ui/src/components/internal/Status.svelte b/packages/ui/src/components/internal/Status.svelte
index 07f09a091c..9d5e547dcf 100644
--- a/packages/ui/src/components/internal/Status.svelte
+++ b/packages/ui/src/components/internal/Status.svelte
@@ -3,29 +3,24 @@
   import { Severity } from '@anticrm/platform'
 
   import Info from './icons/Info.svelte'
-  import InfoOld from './icons/InfoOld.svelte'
   import Label from '../Label.svelte'
 
   export let status: Status
 </script>
 
-<div class="container">
+<div class="flex-center container">
   {#if status.severity !== Severity.OK}
-  <Info size={'small'}/>
-  <InfoOld size={'small'}/>
-  <InfoOld size={'small'}/>
-  <span><Label label={status.code} params={status.params}/></span>
+    <Info size={'small'}/>
+    <span><Label label={status.code} params={status.params}/></span>
   {/if}
 </div>
 
 <style lang="scss">
   .container {
-    display: inline-grid;
-    grid-auto-flow: column;
-    column-gap: .75em;
     user-select: none;
     span {
-      color: var(--theme-content-accent-color);
+      margin-left: 0.75em;
+      color: var(--theme-content-color);
     }
   }
 </style>
\ No newline at end of file
diff --git a/packages/ui/src/components/internal/icons/Close.svelte b/packages/ui/src/components/internal/icons/Close.svelte
index b4ed4448ed..91609f52c2 100644
--- a/packages/ui/src/components/internal/icons/Close.svelte
+++ b/packages/ui/src/components/internal/icons/Close.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import IconSize from '../../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
-    <path d="M12.8,12l7.6-7.6c0.2-0.2,0.2-0.6,0-0.8s-0.6-0.2-0.8,0L12,11.2L4.4,3.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8 l7.6,7.6l-7.6,7.6c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l7.6-7.6l7.6,7.6c0.1,0.1,0.3,0.2,0.4,0.2 s0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L12.8,12z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.8,12l7.6-7.6c0.2-0.2,0.2-0.6,0-0.8s-0.6-0.2-0.8,0L12,11.2L4.4,3.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8 l7.6,7.6l-7.6,7.6c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l7.6-7.6l7.6,7.6c0.1,0.1,0.3,0.2,0.4,0.2 s0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L12.8,12z"/>
+</svg>
diff --git a/packages/ui/src/components/internal/icons/FontSize.svelte b/packages/ui/src/components/internal/icons/FontSize.svelte
index 46e424b5ca..25f1a48b7f 100644
--- a/packages/ui/src/components/internal/icons/FontSize.svelte
+++ b/packages/ui/src/components/internal/icons/FontSize.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import IconSize from '../../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g>
-      <path d="M5.1,4.6L0,19.4h2.1l1.5-4.2h5.7l1.5,4.2h2.1L7.7,4.6H5.1z M3.9,13.4l2.3-6.9h0.2l2.4,6.9H3.9z"/>
-      <path d="M23,17.6v-5.7c0-1.1-0.3-2.1-1.1-2.8c-0.8-0.7-1.8-1-3.3-1c-1,0-1.8,0.2-2.4,0.7c-0.7,0.5-1.1,1-1.5,1.5l1.1,1.1 c0.3-0.5,0.7-1,1.1-1.3c0.5-0.3,1-0.5,1.6-0.5c0.8,0,1.5,0.2,1.8,0.7c0.3,0.3,0.7,1,0.7,1.6v1h-2.1c-1.6,0-2.8,0.3-3.6,0.8 c-0.8,0.5-1.1,1.3-1.1,2.4c0,1,0.3,1.8,1,2.4c0.7,0.7,1.5,0.8,2.6,0.8c0.8,0,1.5-0.2,2-0.5c0.5-0.3,1-0.8,1.1-1.5h0.2 c0,0.5,0.3,1,0.5,1.3c0.3,0.3,0.8,0.5,1.3,0.5H24v-1.6C24,17.6,23,17.6,23,17.6z M20.9,16.2c0,0.5-0.3,1-0.8,1.3s-1.1,0.5-2,0.5 c-0.7,0-1.1-0.2-1.5-0.5s-0.5-0.7-0.5-1.1v-0.5c0-0.5,0.2-1,0.7-1.1c0.5-0.3,1.1-0.3,2-0.3h2.1V16.2z"/>
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M5.1,4.6L0,19.4h2.1l1.5-4.2h5.7l1.5,4.2h2.1L7.7,4.6H5.1z M3.9,13.4l2.3-6.9h0.2l2.4,6.9H3.9z"/>
+    <path d="M23,17.6v-5.7c0-1.1-0.3-2.1-1.1-2.8c-0.8-0.7-1.8-1-3.3-1c-1,0-1.8,0.2-2.4,0.7c-0.7,0.5-1.1,1-1.5,1.5l1.1,1.1 c0.3-0.5,0.7-1,1.1-1.3c0.5-0.3,1-0.5,1.6-0.5c0.8,0,1.5,0.2,1.8,0.7c0.3,0.3,0.7,1,0.7,1.6v1h-2.1c-1.6,0-2.8,0.3-3.6,0.8 c-0.8,0.5-1.1,1.3-1.1,2.4c0,1,0.3,1.8,1,2.4c0.7,0.7,1.5,0.8,2.6,0.8c0.8,0,1.5-0.2,2-0.5c0.5-0.3,1-0.8,1.1-1.5h0.2 c0,0.5,0.3,1,0.5,1.3c0.3,0.3,0.8,0.5,1.3,0.5H24v-1.6C24,17.6,23,17.6,23,17.6z M20.9,16.2c0,0.5-0.3,1-0.8,1.3s-1.1,0.5-2,0.5 c-0.7,0-1.1-0.2-1.5-0.5s-0.5-0.7-0.5-1.1v-0.5c0-0.5,0.2-1,0.7-1.1c0.5-0.3,1.1-0.3,2-0.3h2.1V16.2z"/>
+  </g>
+</svg>
diff --git a/packages/ui/src/components/internal/icons/Info.svelte b/packages/ui/src/components/internal/icons/Info.svelte
index 91f374b715..01f6931d20 100644
--- a/packages/ui/src/components/internal/icons/Info.svelte
+++ b/packages/ui/src/components/internal/icons/Info.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <polygon points="12.9,14.8 13.2,4.8 10.8,4.8 11.1,14.8 "/>
-  <path d="M12,16c-0.7,0-1.6,0.6-1.6,1.5S11.1,19,12,19s1.5-0.7,1.5-1.5C13.5,16.6,12.7,16,12,16z"/>
-  <path d="M12,0.5C5.7,0.5,0.5,5.7,0.5,12S5.7,23.5,12,23.5S23.5,18.3,23.5,12S18.3,0.5,12,0.5z M12,22.1C6.4,22.1,1.9,17.6,1.9,12 S6.4,1.9,12,1.9S22.1,6.4,22.1,12S17.6,22.1,12,22.1z"/>
+  <polygon points="12.6,14.4 12.8,5.1 11.2,5.1 11.4,14.4 "/>
+  <path d="M12,15.8c-0.6,0-1.2,0.5-1.2,1.2s0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2S12.6,15.8,12,15.8z"/>
+  <path d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M12,22.5C6.2,22.5,1.5,17.8,1.5,12S6.2,1.5,12,1.5 S22.5,6.2,22.5,12S17.8,22.5,12,22.5z"/>
 </svg>
diff --git a/packages/ui/src/components/internal/icons/InfoOld.svelte b/packages/ui/src/components/internal/icons/InfoOld.svelte
deleted file mode 100644
index 92cb549ab8..0000000000
--- a/packages/ui/src/components/internal/icons/InfoOld.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
-// Copyright © 2020 Anticrm Platform Contributors.
-// 
-// Licensed under the Eclipse Public License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License. You may
-// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
-// 
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// 
-// See the License for the specific language governing permissions and
-// limitations under the License.
--->
-
-<script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-content-color)'
-</script>
-
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <polygon points="12.6,14.4 12.8,5.1 11.2,5.1 11.4,14.4 "/>
-  <path d="M12,15.8c-0.6,0-1.2,0.5-1.2,1.2s0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2S12.6,15.8,12,15.8z"/>
-  <path d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M12,23C5.9,23,1,18.1,1,12S5.9,1,12,1s11,4.9,11,11 S18.1,23,12,23z"/>
-</svg>
diff --git a/packages/ui/src/components/internal/icons/Mute.svelte b/packages/ui/src/components/internal/icons/Mute.svelte
index 3056d0d3f6..dc58a8907c 100644
--- a/packages/ui/src/components/internal/icons/Mute.svelte
+++ b/packages/ui/src/components/internal/icons/Mute.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import IconSize from '../../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12,24c-0.1,0-0.2,0-0.4,0C5.3,23.8,0.2,18.7,0,12.3C-0.2,6,4.6,0.6,10.9,0c0.2,0,0.4,0.1,0.6,0.3 c0.1,0.2,0.1,0.4,0,0.6C9,4.3,9.3,8.8,12.2,11.8c2.9,2.9,7.5,3.3,10.9,0.8c0.2-0.1,0.4-0.1,0.6,0c0.2,0.1,0.3,0.3,0.3,0.6 C23.4,19.3,18.2,24,12,24z M9.8,1.3C4.7,2.4,1,7,1.1,12.3C1.3,18,6,22.7,11.7,22.9c5.3,0.2,9.9-3.6,11-8.7c-3.7,2-8.2,1.4-11.2-1.6 C8.4,9.5,7.8,5,9.8,1.3z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12,24c-0.1,0-0.2,0-0.4,0C5.3,23.8,0.2,18.7,0,12.3C-0.2,6,4.6,0.6,10.9,0c0.2,0,0.4,0.1,0.6,0.3 c0.1,0.2,0.1,0.4,0,0.6C9,4.3,9.3,8.8,12.2,11.8c2.9,2.9,7.5,3.3,10.9,0.8c0.2-0.1,0.4-0.1,0.6,0c0.2,0.1,0.3,0.3,0.3,0.6 C23.4,19.3,18.2,24,12,24z M9.8,1.3C4.7,2.4,1,7,1.1,12.3C1.3,18,6,22.7,11.7,22.9c5.3,0.2,9.9-3.6,11-8.7c-3.7,2-8.2,1.4-11.2-1.6 C8.4,9.5,7.8,5,9.8,1.3z"/>
+</svg>
diff --git a/packages/ui/src/components/internal/icons/WiFi.svelte b/packages/ui/src/components/internal/icons/WiFi.svelte
index ae2a86cf47..6e2480245d 100644
--- a/packages/ui/src/components/internal/icons/WiFi.svelte
+++ b/packages/ui/src/components/internal/icons/WiFi.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-  import IconSize from '../../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g>
-      <path d="M12,10.9c-2.7,0-5.1,1.1-6.8,3.1C5,14.3,5,14.7,5.4,14.9s0.7,0.2,0.9-0.1c1.4-1.6,3.5-2.5,5.8-2.5s4.4,0.9,5.8,2.6 c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1c0.3-0.2,0.3-0.7,0.1-0.9C17.2,11.9,14.7,10.9,12,10.9z"/>
-      <path d="M12,17.9c-1.1,0-2.3,0.5-2.9,1.1c-0.2,0.2-0.2,0.7,0,0.9c0.2,0.2,0.7,0.2,0.9,0c0.9-1,3.1-1,4.1,0c0.1,0.1,0.3,0.2,0.5,0.2 c0.2,0,0.3-0.1,0.5-0.2c0.2-0.2,0.2-0.7,0-0.9C14.3,18.4,13.1,17.9,12,17.9z"/>
-      <path d="M23.9,9.7C20.8,6,16.5,3.8,12,3.8S3.2,6,0.2,9.7c-0.2,0.3-0.2,0.7,0.1,0.9c0.3,0.2,0.7,0.2,0.9-0.1 c2.7-3.4,6.7-5.3,10.7-5.3s8,1.9,10.7,5.4c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1C24,10.5,24.1,10,23.9,9.7z"/>
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M12,10.9c-2.7,0-5.1,1.1-6.8,3.1C5,14.3,5,14.7,5.4,14.9s0.7,0.2,0.9-0.1c1.4-1.6,3.5-2.5,5.8-2.5s4.4,0.9,5.8,2.6 c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1c0.3-0.2,0.3-0.7,0.1-0.9C17.2,11.9,14.7,10.9,12,10.9z"/>
+    <path d="M12,17.9c-1.1,0-2.3,0.5-2.9,1.1c-0.2,0.2-0.2,0.7,0,0.9c0.2,0.2,0.7,0.2,0.9,0c0.9-1,3.1-1,4.1,0c0.1,0.1,0.3,0.2,0.5,0.2 c0.2,0,0.3-0.1,0.5-0.2c0.2-0.2,0.2-0.7,0-0.9C14.3,18.4,13.1,17.9,12,17.9z"/>
+    <path d="M23.9,9.7C20.8,6,16.5,3.8,12,3.8S3.2,6,0.2,9.7c-0.2,0.3-0.2,0.7,0.1,0.9c0.3,0.2,0.7,0.2,0.9-0.1 c2.7-3.4,6.7-5.3,10.7-5.3s8,1.9,10.7,5.4c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1C24,10.5,24.1,10,23.9,9.7z"/>
+  </g>
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e9e0b058c3..2b32b270ac 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -47,7 +47,6 @@ export { default as Grid } from './components/Grid.svelte'
 export { default as Row } from './components/Row.svelte'
 export { default as CheckBoxWithLabel } from './components/CheckBoxWithLabel.svelte'
 export { default as CheckBoxList } from './components/CheckBoxList.svelte'
-export { default as IconSize } from './components/IconSize.svelte'
 export { default as EditWithIcon } from './components/EditWithIcon.svelte'
 export { default as Loading } from './components/Loading.svelte'
 export { default as Popup } from './components/Popup.svelte'
diff --git a/plugins/chunter-resources/src/components/icons/Bookmark.svelte b/plugins/chunter-resources/src/components/icons/Bookmark.svelte
index 8b8eed3ebd..2c811dc3b8 100644
--- a/plugins/chunter-resources/src/components/icons/Bookmark.svelte
+++ b/plugins/chunter-resources/src/components/icons/Bookmark.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.2,18c-0.1,0-0.2,0-0.3-0.1l-6-4l-6,4c-0.2,0.1-0.4,0.1-0.5,0c-0.2-0.1-0.3-0.3-0.3-0.4V4.2 C3.2,3,4.3,2,5.5,2h8.9c1.3,0,2.3,1,2.3,2.2v13.3c0,0.2-0.1,0.4-0.3,0.4C16.4,18,16.3,18,16.2,18z M10,12.8c0.1,0,0.2,0,0.3,0.1 l5.5,3.6V4.2c0-0.6-0.6-1.2-1.3-1.2H5.5C4.8,3,4.2,3.5,4.2,4.2v12.4l5.5-3.6C9.8,12.9,9.9,12.8,10,12.8z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.2,18c-0.1,0-0.2,0-0.3-0.1l-6-4l-6,4c-0.2,0.1-0.4,0.1-0.5,0c-0.2-0.1-0.3-0.3-0.3-0.4V4.2 C3.2,3,4.3,2,5.5,2h8.9c1.3,0,2.3,1,2.3,2.2v13.3c0,0.2-0.1,0.4-0.3,0.4C16.4,18,16.3,18,16.2,18z M10,12.8c0.1,0,0.2,0,0.3,0.1 l5.5,3.6V4.2c0-0.6-0.6-1.2-1.3-1.2H5.5C4.8,3,4.2,3.5,4.2,4.2v12.4l5.5-3.6C9.8,12.9,9.9,12.8,10,12.8z"/>
+</svg>
diff --git a/plugins/chunter-resources/src/components/icons/Check.svelte b/plugins/chunter-resources/src/components/icons/Check.svelte
index 19978b1486..ff5e330aaf 100644
--- a/plugins/chunter-resources/src/components/icons/Check.svelte
+++ b/plugins/chunter-resources/src/components/icons/Check.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
 </script>
 
-<IconSize {size}>
-  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill={'#27B166'} d="M10.1,1C5.2,0.9,1.1,4.9,1,9.8V10c0,5,4,9,9,9c4.9,0,9-4,9-8.9C19,5.1,15.1,1.1,10.1,1z"/>
-    <polygon fill={'#FCFCFC'} points="8.5,14.3 5.4,11.1 6.6,9.9 8.5,11.7 13.9,6.4 15.1,7.6 "/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill={'#27B166'} d="M10.1,1C5.2,0.9,1.1,4.9,1,9.8V10c0,5,4,9,9,9c4.9,0,9-4,9-8.9C19,5.1,15.1,1.1,10.1,1z"/>
+  <polygon fill={'#FCFCFC'} points="8.5,14.3 5.4,11.1 6.6,9.9 8.5,11.7 13.9,6.4 15.1,7.6 "/>
+</svg>
diff --git a/plugins/chunter-resources/src/components/icons/Close.svelte b/plugins/chunter-resources/src/components/icons/Close.svelte
index 57ac05a9a6..39be939ee6 100644
--- a/plugins/chunter-resources/src/components/icons/Close.svelte
+++ b/plugins/chunter-resources/src/components/icons/Close.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
-    <path d="M12.8,12l7.6-7.6c0.2-0.2,0.2-0.6,0-0.8s-0.6-0.2-0.8,0L12,11.2L4.4,3.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8 l7.6,7.6l-7.6,7.6c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l7.6-7.6l7.6,7.6c0.1,0.1,0.3,0.2,0.4,0.2 s0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L12.8,12z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.8,12l7.6-7.6c0.2-0.2,0.2-0.6,0-0.8s-0.6-0.2-0.8,0L12,11.2L4.4,3.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8 l7.6,7.6l-7.6,7.6c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l7.6-7.6l7.6,7.6c0.1,0.1,0.3,0.2,0.4,0.2 s0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L12.8,12z"/>
+</svg>
diff --git a/plugins/chunter-resources/src/components/icons/Emoji.svelte b/plugins/chunter-resources/src/components/icons/Emoji.svelte
index 285ab3bd47..87a32291bd 100644
--- a/plugins/chunter-resources/src/components/icons/Emoji.svelte
+++ b/plugins/chunter-resources/src/components/icons/Emoji.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM7.15467 12.4273C8.66416 13.9463 11.0877 14.0045 12.6671 12.5961L12.8453 12.4273C13.04 12.2314 13.3566 12.2304 13.5524 12.4251C13.7265 12.5981 13.7467 12.8674 13.6123 13.0627L13.5547 13.1322L13.5323 13.1545C11.5691 15.1054 8.39616 15.0953 6.44533 13.1322C6.25069 12.9363 6.25169 12.6197 6.44757 12.4251C6.64344 12.2304 6.96002 12.2314 7.15467 12.4273ZM12.5 7.5C13.0523 7.5 13.5 7.94772 13.5 8.5C13.5 9.05228 13.0523 9.5 12.5 9.5C11.9477 9.5 11.5 9.05228 11.5 8.5C11.5 7.94772 11.9477 7.5 12.5 7.5ZM7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5Z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM7.15467 12.4273C8.66416 13.9463 11.0877 14.0045 12.6671 12.5961L12.8453 12.4273C13.04 12.2314 13.3566 12.2304 13.5524 12.4251C13.7265 12.5981 13.7467 12.8674 13.6123 13.0627L13.5547 13.1322L13.5323 13.1545C11.5691 15.1054 8.39616 15.0953 6.44533 13.1322C6.25069 12.9363 6.25169 12.6197 6.44757 12.4251C6.64344 12.2304 6.96002 12.2314 7.15467 12.4273ZM12.5 7.5C13.0523 7.5 13.5 7.94772 13.5 8.5C13.5 9.05228 13.0523 9.5 12.5 9.5C11.9477 9.5 11.5 9.05228 11.5 8.5C11.5 7.94772 11.9477 7.5 12.5 7.5ZM7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5Z"/>
+</svg>
diff --git a/plugins/chunter-resources/src/components/icons/Heart.svelte b/plugins/chunter-resources/src/components/icons/Heart.svelte
index f8b53a7ca5..dd712837ab 100644
--- a/plugins/chunter-resources/src/components/icons/Heart.svelte
+++ b/plugins/chunter-resources/src/components/icons/Heart.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
 </script>
 
-<IconSize {size}>
-  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill={'#F96E50'} d="M1,6.8c0-1.3,0.5-2.6,1.5-3.5c0.9-0.9,2.2-1.4,3.5-1.4c1.6,0,3,0.6,4.1,1.8c1-1.2,2.5-1.8,4.1-1.8 c1.3,0,2.6,0.5,3.5,1.4C18.5,4.2,19,5.5,19,6.8c0,4.8-5.8,8.5-9,11.3C6.7,15.2,1,11.6,1,6.8z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill={'#F96E50'} d="M1,6.8c0-1.3,0.5-2.6,1.5-3.5c0.9-0.9,2.2-1.4,3.5-1.4c1.6,0,3,0.6,4.1,1.8c1-1.2,2.5-1.8,4.1-1.8 c1.3,0,2.6,0.5,3.5,1.4C18.5,4.2,19,5.5,19,6.8c0,4.8-5.8,8.5-9,11.3C6.7,15.2,1,11.6,1,6.8z"/>
+</svg>
diff --git a/plugins/chunter-resources/src/components/icons/MoreH.svelte b/plugins/chunter-resources/src/components/icons/MoreH.svelte
index bc50d04a8b..0c821baa97 100644
--- a/plugins/chunter-resources/src/components/icons/MoreH.svelte
+++ b/plugins/chunter-resources/src/components/icons/MoreH.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.8,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S12.7,10.3,11.8,10.3z"/>
-    <path d="M18,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S18.9,10.3,18,10.3z"/>
-    <path d="M5.5,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S6.5,10.3,5.5,10.3z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.8,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S12.7,10.3,11.8,10.3z"/>
+  <path d="M18,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S18.9,10.3,18,10.3z"/>
+  <path d="M5.5,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S6.5,10.3,5.5,10.3z"/>
+</svg>
diff --git a/plugins/chunter-resources/src/components/icons/Share.svelte b/plugins/chunter-resources/src/components/icons/Share.svelte
index 6056184d33..92e7ee3df0 100644
--- a/plugins/chunter-resources/src/components/icons/Share.svelte
+++ b/plugins/chunter-resources/src/components/icons/Share.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.7,9.5c-0.3,0-0.5,0.2-0.5,0.5v6.2c0,0.6-0.5,1.1-1.2,1.1H5c-0.6,0-1.2-0.5-1.2-1.1V10 c0-0.3-0.2-0.5-0.5-0.5S2.8,9.7,2.8,10v6.2c0,1.1,1,2.1,2.2,2.1h10c1.2,0,2.2-0.9,2.2-2.1V10C17.2,9.7,17,9.5,16.7,9.5z"/>
-    <path d="M7.7,6.2l2.1-2v8.1c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V4.2l2,2c0.1,0.1,0.2,0.1,0.4,0.1 c0.1,0,0.3,0,0.4-0.1c0.2-0.2,0.2-0.5,0-0.7l-2.9-2.9c0-0.1-0.1-0.1-0.2-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c-0.1,0-0.3,0-0.4,0.1L7,5.5C6.8,5.7,6.8,6,7,6.2C7.2,6.4,7.5,6.4,7.7,6.2z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.7,9.5c-0.3,0-0.5,0.2-0.5,0.5v6.2c0,0.6-0.5,1.1-1.2,1.1H5c-0.6,0-1.2-0.5-1.2-1.1V10 c0-0.3-0.2-0.5-0.5-0.5S2.8,9.7,2.8,10v6.2c0,1.1,1,2.1,2.2,2.1h10c1.2,0,2.2-0.9,2.2-2.1V10C17.2,9.7,17,9.5,16.7,9.5z"/>
+  <path d="M7.7,6.2l2.1-2v8.1c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V4.2l2,2c0.1,0.1,0.2,0.1,0.4,0.1 c0.1,0,0.3,0,0.4-0.1c0.2-0.2,0.2-0.5,0-0.7l-2.9-2.9c0-0.1-0.1-0.1-0.2-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c-0.1,0-0.3,0-0.4,0.1L7,5.5C6.8,5.7,6.8,6,7,6.2C7.2,6.4,7.5,6.4,7.7,6.2z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/Address.svelte b/plugins/recruit-resources/src/components/icons/Address.svelte
index f458f76d9c..136db5bc75 100644
--- a/plugins/recruit-resources/src/components/icons/Address.svelte
+++ b/plugins/recruit-resources/src/components/icons/Address.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.1,8.2c-0.3-0.6-0.8-1-1.6-1.8l-0.8-0.7c-1.6-1.4-2.5-2.1-3.6-2.1c-1.1,0-1.9,0.7-3.6,2.1L5.6,6.5 C4.7,7.2,4.2,7.6,3.9,8.2c-0.3,0.6-0.3,1.2-0.3,2.4v3.5c0,1.7,0,2.6,0.6,3.2C4.9,18,5.8,18,7.5,18h0.4c0,0,0,0,0,0s0,0,0,0h4.2 c0,0,0,0,0,0s0,0,0,0h0.4c1.7,0,2.6,0,3.2-0.6c0.6-0.6,0.6-1.5,0.6-3.2v-3.5C16.3,9.5,16.3,8.8,16.1,8.2z M11.6,17H8.4v-3.5 c0-0.3,0.2-0.5,0.5-0.5h2.2c0.3,0,0.5,0.2,0.5,0.5V17z M15.3,14.2c0,1.5,0,2.2-0.3,2.5C14.7,17,14,17,12.6,17v-3.5 c0-0.8-0.7-1.5-1.5-1.5H8.9c-0.8,0-1.5,0.7-1.5,1.5V17C6,17,5.3,17,5,16.7c-0.3-0.3-0.3-1-0.3-2.5v-3.5c0-1.1,0-1.6,0.2-2 s0.6-0.7,1.4-1.4l0.8-0.7C8.5,5.3,9.3,4.6,10,4.6s1.5,0.6,2.9,1.9l0.8,0.7c0.8,0.7,1.2,1,1.4,1.4s0.2,0.9,0.2,2V14.2z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.1,8.2c-0.3-0.6-0.8-1-1.6-1.8l-0.8-0.7c-1.6-1.4-2.5-2.1-3.6-2.1c-1.1,0-1.9,0.7-3.6,2.1L5.6,6.5 C4.7,7.2,4.2,7.6,3.9,8.2c-0.3,0.6-0.3,1.2-0.3,2.4v3.5c0,1.7,0,2.6,0.6,3.2C4.9,18,5.8,18,7.5,18h0.4c0,0,0,0,0,0s0,0,0,0h4.2 c0,0,0,0,0,0s0,0,0,0h0.4c1.7,0,2.6,0,3.2-0.6c0.6-0.6,0.6-1.5,0.6-3.2v-3.5C16.3,9.5,16.3,8.8,16.1,8.2z M11.6,17H8.4v-3.5 c0-0.3,0.2-0.5,0.5-0.5h2.2c0.3,0,0.5,0.2,0.5,0.5V17z M15.3,14.2c0,1.5,0,2.2-0.3,2.5C14.7,17,14,17,12.6,17v-3.5 c0-0.8-0.7-1.5-1.5-1.5H8.9c-0.8,0-1.5,0.7-1.5,1.5V17C6,17,5.3,17,5,16.7c-0.3-0.3-0.3-1-0.3-2.5v-3.5c0-1.1,0-1.6,0.2-2 s0.6-0.7,1.4-1.4l0.8-0.7C8.5,5.3,9.3,4.6,10,4.6s1.5,0.6,2.9,1.9l0.8,0.7c0.8,0.7,1.2,1,1.4,1.4s0.2,0.9,0.2,2V14.2z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/Attachment.svelte b/plugins/recruit-resources/src/components/icons/Attachment.svelte
index 3e74bc4dd7..2f729737ec 100644
--- a/plugins/recruit-resources/src/components/icons/Attachment.svelte
+++ b/plugins/recruit-resources/src/components/icons/Attachment.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.8,10.5l5.7-5.7c1.2-1.2,3.1-1.2,4.2,0s1.2,3.1,0,4.2L8,15.8c-0.6,0.6-1.5,0.6-2.1,0c-0.6-0.6-0.6-1.5,0-2.1l6-6 c0.2-0.2,0.2-0.5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0l-6,6c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l6.7-6.7c1.6-1.6,1.6-4.1,0-5.7 s-4.1-1.6-5.7,0L4.1,9.8c-0.2,0.2-0.2,0.5,0,0.7C4.3,10.7,4.6,10.7,4.8,10.5z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.8,10.5l5.7-5.7c1.2-1.2,3.1-1.2,4.2,0s1.2,3.1,0,4.2L8,15.8c-0.6,0.6-1.5,0.6-2.1,0c-0.6-0.6-0.6-1.5,0-2.1l6-6 c0.2-0.2,0.2-0.5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0l-6,6c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l6.7-6.7c1.6-1.6,1.6-4.1,0-5.7 s-4.1-1.6-5.7,0L4.1,9.8c-0.2,0.2-0.2,0.5,0,0.7C4.3,10.7,4.6,10.7,4.8,10.5z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/File.svelte b/plugins/recruit-resources/src/components/icons/File.svelte
index b0ad282350..d3584f6040 100644
--- a/plugins/recruit-resources/src/components/icons/File.svelte
+++ b/plugins/recruit-resources/src/components/icons/File.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-    <path d="M15.7,2.6C15.1,2,14.2,2,12.5,2H9.9C9.5,2,9.2,2,9,2.1S8.6,2.4,8.3,2.6l-4,4C4,6.9,3.9,7.1,3.8,7.3C3.7,7.6,3.7,7.8,3.7,8.2 v6c0,1.7,0,2.6,0.6,3.2S5.8,18,7.5,18h5c1.7,0,2.6,0,3.2-0.6s0.6-1.5,0.6-3.2V5.8C16.3,4.2,16.3,3.3,15.7,2.6z M5,7.4l4-4 C9.2,3.2,9.3,3.1,9.4,3c0,0,0.1,0,0.1,0v3.4c0,0.7,0,1.2-0.1,1.3C9.2,7.8,8.8,7.8,8.1,7.8H4.7c0,0,0-0.1,0-0.1 C4.7,7.7,4.8,7.5,5,7.4z M15.3,14.2c0,1.5,0,2.2-0.3,2.5S14,17,12.5,17h-5C6,17,5.3,17,5,16.7s-0.3-1-0.3-2.5V8.8h3.4 c1,0,1.6,0,2-0.4c0.4-0.4,0.4-1,0.4-2V3h2C14,3,14.7,3,15,3.3s0.3,1,0.3,2.5V14.2z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path d="M15.7,2.6C15.1,2,14.2,2,12.5,2H9.9C9.5,2,9.2,2,9,2.1S8.6,2.4,8.3,2.6l-4,4C4,6.9,3.9,7.1,3.8,7.3C3.7,7.6,3.7,7.8,3.7,8.2 v6c0,1.7,0,2.6,0.6,3.2S5.8,18,7.5,18h5c1.7,0,2.6,0,3.2-0.6s0.6-1.5,0.6-3.2V5.8C16.3,4.2,16.3,3.3,15.7,2.6z M5,7.4l4-4 C9.2,3.2,9.3,3.1,9.4,3c0,0,0.1,0,0.1,0v3.4c0,0.7,0,1.2-0.1,1.3C9.2,7.8,8.8,7.8,8.1,7.8H4.7c0,0,0-0.1,0-0.1 C4.7,7.7,4.8,7.5,5,7.4z M15.3,14.2c0,1.5,0,2.2-0.3,2.5S14,17,12.5,17h-5C6,17,5.3,17,5,16.7s-0.3-1-0.3-2.5V8.8h3.4 c1,0,1.6,0,2-0.4c0.4-0.4,0.4-1,0.4-2V3h2C14,3,14.7,3,15,3.3s0.3,1,0.3,2.5V14.2z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/Mail.svelte b/plugins/recruit-resources/src/components/icons/Mail.svelte
index 0da0365952..1431ce6b47 100644
--- a/plugins/recruit-resources/src/components/icons/Mail.svelte
+++ b/plugins/recruit-resources/src/components/icons/Mail.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M12.9,2.7H3.1c-1,0-1.7,0.8-1.7,1.7v7.5c0,1,0.8,1.7,1.7,1.7h9.9c1,0,1.7-0.8,1.7-1.7V4.4C14.7,3.5,13.9,2.7,12.9,2.7z M12.9,3.7c0.1,0,0.2,0,0.3,0.1L8,7.9L2.8,3.8c0.1,0,0.2-0.1,0.3-0.1H12.9z M12.9,12.6H3.1c-0.4,0-0.7-0.3-0.7-0.7V4.7L7.7,9 C7.8,9,7.9,9.1,8,9.1S8.2,9,8.3,9l5.4-4.3v7.2C13.7,12.3,13.3,12.6,12.9,12.6z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M12.9,2.7H3.1c-1,0-1.7,0.8-1.7,1.7v7.5c0,1,0.8,1.7,1.7,1.7h9.9c1,0,1.7-0.8,1.7-1.7V4.4C14.7,3.5,13.9,2.7,12.9,2.7z M12.9,3.7c0.1,0,0.2,0,0.3,0.1L8,7.9L2.8,3.8c0.1,0,0.2-0.1,0.3-0.1H12.9z M12.9,12.6H3.1c-0.4,0-0.7-0.3-0.7-0.7V4.7L7.7,9 C7.8,9,7.9,9.1,8,9.1S8.2,9,8.3,9l5.4-4.3v7.2C13.7,12.3,13.3,12.6,12.9,12.6z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/MoreH.svelte b/plugins/recruit-resources/src/components/icons/MoreH.svelte
index 9e280b549a..4acd9cd326 100644
--- a/plugins/recruit-resources/src/components/icons/MoreH.svelte
+++ b/plugins/recruit-resources/src/components/icons/MoreH.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.8,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S12.7,10.3,11.8,10.3z" />
-    <path d="M18,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S18.9,10.3,18,10.3z" />
-    <path d="M5.5,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S6.5,10.3,5.5,10.3z" />
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.8,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S12.7,10.3,11.8,10.3z" />
+  <path d="M18,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S18.9,10.3,18,10.3z" />
+  <path d="M5.5,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S6.5,10.3,5.5,10.3z" />
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/Recruiting.svelte b/plugins/recruit-resources/src/components/icons/Recruiting.svelte
index 510a21d1bb..ebe4157740 100644
--- a/plugins/recruit-resources/src/components/icons/Recruiting.svelte
+++ b/plugins/recruit-resources/src/components/icons/Recruiting.svelte
@@ -15,18 +15,15 @@
 -->
 
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <g>
-      <path d="M9.6,14.4c-1.8,0-7.4,0-7.4,3.4c0,3,4.2,3.4,7.4,3.4c1.8,0,7.4,0,7.4-3.4C17.1,14.7,12.8,14.4,9.6,14.4z M9.6,20c-4.1,0-6.2-0.7-6.2-2.2c0-1.5,2.1-2.2,6.2-2.2s6.2,0.7,6.2,2.2C15.9,19.2,13.8,20,9.6,20z"/>
-      <path d="M9.6,12.4C9.6,12.4,9.7,12.4,9.6,12.4c1.4,0,2.6-0.5,3.5-1.5c0.9-0.9,1.4-2.2,1.4-3.5c0-2.7-2.2-5-5-5 c-2.7,0-5,2.2-5,5C4.7,10.1,6.9,12.4,9.6,12.4z M9.6,3.6c2.1,0,3.8,1.7,3.8,3.8c0,1-0.4,2-1.1,2.7c-0.7,0.7-1.7,1.1-2.7,1.1h0 c-2.1,0-3.8-1.7-3.8-3.8C5.9,5.3,7.6,3.6,9.6,3.6z"/>
-      <path d="M16.5,10c-0.3,0-0.6,0.3-0.5,0.7c0,0.3,0.3,0.5,0.6,0.5c0,0,0.1,0,0.1,0C18.5,11,20,9.3,20,7.4 c0-1.9-1.4-3.5-3.3-3.8C16.4,3.5,16.1,3.7,16,4c-0.1,0.3,0.2,0.6,0.5,0.7c1.3,0.2,2.3,1.3,2.3,2.7C18.8,8.7,17.8,9.9,16.5,10z"/>
-      <path d="M18.7,13.9c-0.3,0-0.6,0.2-0.7,0.5s0.2,0.6,0.5,0.7c2.1,0.3,2.1,1.1,2.1,1.3c0,0.3-0.1,0.7-0.9,1 c-0.3,0.1-0.5,0.5-0.3,0.8c0.1,0.2,0.3,0.4,0.6,0.4c0.1,0,0.1,0,0.2,0c1.4-0.5,1.7-1.5,1.7-2.1C21.9,15,20.8,14.2,18.7,13.9z"/>
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g>
+    <path d="M9.6,14.4c-1.8,0-7.4,0-7.4,3.4c0,3,4.2,3.4,7.4,3.4c1.8,0,7.4,0,7.4-3.4C17.1,14.7,12.8,14.4,9.6,14.4z M9.6,20c-4.1,0-6.2-0.7-6.2-2.2c0-1.5,2.1-2.2,6.2-2.2s6.2,0.7,6.2,2.2C15.9,19.2,13.8,20,9.6,20z"/>
+    <path d="M9.6,12.4C9.6,12.4,9.7,12.4,9.6,12.4c1.4,0,2.6-0.5,3.5-1.5c0.9-0.9,1.4-2.2,1.4-3.5c0-2.7-2.2-5-5-5 c-2.7,0-5,2.2-5,5C4.7,10.1,6.9,12.4,9.6,12.4z M9.6,3.6c2.1,0,3.8,1.7,3.8,3.8c0,1-0.4,2-1.1,2.7c-0.7,0.7-1.7,1.1-2.7,1.1h0 c-2.1,0-3.8-1.7-3.8-3.8C5.9,5.3,7.6,3.6,9.6,3.6z"/>
+    <path d="M16.5,10c-0.3,0-0.6,0.3-0.5,0.7c0,0.3,0.3,0.5,0.6,0.5c0,0,0.1,0,0.1,0C18.5,11,20,9.3,20,7.4 c0-1.9-1.4-3.5-3.3-3.8C16.4,3.5,16.1,3.7,16,4c-0.1,0.3,0.2,0.6,0.5,0.7c1.3,0.2,2.3,1.3,2.3,2.7C18.8,8.7,17.8,9.9,16.5,10z"/>
+    <path d="M18.7,13.9c-0.3,0-0.6,0.2-0.7,0.5s0.2,0.6,0.5,0.7c2.1,0.3,2.1,1.1,2.1,1.3c0,0.3-0.1,0.7-0.9,1 c-0.3,0.1-0.5,0.5-0.3,0.8c0.1,0.2,0.3,0.4,0.6,0.4c0.1,0,0.1,0,0.2,0c1.4-0.5,1.7-1.5,1.7-2.1C21.9,15,20.8,14.2,18.7,13.9z"/>
+  </g>
+</svg>
diff --git a/plugins/task-resources/src/components/icons/File.svelte b/plugins/task-resources/src/components/icons/File.svelte
index b0ad282350..d3584f6040 100644
--- a/plugins/task-resources/src/components/icons/File.svelte
+++ b/plugins/task-resources/src/components/icons/File.svelte
@@ -15,13 +15,10 @@
 -->
 
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-    <path d="M15.7,2.6C15.1,2,14.2,2,12.5,2H9.9C9.5,2,9.2,2,9,2.1S8.6,2.4,8.3,2.6l-4,4C4,6.9,3.9,7.1,3.8,7.3C3.7,7.6,3.7,7.8,3.7,8.2 v6c0,1.7,0,2.6,0.6,3.2S5.8,18,7.5,18h5c1.7,0,2.6,0,3.2-0.6s0.6-1.5,0.6-3.2V5.8C16.3,4.2,16.3,3.3,15.7,2.6z M5,7.4l4-4 C9.2,3.2,9.3,3.1,9.4,3c0,0,0.1,0,0.1,0v3.4c0,0.7,0,1.2-0.1,1.3C9.2,7.8,8.8,7.8,8.1,7.8H4.7c0,0,0-0.1,0-0.1 C4.7,7.7,4.8,7.5,5,7.4z M15.3,14.2c0,1.5,0,2.2-0.3,2.5S14,17,12.5,17h-5C6,17,5.3,17,5,16.7s-0.3-1-0.3-2.5V8.8h3.4 c1,0,1.6,0,2-0.4c0.4-0.4,0.4-1,0.4-2V3h2C14,3,14.7,3,15,3.3s0.3,1,0.3,2.5V14.2z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path d="M15.7,2.6C15.1,2,14.2,2,12.5,2H9.9C9.5,2,9.2,2,9,2.1S8.6,2.4,8.3,2.6l-4,4C4,6.9,3.9,7.1,3.8,7.3C3.7,7.6,3.7,7.8,3.7,8.2 v6c0,1.7,0,2.6,0.6,3.2S5.8,18,7.5,18h5c1.7,0,2.6,0,3.2-0.6s0.6-1.5,0.6-3.2V5.8C16.3,4.2,16.3,3.3,15.7,2.6z M5,7.4l4-4 C9.2,3.2,9.3,3.1,9.4,3c0,0,0.1,0,0.1,0v3.4c0,0.7,0,1.2-0.1,1.3C9.2,7.8,8.8,7.8,8.1,7.8H4.7c0,0,0-0.1,0-0.1 C4.7,7.7,4.8,7.5,5,7.4z M15.3,14.2c0,1.5,0,2.2-0.3,2.5S14,17,12.5,17h-5C6,17,5.3,17,5,16.7s-0.3-1-0.3-2.5V8.8h3.4 c1,0,1.6,0,2-0.4c0.4-0.4,0.4-1,0.4-2V3h2C14,3,14.7,3,15,3.3s0.3,1,0.3,2.5V14.2z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Add.svelte b/plugins/workbench-resources/src/components/icons/Add.svelte
index 756fca1519..d5a5a70dff 100644
--- a/plugins/workbench-resources/src/components/icons/Add.svelte
+++ b/plugins/workbench-resources/src/components/icons/Add.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M20,11.2h-7.2V4c0-0.4-0.3-0.8-0.8-0.8S11.2,3.6,11.2,4v7.2H4c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h7.2V20 c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-7.2H20c0.4,0,0.8-0.3,0.8-0.8S20.4,11.2,20,11.2z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20,11.2h-7.2V4c0-0.4-0.3-0.8-0.8-0.8S11.2,3.6,11.2,4v7.2H4c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h7.2V20 c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-7.2H20c0.4,0,0.8-0.3,0.8-0.8S20.4,11.2,20,11.2z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Close.svelte b/plugins/workbench-resources/src/components/icons/Close.svelte
index 058a1c577e..74a431334b 100644
--- a/plugins/workbench-resources/src/components/icons/Close.svelte
+++ b/plugins/workbench-resources/src/components/icons/Close.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12.8,12l7.6-7.6c0.2-0.2,0.2-0.6,0-0.8s-0.6-0.2-0.8,0L12,11.2L4.4,3.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8 l7.6,7.6l-7.6,7.6c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l7.6-7.6l7.6,7.6c0.1,0.1,0.3,0.2,0.4,0.2 s0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L12.8,12z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.8,12l7.6-7.6c0.2-0.2,0.2-0.6,0-0.8s-0.6-0.2-0.8,0L12,11.2L4.4,3.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8 l7.6,7.6l-7.6,7.6c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l7.6-7.6l7.6,7.6c0.1,0.1,0.3,0.2,0.4,0.2 s0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L12.8,12z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Collapsed.svelte b/plugins/workbench-resources/src/components/icons/Collapsed.svelte
index e237e48076..10b8b5f4dd 100644
--- a/plugins/workbench-resources/src/components/icons/Collapsed.svelte
+++ b/plugins/workbench-resources/src/components/icons/Collapsed.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="6.5,14.5 5.5,13.5 10.9,8 5.5,2.5 6.5,1.5 13.1,8 "/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="6.5,14.5 5.5,13.5 10.9,8 5.5,2.5 6.5,1.5 13.1,8 "/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Down.svelte b/plugins/workbench-resources/src/components/icons/Down.svelte
index 404e6bdc19..404c14a9d3 100644
--- a/plugins/workbench-resources/src/components/icons/Down.svelte
+++ b/plugins/workbench-resources/src/components/icons/Down.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.8,10.8L11.7,7H4L7.8,10.8z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.8,10.8L11.7,7H4L7.8,10.8z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Expanded.svelte b/plugins/workbench-resources/src/components/icons/Expanded.svelte
index 74cec8c413..beabe50e15 100644
--- a/plugins/workbench-resources/src/components/icons/Expanded.svelte
+++ b/plugins/workbench-resources/src/components/icons/Expanded.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="8,12.1 1.5,5.5 2.5,4.5 8,9.9 13.5,4.5 14.5,5.5 "/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="8,12.1 1.5,5.5 2.5,4.5 8,9.9 13.5,4.5 14.5,5.5 "/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/FullRight.svelte b/plugins/workbench-resources/src/components/icons/FullRight.svelte
index ec5cce4127..49f6fe13e2 100644
--- a/plugins/workbench-resources/src/components/icons/FullRight.svelte
+++ b/plugins/workbench-resources/src/components/icons/FullRight.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.4,2.6c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l4.1,4.1H2.3C2,7.5,1.8,7.7,1.8,8 c0,0.3,0.2,0.5,0.5,0.5h10.5l-4.1,4.1c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l5-5c0.2-0.2,0.2-0.5,0-0.7L9.4,2.6z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.4,2.6c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l4.1,4.1H2.3C2,7.5,1.8,7.7,1.8,8 c0,0.3,0.2,0.5,0.5,0.5h10.5l-4.1,4.1c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l5-5c0.2-0.2,0.2-0.5,0-0.7L9.4,2.6z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Home.svelte b/plugins/workbench-resources/src/components/icons/Home.svelte
index 661c0c159b..21df5139bb 100644
--- a/plugins/workbench-resources/src/components/icons/Home.svelte
+++ b/plugins/workbench-resources/src/components/icons/Home.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-    <path d="M24.5,26.6h-17c-0.9,0-1.6-0.7-1.6-1.6V14.7c0-0.5,0.2-0.9,0.6-1.3l8.8-6.9c0.6-0.5,1.4-0.5,2,0l8.2,6.9 c0.4,0.3,0.6,0.8,0.6,1.2V25C26.1,25.9,25.4,26.6,24.5,26.6z M16.3,7.4c-0.1,0-0.2,0-0.2,0.1l-8.8,6.9c-0.1,0.1-0.2,0.2-0.2,0.3V25 c0,0.2,0.2,0.4,0.4,0.4h17c0.2,0,0.4-0.2,0.4-0.4V14.7c0-0.1-0.1-0.2-0.1-0.3l-8.2-6.9C16.4,7.4,16.3,7.4,16.3,7.4z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path d="M24.5,26.6h-17c-0.9,0-1.6-0.7-1.6-1.6V14.7c0-0.5,0.2-0.9,0.6-1.3l8.8-6.9c0.6-0.5,1.4-0.5,2,0l8.2,6.9 c0.4,0.3,0.6,0.8,0.6,1.2V25C26.1,25.9,25.4,26.6,24.5,26.6z M16.3,7.4c-0.1,0-0.2,0-0.2,0.1l-8.8,6.9c-0.1,0.1-0.2,0.2-0.2,0.3V25 c0,0.2,0.2,0.4,0.4,0.4h17c0.2,0,0.4-0.2,0.4-0.4V14.7c0-0.1-0.1-0.2-0.1-0.3l-8.2-6.9C16.4,7.4,16.3,7.4,16.3,7.4z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Lock.svelte b/plugins/workbench-resources/src/components/icons/Lock.svelte
index f3ecceb8c7..39881b2288 100644
--- a/plugins/workbench-resources/src/components/icons/Lock.svelte
+++ b/plugins/workbench-resources/src/components/icons/Lock.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13,6.9h-1.1V4.8c0-2.2-1.8-3.9-3.9-3.9c-2.2,0-3.9,1.8-3.9,3.9v2.1H3c-0.9,0-1.6,0.7-1.6,1.6v5.3 c0,0.9,0.7,1.6,1.6,1.6h10c0.9,0,1.6-0.7,1.6-1.6V8.5C14.6,7.6,13.9,6.9,13,6.9z M5.3,4.8c0-1.5,1.2-2.7,2.7-2.7s2.7,1.2,2.7,2.7 v2.1H5.3V4.8z M13.4,13.8c0,0.2-0.2,0.4-0.4,0.4H3c-0.2,0-0.4-0.2-0.4-0.4V8.5c0-0.2,0.2-0.4,0.4-0.4h10c0.2,0,0.4,0.2,0.4,0.4V13.8 z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13,6.9h-1.1V4.8c0-2.2-1.8-3.9-3.9-3.9c-2.2,0-3.9,1.8-3.9,3.9v2.1H3c-0.9,0-1.6,0.7-1.6,1.6v5.3 c0,0.9,0.7,1.6,1.6,1.6h10c0.9,0,1.6-0.7,1.6-1.6V8.5C14.6,7.6,13.9,6.9,13,6.9z M5.3,4.8c0-1.5,1.2-2.7,2.7-2.7s2.7,1.2,2.7,2.7 v2.1H5.3V4.8z M13.4,13.8c0,0.2-0.2,0.4-0.4,0.4H3c-0.2,0-0.4-0.2-0.4-0.4V8.5c0-0.2,0.2-0.4,0.4-0.4h10c0.2,0,0.4,0.2,0.4,0.4V13.8 z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Mention.svelte b/plugins/workbench-resources/src/components/icons/Mention.svelte
index 7e333be74d..4ddc225692 100644
--- a/plugins/workbench-resources/src/components/icons/Mention.svelte
+++ b/plugins/workbench-resources/src/components/icons/Mention.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15,7.2c0,0.8-0.1,1.5-0.4,2.2c-0.3,0.7-0.6,1.2-1.1,1.6c-0.5,0.4-1,0.6-1.6,0.6c-0.5,0-0.9-0.1-1.2-0.4 c-0.3-0.3-0.5-0.6-0.6-1.1H9.9c-0.2,0.5-0.6,0.8-1,1.1c-0.4,0.3-0.9,0.4-1.5,0.4c-0.9,0-1.6-0.3-2.1-0.9c-0.5-0.6-0.8-1.4-0.8-2.4 c0-0.8,0.2-1.4,0.5-2c0.3-0.6,0.8-1.1,1.3-1.4c0.6-0.3,1.2-0.5,2-0.5c0.4,0,0.9,0,1.4,0.1c0.5,0.1,1,0.2,1.4,0.3l-0.2,4V9 c0,1,0.4,1.5,1.1,1.5c0.5,0,0.9-0.3,1.3-0.9c0.3-0.6,0.5-1.4,0.5-2.4c0-1-0.2-1.9-0.6-2.7c-0.4-0.8-1-1.4-1.8-1.8 c-0.8-0.4-1.7-0.6-2.7-0.6c-1.3,0-2.4,0.3-3.4,0.8C4.3,3.4,3.6,4.2,3,5.2c-0.5,1-0.8,2.1-0.8,3.4c0,1.7,0.5,3,1.4,4 c0.9,0.9,2.3,1.4,4,1.4c1.2,0,2.5-0.2,3.8-0.7v1.2C10.4,14.8,9.1,15,7.7,15c-2.1,0-3.8-0.6-4.9-1.7C1.6,12.2,1,10.6,1,8.6 c0-1.5,0.3-2.8,0.9-3.9C2.6,3.5,3.5,2.6,4.6,2c1.2-0.6,2.5-1,4-1c1.3,0,2.4,0.3,3.3,0.8c1,0.5,1.7,1.2,2.3,2.2C14.7,4.9,15,6,15,7.2 z M6,8.3c0,1.4,0.6,2.1,1.7,2.1c1.2,0,1.8-0.9,1.9-2.6l0.1-2.2C9.3,5.5,8.8,5.5,8.4,5.5C7.6,5.5,7,5.7,6.6,6.2C6.2,6.7,6,7.4,6,8.3z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15,7.2c0,0.8-0.1,1.5-0.4,2.2c-0.3,0.7-0.6,1.2-1.1,1.6c-0.5,0.4-1,0.6-1.6,0.6c-0.5,0-0.9-0.1-1.2-0.4 c-0.3-0.3-0.5-0.6-0.6-1.1H9.9c-0.2,0.5-0.6,0.8-1,1.1c-0.4,0.3-0.9,0.4-1.5,0.4c-0.9,0-1.6-0.3-2.1-0.9c-0.5-0.6-0.8-1.4-0.8-2.4 c0-0.8,0.2-1.4,0.5-2c0.3-0.6,0.8-1.1,1.3-1.4c0.6-0.3,1.2-0.5,2-0.5c0.4,0,0.9,0,1.4,0.1c0.5,0.1,1,0.2,1.4,0.3l-0.2,4V9 c0,1,0.4,1.5,1.1,1.5c0.5,0,0.9-0.3,1.3-0.9c0.3-0.6,0.5-1.4,0.5-2.4c0-1-0.2-1.9-0.6-2.7c-0.4-0.8-1-1.4-1.8-1.8 c-0.8-0.4-1.7-0.6-2.7-0.6c-1.3,0-2.4,0.3-3.4,0.8C4.3,3.4,3.6,4.2,3,5.2c-0.5,1-0.8,2.1-0.8,3.4c0,1.7,0.5,3,1.4,4 c0.9,0.9,2.3,1.4,4,1.4c1.2,0,2.5-0.2,3.8-0.7v1.2C10.4,14.8,9.1,15,7.7,15c-2.1,0-3.8-0.6-4.9-1.7C1.6,12.2,1,10.6,1,8.6 c0-1.5,0.3-2.8,0.9-3.9C2.6,3.5,3.5,2.6,4.6,2c1.2-0.6,2.5-1,4-1c1.3,0,2.4,0.3,3.3,0.8c1,0.5,1.7,1.2,2.3,2.2C14.7,4.9,15,6,15,7.2 z M6,8.3c0,1.4,0.6,2.1,1.7,2.1c1.2,0,1.8-0.9,1.9-2.6l0.1-2.2C9.3,5.5,8.8,5.5,8.4,5.5C7.6,5.5,7,5.7,6.6,6.2C6.2,6.7,6,7.4,6,8.3z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/MoreH.svelte b/plugins/workbench-resources/src/components/icons/MoreH.svelte
index bc50d04a8b..0c821baa97 100644
--- a/plugins/workbench-resources/src/components/icons/MoreH.svelte
+++ b/plugins/workbench-resources/src/components/icons/MoreH.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.8,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S12.7,10.3,11.8,10.3z"/>
-    <path d="M18,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S18.9,10.3,18,10.3z"/>
-    <path d="M5.5,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S6.5,10.3,5.5,10.3z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.8,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S12.7,10.3,11.8,10.3z"/>
+  <path d="M18,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S18.9,10.3,18,10.3z"/>
+  <path d="M5.5,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S6.5,10.3,5.5,10.3z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Search.svelte b/plugins/workbench-resources/src/components/icons/Search.svelte
index 3db2d1322e..b29da26d5e 100644
--- a/plugins/workbench-resources/src/components/icons/Search.svelte
+++ b/plugins/workbench-resources/src/components/icons/Search.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-    <path d="M25.4,24.6l-4.8-4.8c1.2-1.4,2-3.3,2-5.3c0-4.5-3.6-8.1-8.1-8.1c-4.5,0-8.1,3.6-8.1,8.1c0,4.5,3.6,8.1,8.1,8.1 c2,0,3.9-0.7,5.3-2l4.8,4.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2C25.7,25.2,25.7,24.8,25.4,24.6z M7.6,14.5 c0-3.8,3.1-6.9,6.9-6.9s6.9,3.1,6.9,6.9c0,1.9-0.8,3.6-2,4.9c0,0,0,0,0,0s0,0,0,0c-1.2,1.2-3,2-4.9,2C10.7,21.4,7.6,18.3,7.6,14.5z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path d="M25.4,24.6l-4.8-4.8c1.2-1.4,2-3.3,2-5.3c0-4.5-3.6-8.1-8.1-8.1c-4.5,0-8.1,3.6-8.1,8.1c0,4.5,3.6,8.1,8.1,8.1 c2,0,3.9-0.7,5.3-2l4.8,4.8c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2C25.7,25.2,25.7,24.8,25.4,24.6z M7.6,14.5 c0-3.8,3.1-6.9,6.9-6.9s6.9,3.1,6.9,6.9c0,1.9-0.8,3.6-2,4.9c0,0,0,0,0,0s0,0,0,0c-1.2,1.2-3,2-4.9,2C10.7,21.4,7.6,18.3,7.6,14.5z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Star.svelte b/plugins/workbench-resources/src/components/icons/Star.svelte
index 402a82d5b7..8e2a1a0322 100644
--- a/plugins/workbench-resources/src/components/icons/Star.svelte
+++ b/plugins/workbench-resources/src/components/icons/Star.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.8,14.5c-0.3,0-0.5-0.1-0.7-0.2c-0.4-0.3-0.6-0.8-0.6-1.3L4,10.1c0-0.1,0-0.2-0.1-0.3l-2-2C1.5,7.4,1.4,6.8,1.6,6.3 c0.2-0.5,0.6-0.8,1.1-0.9L5.4,5c0.1,0,0.2-0.1,0.2-0.2l1.2-2.6C7,1.8,7.5,1.5,8,1.5s1,0.3,1.2,0.8l0,0l1.2,2.6 c0,0.1,0.1,0.2,0.2,0.2l2.7,0.4c0.5,0.1,0.9,0.4,1.1,0.9c0.2,0.5,0,1-0.3,1.4l-2,2C12.1,9.8,12,10,12,10.1l0.5,2.8 c0.1,0.5-0.1,1-0.6,1.3c-0.4,0.3-0.9,0.3-1.4,0.1L8.1,13c-0.1,0-0.2,0-0.3,0l-2.4,1.3C5.2,14.4,5,14.5,4.8,14.5z M8,2.5 c-0.1,0-0.2,0-0.3,0.2L6.5,5.3C6.3,5.7,5.9,6,5.5,6L2.8,6.4c-0.2,0-0.2,0.2-0.3,0.2c0,0.1-0.1,0.2,0.1,0.4l2,2 C4.9,9.4,5,9.8,4.9,10.2l-0.5,2.8c0,0.2,0.1,0.3,0.1,0.4c0.1,0,0.2,0.1,0.3,0l2.4-1.3c0.4-0.2,0.9-0.2,1.2,0l2.4,1.3 c0.1,0.1,0.3,0,0.3,0c0,0,0.2-0.1,0.1-0.4l-0.5-2.8c-0.1-0.4,0.1-0.9,0.4-1.2l2-2c0.1-0.2,0.1-0.3,0.1-0.4c0-0.1-0.1-0.2-0.3-0.2 L10.5,6c-0.4-0.1-0.8-0.3-1-0.7L8.3,2.7C8.2,2.5,8.1,2.5,8,2.5z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.8,14.5c-0.3,0-0.5-0.1-0.7-0.2c-0.4-0.3-0.6-0.8-0.6-1.3L4,10.1c0-0.1,0-0.2-0.1-0.3l-2-2C1.5,7.4,1.4,6.8,1.6,6.3 c0.2-0.5,0.6-0.8,1.1-0.9L5.4,5c0.1,0,0.2-0.1,0.2-0.2l1.2-2.6C7,1.8,7.5,1.5,8,1.5s1,0.3,1.2,0.8l0,0l1.2,2.6 c0,0.1,0.1,0.2,0.2,0.2l2.7,0.4c0.5,0.1,0.9,0.4,1.1,0.9c0.2,0.5,0,1-0.3,1.4l-2,2C12.1,9.8,12,10,12,10.1l0.5,2.8 c0.1,0.5-0.1,1-0.6,1.3c-0.4,0.3-0.9,0.3-1.4,0.1L8.1,13c-0.1,0-0.2,0-0.3,0l-2.4,1.3C5.2,14.4,5,14.5,4.8,14.5z M8,2.5 c-0.1,0-0.2,0-0.3,0.2L6.5,5.3C6.3,5.7,5.9,6,5.5,6L2.8,6.4c-0.2,0-0.2,0.2-0.3,0.2c0,0.1-0.1,0.2,0.1,0.4l2,2 C4.9,9.4,5,9.8,4.9,10.2l-0.5,2.8c0,0.2,0.1,0.3,0.1,0.4c0.1,0,0.2,0.1,0.3,0l2.4-1.3c0.4-0.2,0.9-0.2,1.2,0l2.4,1.3 c0.1,0.1,0.3,0,0.3,0c0,0,0.2-0.1,0.1-0.4l-0.5-2.8c-0.1-0.4,0.1-0.9,0.4-1.2l2-2c0.1-0.2,0.1-0.3,0.1-0.4c0-0.1-0.1-0.2-0.3-0.2 L10.5,6c-0.4-0.1-0.8-0.3-1-0.7L8.3,2.7C8.2,2.5,8.1,2.5,8,2.5z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Thread.svelte b/plugins/workbench-resources/src/components/icons/Thread.svelte
index 88ab4a66eb..5a97bd964b 100644
--- a/plugins/workbench-resources/src/components/icons/Thread.svelte
+++ b/plugins/workbench-resources/src/components/icons/Thread.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13.1,2.9C11.8,1.5,9.9,0.7,8,0.7c-1.9,0-3.8,0.8-5.1,2.1C0.7,5,0.1,8.3,1.4,11c0.1,0.3,0.2,0.5,0.2,0.7 c0,0.2-0.1,0.5-0.2,0.8c-0.2,0.6-0.5,1.4,0.1,1.9c0.6,0.6,1.4,0.3,1.9,0.1c0.3-0.1,0.6-0.2,0.8-0.2c0.2,0,0.4,0.1,0.7,0.2 c1,0.4,2,0.7,3,0.7c1.9,0,3.8-0.7,5.2-2.1h0C16,10.3,16,5.7,13.1,2.9z M12.3,12.3c-1.8,1.8-4.5,2.3-6.9,1.2 c-0.4-0.2-0.8-0.3-1.2-0.3c-0.4,0-0.8,0.1-1.2,0.3c-0.2,0.1-0.6,0.2-0.7,0.2c0-0.1,0.1-0.5,0.2-0.7c0.1-0.4,0.3-0.8,0.3-1.2 c0-0.4-0.2-0.8-0.3-1.2C1.4,8.3,1.9,5.5,3.7,3.7C4.9,2.6,6.4,1.9,8,1.9s3.1,0.6,4.3,1.8C14.7,6.1,14.7,9.9,12.3,12.3L12.3,12.3z"/>
-    <path d="M10.6,7.5L10.6,7.5c-0.4,0-0.8,0.3-0.8,0.8S10.2,9,10.6,9s0.8-0.3,0.8-0.8S11,7.5,10.6,7.5z"/>
-    <path d="M8,7.5L8,7.5c-0.4,0-0.8,0.3-0.8,0.8S7.5,9,8,9s0.8-0.3,0.8-0.8S8.4,7.5,8,7.5z"/>
-    <path d="M5.3,7.5L5.3,7.5c-0.4,0-0.8,0.3-0.8,0.8S4.9,9,5.3,9S6,8.7,6,8.3S5.7,7.5,5.3,7.5z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.1,2.9C11.8,1.5,9.9,0.7,8,0.7c-1.9,0-3.8,0.8-5.1,2.1C0.7,5,0.1,8.3,1.4,11c0.1,0.3,0.2,0.5,0.2,0.7 c0,0.2-0.1,0.5-0.2,0.8c-0.2,0.6-0.5,1.4,0.1,1.9c0.6,0.6,1.4,0.3,1.9,0.1c0.3-0.1,0.6-0.2,0.8-0.2c0.2,0,0.4,0.1,0.7,0.2 c1,0.4,2,0.7,3,0.7c1.9,0,3.8-0.7,5.2-2.1h0C16,10.3,16,5.7,13.1,2.9z M12.3,12.3c-1.8,1.8-4.5,2.3-6.9,1.2 c-0.4-0.2-0.8-0.3-1.2-0.3c-0.4,0-0.8,0.1-1.2,0.3c-0.2,0.1-0.6,0.2-0.7,0.2c0-0.1,0.1-0.5,0.2-0.7c0.1-0.4,0.3-0.8,0.3-1.2 c0-0.4-0.2-0.8-0.3-1.2C1.4,8.3,1.9,5.5,3.7,3.7C4.9,2.6,6.4,1.9,8,1.9s3.1,0.6,4.3,1.8C14.7,6.1,14.7,9.9,12.3,12.3L12.3,12.3z"/>
+  <path d="M10.6,7.5L10.6,7.5c-0.4,0-0.8,0.3-0.8,0.8S10.2,9,10.6,9s0.8-0.3,0.8-0.8S11,7.5,10.6,7.5z"/>
+  <path d="M8,7.5L8,7.5c-0.4,0-0.8,0.3-0.8,0.8S7.5,9,8,9s0.8-0.3,0.8-0.8S8.4,7.5,8,7.5z"/>
+  <path d="M5.3,7.5L5.3,7.5c-0.4,0-0.8,0.3-0.8,0.8S4.9,9,5.3,9S6,8.7,6,8.3S5.7,7.5,5.3,7.5z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Up.svelte b/plugins/workbench-resources/src/components/icons/Up.svelte
index 67211b045b..480ed29b9e 100644
--- a/plugins/workbench-resources/src/components/icons/Up.svelte
+++ b/plugins/workbench-resources/src/components/icons/Up.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.8,6.2L4,10h7.7L7.8,6.2z"/>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.8,6.2L4,10h7.7L7.8,6.2z"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/VCard.svelte b/plugins/workbench-resources/src/components/icons/VCard.svelte
index 9ac6d3ebe7..5128c9aa57 100644
--- a/plugins/workbench-resources/src/components/icons/VCard.svelte
+++ b/plugins/workbench-resources/src/components/icons/VCard.svelte
@@ -1,21 +1,18 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <g>
-      <rect width="2.9" height="2.9" />
-      <rect x="6.6" width="2.9" height="2.9" />
-      <rect x="13.1" width="2.9" height="2.9" />
-      <rect y="6.6" width="2.9" height="2.9" />
-      <rect x="6.6" y="6.6" width="2.9" height="2.9" />
-      <rect x="13.1" y="6.6" width="2.9" height="2.9" />
-      <rect y="13.1" width="2.9" height="2.9" />
-      <rect x="6.6" y="13.1" width="2.9" height="2.9" />
-      <rect x="13.1" y="13.1" width="2.9" height="2.9" />
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <rect width="2.9" height="2.9" />
+    <rect x="6.6" width="2.9" height="2.9" />
+    <rect x="13.1" width="2.9" height="2.9" />
+    <rect y="6.6" width="2.9" height="2.9" />
+    <rect x="6.6" y="6.6" width="2.9" height="2.9" />
+    <rect x="13.1" y="6.6" width="2.9" height="2.9" />
+    <rect y="13.1" width="2.9" height="2.9" />
+    <rect x="6.6" y="13.1" width="2.9" height="2.9" />
+    <rect x="13.1" y="13.1" width="2.9" height="2.9" />
+  </g>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/VKanban.svelte b/plugins/workbench-resources/src/components/icons/VKanban.svelte
index 616a810c3a..445e78a8ce 100644
--- a/plugins/workbench-resources/src/components/icons/VKanban.svelte
+++ b/plugins/workbench-resources/src/components/icons/VKanban.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M14,0h-2.8H9.6H6.4H4.8H2C0.9,0,0,0.9,0,2v12c0,1.1,0.9,2,2,2h2.8h1.6h3.2h1.6H14c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M2,14.8c-0.4,0-0.8-0.4-0.8-0.8V2c0-0.4,0.4-0.8,0.8-0.8h2.8v13.6H2z M6.4,14.8V1.2h3.2v13.6H6.4z M14.8,14c0,0.4-0.4,0.8-0.8,0.8 h-2.8V1.2H14c0.4,0,0.8,0.4,0.8,0.8V14z"
-    />
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14,0h-2.8H9.6H6.4H4.8H2C0.9,0,0,0.9,0,2v12c0,1.1,0.9,2,2,2h2.8h1.6h3.2h1.6H14c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M2,14.8c-0.4,0-0.8-0.4-0.8-0.8V2c0-0.4,0.4-0.8,0.8-0.8h2.8v13.6H2z M6.4,14.8V1.2h3.2v13.6H6.4z M14.8,14c0,0.4-0.4,0.8-0.8,0.8 h-2.8V1.2H14c0.4,0,0.8,0.4,0.8,0.8V14z" />
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/VList.svelte b/plugins/workbench-resources/src/components/icons/VList.svelte
index fb234969d5..19a30b7b80 100644
--- a/plugins/workbench-resources/src/components/icons/VList.svelte
+++ b/plugins/workbench-resources/src/components/icons/VList.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-  import { IconSize } from '@anticrm/ui'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <g>
-      <rect width="16" height="1.7" />
-      <rect y="7.2" width="16" height="1.7" />
-      <rect y="14.3" width="16" height="1.7" />
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <rect width="16" height="1.7" />
+    <rect y="7.2" width="16" height="1.7" />
+    <rect y="14.3" width="16" height="1.7" />
+  </g>
+</svg>