From a7699648dd447d1002f178ed0c6d2c1e232c2400 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 4 Jan 2022 12:05:23 +0300
Subject: [PATCH] Remove scale for Icons (#757)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/SpaceSelect.svelte         |  2 +-
 packages/theme/styles/_layouts.scss           |  6 ----
 packages/ui/src/components/ActionIcon.svelte  |  3 --
 packages/ui/src/components/Button.svelte      |  2 +-
 .../ui/src/components/CircleButton.svelte     | 28 ++++++++++++-------
 packages/ui/src/components/EditBox.svelte     | 15 ++--------
 packages/ui/src/components/Icon.svelte        | 10 +++++--
 packages/ui/src/components/Link.svelte        |  8 +-----
 packages/ui/src/components/icons/Add.svelte   |  2 +-
 packages/ui/src/components/icons/Close.svelte |  2 +-
 .../ui/src/components/icons/Expand.svelte     |  4 +--
 packages/ui/src/components/icons/File.svelte  |  2 +-
 .../ui/src/components/icons/Folder.svelte     |  4 +--
 .../ui/src/components/icons/Search.svelte     |  2 +-
 .../src/components/TxView.svelte              | 12 ++++----
 .../src/components/Chats.svelte               |  2 +-
 plugins/recruit-assets/assets/icons.svg       |  2 +-
 .../src/components/EditVacancy.svelte         |  2 --
 .../src/components/ImageButton.svelte         | 13 +--------
 .../src/components/state/StatusesPopup.svelte |  9 ++----
 .../src/components/Chat.svelte                |  2 +-
 .../components/navigator/SpacePanel.svelte    |  2 --
 22 files changed, 49 insertions(+), 85 deletions(-)

diff --git a/packages/presentation/src/components/SpaceSelect.svelte b/packages/presentation/src/components/SpaceSelect.svelte
index 36a2dfaf03..9a1ee5ec3e 100644
--- a/packages/presentation/src/components/SpaceSelect.svelte
+++ b/packages/presentation/src/components/SpaceSelect.svelte
@@ -59,7 +59,7 @@
 >
   <div class="overflow-label label"><Label {label} /></div>
   <div class="flex-row-center space">
-    <span class="scale-75 mr-1"><IconFolder size={'small'} /></span>
+    <span class="mr-1"><IconFolder size={'small'} /></span>
     <span class="overflow-label" class:caption-color={selected} class:content-dark-color={!selected}>
       {#if selected}
         {selected.name}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 7402652663..e5c472f692 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -282,12 +282,6 @@ p:last-child { margin-block-end: 0; }
   height: 0;
 }
 
-.scale-75 {
-  transform-origin: center center;
-  transform: scale(.75);
-  pointer-events: none;
-}
-
 .hover-trans {
   color: var(--theme-content-trans-color);
   cursor: pointer;
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index 10c804729c..0ac1823973 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -43,9 +43,6 @@
     cursor: pointer;
 
     .icon {
-      // transform-origin: center center;
-      // transform: scale(.75);
-      // color: var(--theme-content-trans-color);
       &.invisible { opacity: 0; }
     }
     &:hover .icon {
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index ff3e619401..54955f9421 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -31,7 +31,7 @@
 
 <button class="button {size}" class:transparent class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
   {#if icon && !loading}
-    <div class="scale-75 icon">
+    <div class="icon">
       <Icon {icon} size={'small'}/>
     </div>
   {/if}
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index c7464ad74b..4524458849 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -27,7 +27,7 @@
 
 <div class="flex-center icon-button icon-{size}" class:selected class:transparent class:primary on:click on:mousemove>
   <div class="content">
-    <Icon {icon} size={'small'} />
+    <Icon {icon} size={'full'} />
   </div>
 </div>
 
@@ -38,12 +38,7 @@
     border-radius: 50%;
     cursor: pointer;
 
-    .content {
-      transform-origin: center center;
-      transform: scale(.75);
-      pointer-events: none;
-    }
-
+    .content { pointer-events: none; }
     &.selected { background-color: var(--theme-circle-select); }
     &.transparent { background-color: var(--theme-circle-trans); }
     &.primary {
@@ -57,20 +52,33 @@
   .icon-small {
     width: 1.5rem;
     height: 1.5rem;
-    .content { transform: scale(.6); }
+    .content {
+      width: .625rem;
+      height: .625rem;
+    }
   }
   .icon-medium {
     width: 1.75rem;
     height: 1.75rem;
+    .content {
+      width: .75rem;
+      height: .75rem;
+    }
   }
   .icon-large {
     width: 2rem;
     height: 2rem;
-    .content { transform: scale(.9); }
+    .content {
+      width: .875rem;
+      height: .875rem;
+    }
   }
   .icon-x-large {
     width: 2.25rem;
     height: 2.25rem;
-    .content { transform: none; }
+    .content {
+      width: 1rem;
+      height: 1rem;
+    }
   }
 </style>
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index f7c95a67e2..0c3f2a27ff 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -64,12 +64,8 @@
   {#if label}<div class="label"><Label label={label}/></div>{/if}
   <div class="flex-row-center">
     {#if icon}
-      <div class="icon">
-        {#if typeof (icon) === 'string'}
-          <Icon {icon} size={'small'}/>
-        {:else}
-          <svelte:component this={icon} size={'small'} />
-        {/if}
+      <div class="content-trans-color mr-1">
+        <Icon {icon} size={'small'}/>
       </div>
     {/if}
     <div class="wrap">
@@ -120,13 +116,6 @@
     user-select: none;
   }
 
-  .icon {
-    margin-right: .25rem;
-    transform-origin: center center;
-    transform: scale(.75);
-    color: var(--theme-content-trans-color);
-  }
-
   input {
     margin: 0;
     padding: 0;
diff --git a/packages/ui/src/components/Icon.svelte b/packages/ui/src/components/Icon.svelte
index 58bc4331d8..38942f17a0 100644
--- a/packages/ui/src/components/Icon.svelte
+++ b/packages/ui/src/components/Icon.svelte
@@ -17,7 +17,7 @@
   import { AnySvelteComponent } from '../types';
 
   export let icon: Asset | AnySvelteComponent
-  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
   export let fill = 'currentColor'
   export let filled: boolean = false
 
@@ -43,8 +43,8 @@
 
 <style lang="scss">
   .x-small {
-    width: 0.857em;
-    height: 0.857em;
+    width: .857em;
+    height: .857em;
   }
 
   .small {
@@ -59,4 +59,8 @@
     width: 1.715em;
     height: 1.715em;
   }
+  .full {
+    width: inherit;
+    height: inherit;
+  }
 </style>
diff --git a/packages/ui/src/components/Link.svelte b/packages/ui/src/components/Link.svelte
index f0acdfb718..acf9e2edf2 100644
--- a/packages/ui/src/components/Link.svelte
+++ b/packages/ui/src/components/Link.svelte
@@ -32,11 +32,7 @@
 <span class="container" class:disabled on:click>
   {#if icon}
     <span class="icon">
-      {#if typeof (icon) === 'string'}
-        <Icon {icon} size={'small'}/>
-      {:else}
-        <svelte:component this={icon} size={'small'} />
-      {/if}
+      <Icon {icon} size={'small'}/>
     </span>
   {/if}
   {#if disabled}
@@ -55,8 +51,6 @@
 
     .icon {
       margin-right: .25rem;
-      transform-origin: center center;
-      transform: scale(.75);
       color: var(--theme-content-color);
     }
     &:hover .icon { color: var(--theme-caption-color); }
diff --git a/packages/ui/src/components/icons/Add.svelte b/packages/ui/src/components/icons/Add.svelte
index ddfa5da2a8..32ae32f28a 100644
--- a/packages/ui/src/components/icons/Add.svelte
+++ b/packages/ui/src/components/icons/Add.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M15.4,7.4H8.6V0.6C8.6,0.3,8.3,0,8,0S7.4,0.3,7.4,0.6v6.8H0.6C0.3,7.4,0,7.7,0,8s0.3,0.6,0.6,0.6h6.8v6.8 C7.4,15.7,7.7,16,8,16s0.6-0.3,0.6-0.6V8.6h6.8C15.7,8.6,16,8.3,16,8S15.7,7.4,15.4,7.4z"/>
+  <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/Close.svelte b/packages/ui/src/components/icons/Close.svelte
index 6f214cd1a2..52bf98a62e 100644
--- a/packages/ui/src/components/icons/Close.svelte
+++ b/packages/ui/src/components/icons/Close.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.9,8l6.9-6.9c0.2-0.2,0.2-0.6,0-0.9s-0.6-0.2-0.9,0L8,7.1L1.1,0.2c-0.2-0.2-0.6-0.2-0.9,0s-0.2,0.6,0,0.9L7.1,8l-6.9,6.9 c-0.2,0.2-0.2,0.6,0,0.9C0.3,15.9,0.5,16,0.6,16s0.3-0.1,0.4-0.2L8,8.9l6.9,6.9c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2 c0.2-0.2,0.2-0.6,0-0.9L8.9,8z"/>
+  <path d="M8.7,8l4.6-4.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L3.4,2.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-4.6,4.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.7l4.6,4.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/Expand.svelte b/packages/ui/src/components/icons/Expand.svelte
index c46fe7705d..ae897a1fa7 100644
--- a/packages/ui/src/components/icons/Expand.svelte
+++ b/packages/ui/src/components/icons/Expand.svelte
@@ -4,6 +4,6 @@
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M6.9,14.8H2.1l4.7-4.7C7,9.8,7,9.4,6.8,9.2C6.6,9,6.2,9,5.9,9.2l-4.7,4.7V9.1c0-0.3-0.3-0.6-0.6-0.6 S0,8.7,0,9.1v6.3c0,0,0,0,0,0c0,0.1,0,0.2,0,0.2c0,0.1,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0.1,0.1,0.1 c0.1,0,0.2,0,0.2,0c0,0,0,0,0,0h6.3c0.3,0,0.6-0.3,0.6-0.6C7.6,15,7.3,14.8,6.9,14.8z"/>
-  <path d="M16,0.4c0,0,0-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1,0c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.2,0-0.2,0 c0,0,0,0,0,0H9.1C8.7,0,8.4,0.3,8.4,0.6s0.3,0.6,0.6,0.6h4.8L9.2,5.9C9,6.2,9,6.6,9.2,6.8C9.3,6.9,9.5,7,9.6,7s0.3-0.1,0.4-0.2 l4.7-4.7v4.8c0,0.3,0.3,0.6,0.6,0.6S16,7.3,16,6.9V0.6C16,0.5,16,0.5,16,0.4z"/>
+  <path d="M7.1,13.5H3.2L7,9.7C7.2,9.5,7.2,9.2,7,9S6.5,8.8,6.3,9l-3.8,3.8V8.9c0-0.3-0.2-0.5-0.5-0.5S1.5,8.6,1.5,8.9V14c0,0,0,0,0,0 c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0.1c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0h5.1 c0.3,0,0.5-0.2,0.5-0.5S7.4,13.5,7.1,13.5z"/>
+  <path d="M14.5,1.8C14.4,1.8,14.4,1.8,14.5,1.8c-0.1-0.1-0.1-0.1-0.1-0.2c0,0,0,0,0,0c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.2,0 c0,0,0,0,0,0H8.9C8.6,1.5,8.4,1.7,8.4,2s0.2,0.5,0.5,0.5h3.9L9,6.3C8.8,6.5,8.8,6.8,9,7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 l3.8-3.8v3.9c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V2C14.5,1.9,14.5,1.9,14.5,1.8z"/>
 </svg>
diff --git a/packages/ui/src/components/icons/File.svelte b/packages/ui/src/components/icons/File.svelte
index 561280061c..fb1123198b 100644
--- a/packages/ui/src/components/icons/File.svelte
+++ b/packages/ui/src/components/icons/File.svelte
@@ -20,5 +20,5 @@
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M11.2,0C11.2,0,11.2,0,11.2,0H6C6,0,6,0,6,0s0,0-0.1,0H5.8C5.7,0,5.5,0.1,5.4,0.2L1.3,4.5C1.2,4.6,1.2,4.7,1.2,4.8v7.5 c0,2,1.5,3.6,3.5,3.7h6.5c0,0,0.1,0,0.1,0c2,0,3.6-1.7,3.5-3.7V3.5C14.8,1.6,13.2,0,11.2,0z M5.5,1.4v1.6c0,1-0.7,1.8-1.6,1.8H2.2 L5.5,1.4z M13.9,12.4c0,1.5-1.1,2.7-2.7,2.7H4.7c-1.5-0.1-2.6-1.2-2.6-2.7V5.8h1.8c1.4,0,2.6-1.2,2.6-2.8V1h4.8c0,0,0,0,0,0 c1.4,0,2.6,1.2,2.7,2.6V12.4z"/>
+  <path d="M13.1,5.2c-0.1-0.2-0.2-0.4-0.4-0.6L10.1,2C9.9,1.8,9.7,1.7,9.5,1.6C9.3,1.5,9.1,1.5,8.8,1.5H6c-1.3,0-2.1,0-2.6,0.5 S2.8,3.3,2.8,4.7v6.7c0,1.3,0,2.1,0.5,2.6s1.3,0.5,2.6,0.5h4c1.3,0,2.1,0,2.6-0.5c0.5-0.5,0.5-1.3,0.5-2.6V5.9 C13.2,5.6,13.2,5.4,13.1,5.2z M11.9,5.3c0.1,0.1,0.2,0.2,0.2,0.2H10c-0.3,0-0.7,0-0.8,0c0-0.1,0-0.5,0-0.8V2.5 c0.1,0,0.1,0.1,0.2,0.2L11.9,5.3z M11.9,13.3c-0.2,0.2-0.8,0.2-1.9,0.2H6c-1.2,0-1.7,0-1.9-0.2s-0.2-0.8-0.2-1.9V4.7 c0-1.2,0-1.7,0.2-1.9S4.8,2.5,6,2.5h2.2v2.2c0,0.7,0,1.1,0.3,1.5S9.3,6.5,10,6.5h2.2v4.8C12.2,12.5,12.2,13,11.9,13.3z"/>
 </svg>
diff --git a/packages/ui/src/components/icons/Folder.svelte b/packages/ui/src/components/icons/Folder.svelte
index 0f090fe7c8..b42785ce3d 100644
--- a/packages/ui/src/components/icons/Folder.svelte
+++ b/packages/ui/src/components/icons/Folder.svelte
@@ -4,6 +4,6 @@
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M11.6,2.7H9.4c-0.3,0-0.7-0.1-0.9-0.4L7.8,1.5C7.4,0.9,6.7,0.6,5.9,0.6H4.4C1.5,0.6,0,2.1,0,5.2v5.5 c0,2.9,1.9,4.7,5,4.7H11c3.1,0,5-1.8,5-4.7l0-3.5C16,4.2,14.6,2.7,11.6,2.7z M14.6,10.7C14.6,10.8,14.6,10.8,14.6,10.7 c0,2.2-1.3,3.4-3.7,3.4H5c-2.4,0-3.7-1.2-3.7-3.3V5.2c0-2.4,0.9-3.3,3.1-3.3h1.5c0.3,0,0.7,0.1,0.9,0.4l0.7,0.9C8,3.7,8.7,4,9.4,4 h2.2c2.2,0,3.1,0.9,3.1,3.2L14.6,10.7z"/>
-  <path d="M11.4,9.3H4.3C4,9.3,3.7,9.6,3.7,10c0,0.4,0.3,0.7,0.7,0.7h7.1c0.4,0,0.7-0.3,0.7-0.7 C12.1,9.6,11.8,9.3,11.4,9.3z"/>
+  <path d="M10.7,4.1H9.1C8.8,4.1,8.6,4,8.4,3.8L7.9,3.2C7.5,2.8,7,2.5,6.4,2.5H5.3C3.1,2.5,2,3.7,2,6v4.1c0,2.2,1.4,3.5,3.8,3.5h4.5 c2.3,0,3.8-1.3,3.8-3.5l0-2.6C14,5.2,12.9,4.1,10.7,4.1z M13,10.1C13,10.1,13,10.1,13,10.1c0,1.6-1,2.5-2.8,2.5H5.8 C4,12.7,3,11.8,3,10.1V6c0-1.8,0.7-2.5,2.3-2.5h1.1c0.3,0,0.5,0.1,0.7,0.3l0.5,0.6C8,4.9,8.5,5.1,9.1,5.1h1.6c1.7,0,2.3,0.7,2.3,2.4 L13,10.1z"/>
+  <path d="M10.6,9.1H5.3C5,9.1,4.8,9.3,4.8,9.6s0.2,0.5,0.5,0.5h5.3c0.3,0,0.5-0.2,0.5-0.5S10.8,9.1,10.6,9.1z"/>
 </svg>
diff --git a/packages/ui/src/components/icons/Search.svelte b/packages/ui/src/components/icons/Search.svelte
index d7481673f5..79780f9cd6 100644
--- a/packages/ui/src/components/icons/Search.svelte
+++ b/packages/ui/src/components/icons/Search.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index 2c4c0ba979..f1b1220590 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -189,13 +189,11 @@
   <div class="flex-between msgactivity-container">
 
     <div class="flex-center icon">
-      <div class="scale-75">
-        {#if viewlet}
-          <Icon icon={viewlet.icon} size="medium" />
-        {:else}
-          <Icon icon={activity.icon.Activity} size="medium" />
-        {/if}
-      </div>
+      {#if viewlet}
+        <Icon icon={viewlet.icon} size="small" />
+      {:else}
+        <Icon icon={activity.icon.Activity} size="small" />
+      {/if}
     </div>
 
     <div class="flex-grow flex-col">
diff --git a/plugins/gmail-resources/src/components/Chats.svelte b/plugins/gmail-resources/src/components/Chats.svelte
index 381ac9efb8..bf39ee0c12 100644
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@@ -121,7 +121,7 @@
       </div>
     </div>
   {:else if enabled}
-    <div class="flex-center icon"><div class="scale-75"><Icon icon={contact.icon.Email} size="small" /></div></div>
+    <div class="flex-center icon"><Icon icon={contact.icon.Email} size="small" /></div>
     <div class="flex-grow flex-col">
       <div class="fs-title">Gmail</div>
       <div class="small-text content-dark-color"><Label label={gmail.string.YouAnd} /> {formatName(object.name)}</div>
diff --git a/plugins/recruit-assets/assets/icons.svg b/plugins/recruit-assets/assets/icons.svg
index dd8377436c..d40bf37da1 100644
--- a/plugins/recruit-assets/assets/icons.svg
+++ b/plugins/recruit-assets/assets/icons.svg
@@ -32,6 +32,6 @@
     <path d="M5.5,8.3h2.7c0.3,0,0.6-0.3,0.6-0.6S8.5,7.2,8.2,7.2H5.5c-0.3,0-0.6,0.3-0.6,0.6S5.1,8.3,5.5,8.3z"/>
   </symbol>
   <symbol id="application" viewBox="0 0 16 16">
-    <path d="M11.2,0C11.2,0,11.2,0,11.2,0H6C6,0,6,0,6,0s0,0-0.1,0H5.8C5.7,0,5.5,0.1,5.4,0.2L1.3,4.5C1.2,4.6,1.2,4.7,1.2,4.8v7.5 c0,2,1.5,3.6,3.5,3.7h6.5c0,0,0.1,0,0.1,0c2,0,3.6-1.7,3.5-3.7V3.5C14.8,1.6,13.2,0,11.2,0z M5.5,1.4v1.6c0,1-0.7,1.8-1.6,1.8H2.2 L5.5,1.4z M13.9,12.4c0,1.5-1.1,2.7-2.7,2.7H4.7c-1.5-0.1-2.6-1.2-2.6-2.7V5.8h1.8c1.4,0,2.6-1.2,2.6-2.8V1h4.8c0,0,0,0,0,0 c1.4,0,2.6,1.2,2.7,2.6V12.4z"/>
+    <path d="M13.1,5.2c-0.1-0.2-0.2-0.4-0.4-0.6L10.1,2C9.9,1.8,9.7,1.7,9.5,1.6C9.3,1.5,9.1,1.5,8.8,1.5H6c-1.3,0-2.1,0-2.6,0.5 S2.8,3.3,2.8,4.7v6.7c0,1.3,0,2.1,0.5,2.6s1.3,0.5,2.6,0.5h4c1.3,0,2.1,0,2.6-0.5c0.5-0.5,0.5-1.3,0.5-2.6V5.9 C13.2,5.6,13.2,5.4,13.1,5.2z M11.9,5.3c0.1,0.1,0.2,0.2,0.2,0.2H10c-0.3,0-0.7,0-0.8,0c0-0.1,0-0.5,0-0.8V2.5 c0.1,0,0.1,0.1,0.2,0.2L11.9,5.3z M11.9,13.3c-0.2,0.2-0.8,0.2-1.9,0.2H6c-1.2,0-1.7,0-1.9-0.2s-0.2-0.8-0.2-1.9V4.7 c0-1.2,0-1.7,0.2-1.9S4.8,2.5,6,2.5h2.2v2.2c0,0.7,0,1.1,0.3,1.5S9.3,6.5,10,6.5h2.2v4.8C12.2,12.5,12.2,13,11.9,13.3z"/>
   </symbol>
 </svg>
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte
index 77c10d6cb6..0f9056b5fa 100644
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@@ -126,8 +126,6 @@
 
       .tool {
         margin-left: .75rem;
-        transform-origin: center center;
-        transform: scale(.75);
         color: var(--theme-content-accent-color);
         cursor: pointer;
         &:hover { color: var(--theme-caption-color); }
diff --git a/plugins/recruit-resources/src/components/ImageButton.svelte b/plugins/recruit-resources/src/components/ImageButton.svelte
index a802af21cf..200f89e27e 100644
--- a/plugins/recruit-resources/src/components/ImageButton.svelte
+++ b/plugins/recruit-resources/src/components/ImageButton.svelte
@@ -24,13 +24,7 @@
 </script>
 
 <div class="flex-row-center container">
-  <div class="icon">
-    {#if typeof (icon) === 'string'}
-      <Icon {icon} size='small'/>
-    {:else}
-      <svelte:component this={icon} size='small' />
-    {/if}
-  </div>
+  <Icon {icon} size='small'/>
   <span><Label {label} /></span>
 </div>
 
@@ -44,11 +38,6 @@
     backdrop-filter: blur(3px);
     cursor: pointer;
 
-    .icon {
-      transform-origin: center center;
-      transform: scale(.75);
-    }
-
     span {
       margin-left: 0.376rem;
       font-weight: 500;
diff --git a/plugins/task-resources/src/components/state/StatusesPopup.svelte b/plugins/task-resources/src/components/state/StatusesPopup.svelte
index d10213a9f0..718082e6aa 100644
--- a/plugins/task-resources/src/components/state/StatusesPopup.svelte
+++ b/plugins/task-resources/src/components/state/StatusesPopup.svelte
@@ -25,8 +25,8 @@
 
 <div class="flex-col popup">
   <div class="flex-row-center red-color menu-item" on:click={() => { dispatch('close'); onDelete() }}>
-    <div class="icon">
-      <Delete size={'medium'} />
+    <div class="mr-3">
+      <Delete size={'small'} />
     </div>
     <div class="flex-grow"><Label label={task.string.Delete} /></div>
   </div>
@@ -49,11 +49,6 @@
     border-radius: .5rem;
     cursor: pointer;
 
-    .icon {
-      margin-right: .75rem;
-      transform-origin: center center;
-      transform: scale(.75);
-    }
     &:hover { background-color: var(--theme-button-bg-hovered); }
   }
 </style>
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index 28c0e19f63..9f15e3d570 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -156,7 +156,7 @@
 </script>
 
 <div class="flex-between header">
-  <div class="flex-center icon"><div class="scale-75"><TelegramIcon size={'small'} /></div></div>
+  <div class="flex-center icon"><TelegramIcon size={'small'} /></div>
   <div class="flex-grow flex-col">
     <div class="fs-title">Telegram</div>
     <div class="small-text content-dark-color">You and {formatName(object.name)}</div>
diff --git a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
index eb270c1e38..efa2fa8de6 100644
--- a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
@@ -110,8 +110,6 @@
 
       .tool {
         margin-left: .75rem;
-        transform-origin: center center;
-        transform: scale(.75);
         color: var(--theme-content-accent-color);
         cursor: pointer;
         &:hover { color: var(--theme-caption-color); }