diff --git a/src/components/Control/Control.scss b/src/components/Control/Control.scss
index d8c7b7cf2..1f24517ba 100644
--- a/src/components/Control/Control.scss
+++ b/src/components/Control/Control.scss
@@ -24,28 +24,6 @@ $block: '.#{$ns}control';
     @include islands-focus();
     @include focusable();
 
-    &_size {
-        &_xs {
-            width: 24px;
-            height: 24px;
-        }
-
-        &_s {
-            width: 28px;
-            height: 28px;
-        }
-
-        &_m {
-            width: 32px;
-            height: 32px;
-        }
-
-        &_l {
-            width: 36px;
-            height: 36px;
-        }
-    }
-
     &_theme {
         &_primary {
             color: var(--g-color-text-complementary);
diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx
index 526b59c04..ec0744613 100644
--- a/src/components/Control/Control.tsx
+++ b/src/components/Control/Control.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Icon} from '@gravity-ui/uikit';
+import {Button, ButtonSize, Icon} from '@gravity-ui/uikit';
 import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
 
 import {block} from '../../utils';
@@ -16,7 +16,7 @@ export const defaultIconId = 'icon-test-id';
 export interface ControlProps {
     icon: SVGIconData;
     theme?: 'primary' | 'secondary' | 'link' | 'accent';
-    size?: 'xs' | 's' | 'm' | 'l';
+    size?: ButtonSize;
     iconSize?: number;
     disabled?: boolean;
     className?: string;
@@ -37,16 +37,20 @@ const Control = (props: ControlProps) => {
     } = props;
 
     return (
-        <button
-            type="button"
+        <Button
+            type={'button'}
             aria-label={i18n('aria-label')}
-            className={b({size, theme, disabled}, className)}
+            className={b({theme, disabled}, className)}
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
-            data-qa={qa}
+            qa={qa}
+            size={size}
+            view={'flat'}
         >
-            <Icon data={icon} size={iconSize} qa={defaultIconId} />
-        </button>
+            <Button.Icon>
+                <Icon data={icon} size={iconSize} qa={defaultIconId} />
+            </Button.Icon>
+        </Button>
     );
 };
 
diff --git a/src/components/Control/__tests__/Control.test.tsx b/src/components/Control/__tests__/Control.test.tsx
index c646d98b7..b0791cbdc 100644
--- a/src/components/Control/__tests__/Control.test.tsx
+++ b/src/components/Control/__tests__/Control.test.tsx
@@ -57,7 +57,7 @@ describe('Control', () => {
         render(<Control icon={icon} qa={qaId} size={size} />);
         const control = screen.getByTestId(qaId);
 
-        expect(control).toHaveClass(`pc-control_size_${size}`);
+        expect(control).toHaveClass(`g-button_size_${size}`);
     });
 
     test('add iconSize', () => {