diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
index 4324efbbb556..dbb13d24fe68 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
@@ -7,7 +7,9 @@ import { Row, Col } from 'antd/lib/grid';
 import Icon from 'antd/lib/icon';
 import Tooltip from 'antd/lib/tooltip';
 
-import { ObjectOutsideIcon, FirstIcon, LastIcon, PreviousIcon, NextIcon } from 'icons';
+import {
+    ObjectOutsideIcon, FirstIcon, LastIcon, PreviousIcon, NextIcon,
+} from 'icons';
 import { ObjectType, ShapeType } from 'reducers/interfaces';
 
 interface Props {
@@ -93,6 +95,37 @@ function ItemButtonsComponent(props: Props): JSX.Element {
     const hiddenStyle = hiddenDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
     const keyframeStyle = keyframeDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
 
+    const classes = {
+        firstKeyFrame: { className: 'cvat-object-item-button-first-keyframe' },
+        prevKeyFrame: { className: 'cvat-object-item-button-prev-keyframe' },
+        nextKeyFrame: { className: 'cvat-object-item-button-next-keyframe' },
+        lastKeyFrame: { className: 'cvat-object-item-button-last-keyframe' },
+        outside: {
+            enabled: { className: 'cvat-object-item-button-outside cvat-object-item-button-outside-enabled' },
+            disabled: { className: 'cvat-object-item-button-outside' },
+        },
+        lock: {
+            enabled: { className: 'cvat-object-item-button-lock cvat-object-item-button-lock-enabled' },
+            disabled: { className: 'cvat-object-item-button-lock' },
+        },
+        occluded: {
+            enabled: { className: 'cvat-object-item-button-occluded cvat-object-item-button-occluded-enabled' },
+            disabled: { className: 'cvat-object-item-button-occluded' },
+        },
+        pinned: {
+            enabled: { className: 'cvat-object-item-button-pinned cvat-object-item-button-pinned-enabled' },
+            disabled: { className: 'cvat-object-item-button-pinned' },
+        },
+        hidden: {
+            enabled: { className: 'cvat-object-item-button-hidden cvat-object-item-button-hidden-enabled' },
+            disabled: { className: 'cvat-object-item-button-hidden' },
+        },
+        keyframe: {
+            enabled: { className: 'cvat-object-item-button-keyframe cvat-object-item-button-keyframe-enabled' },
+            disabled: { className: 'cvat-object-item-button-keyframe' },
+        },
+    };
+
     if (objectType === ObjectType.TRACK) {
         return (
             <Row type='flex' align='middle' justify='space-around'>
@@ -100,34 +133,62 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                     <Row type='flex' justify='space-around'>
                         <Col>
                             {navigateFirstKeyframe ? (
-                                <Icon component={FirstIcon} onClick={navigateFirstKeyframe} />
+                                <Icon
+                                    {...classes.firstKeyFrame}
+                                    component={FirstIcon}
+                                    onClick={navigateFirstKeyframe}
+                                />
                             ) : (
-                                <Icon component={FirstIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
+                                <Icon
+                                    {...classes.firstKeyFrame}
+                                    component={FirstIcon}
+                                    style={{ opacity: 0.5, pointerEvents: 'none' }}
+                                />
                             )}
                         </Col>
                         <Col>
                             {navigatePrevKeyframe ? (
                                 <Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`} mouseLeaveDelay={0}>
-                                    <Icon component={PreviousIcon} onClick={navigatePrevKeyframe} />
+                                    <Icon
+                                        {...classes.prevKeyFrame}
+                                        component={PreviousIcon}
+                                        onClick={navigatePrevKeyframe}
+                                    />
                                 </Tooltip>
                             ) : (
-                                <Icon component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
+                                <Icon
+                                    {...classes.prevKeyFrame}
+                                    component={PreviousIcon}
+                                    style={{ opacity: 0.5, pointerEvents: 'none' }}
+                                />
                             )}
                         </Col>
                         <Col>
                             {navigateNextKeyframe ? (
                                 <Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`} mouseLeaveDelay={0}>
-                                    <Icon component={NextIcon} onClick={navigateNextKeyframe} />
+                                    <Icon
+                                        {...classes.nextKeyFrame}
+                                        component={NextIcon}
+                                        onClick={navigateNextKeyframe}
+                                    />
                                 </Tooltip>
                             ) : (
-                                <Icon component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
+                                <Icon
+                                    {...classes.nextKeyFrame}
+                                    component={NextIcon}
+                                    style={{ opacity: 0.5, pointerEvents: 'none' }}
+                                />
                             )}
                         </Col>
                         <Col>
                             {navigateLastKeyframe ? (
-                                <Icon component={LastIcon} onClick={navigateLastKeyframe} />
+                                <Icon {...classes.lastKeyFrame} component={LastIcon} onClick={navigateLastKeyframe} />
                             ) : (
-                                <Icon component={LastIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
+                                <Icon
+                                    {...classes.lastKeyFrame}
+                                    component={LastIcon}
+                                    style={{ opacity: 0.5, pointerEvents: 'none' }}
+                                />
                             )}
                         </Col>
                     </Row>
@@ -135,45 +196,72 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                         <Col>
                             <Tooltip title={`Switch outside property ${switchOutsideShortcut}`} mouseLeaveDelay={0}>
                                 {outside ? (
-                                    <Icon component={ObjectOutsideIcon} onClick={unsetOutside} style={outsideStyle} />
+                                    <Icon
+                                        {...classes.outside.enabled}
+                                        component={ObjectOutsideIcon}
+                                        onClick={unsetOutside}
+                                        style={outsideStyle}
+                                    />
                                 ) : (
-                                    <Icon type='select' onClick={setOutside} style={outsideStyle} />
+                                    <Icon
+                                        type='select'
+                                        {...classes.outside.disabled}
+                                        onClick={setOutside}
+                                        style={outsideStyle}
+                                    />
                                 )}
                             </Tooltip>
                         </Col>
                         <Col>
                             <Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
                                 {locked ? (
-                                    <Icon type='lock' theme='filled' onClick={unlock} />
+                                    <Icon {...classes.lock.enabled} type='lock' theme='filled' onClick={unlock} />
                                 ) : (
-                                    <Icon type='unlock' onClick={lock} />
+                                    <Icon {...classes.lock.disabled} type='unlock' onClick={lock} />
                                 )}
                             </Tooltip>
                         </Col>
                         <Col>
                             <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}>
                                 {occluded ? (
-                                    <Icon type='team' onClick={unsetOccluded} />
+                                    <Icon {...classes.occluded.enabled} type='team' onClick={unsetOccluded} />
                                 ) : (
-                                    <Icon type='user' onClick={setOccluded} />
+                                    <Icon {...classes.occluded.disabled} type='user' onClick={setOccluded} />
                                 )}
                             </Tooltip>
                         </Col>
                         <Col>
                             <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}>
                                 {hidden ? (
-                                    <Icon type='eye-invisible' theme='filled' onClick={show} style={hiddenStyle} />
+                                    <Icon
+                                        {...classes.hidden.enabled}
+                                        type='eye-invisible'
+                                        theme='filled'
+                                        onClick={show}
+                                        style={hiddenStyle}
+                                    />
                                 ) : (
-                                    <Icon type='eye' onClick={hide} style={hiddenStyle} />
+                                    <Icon {...classes.hidden.disabled} type='eye' onClick={hide} style={hiddenStyle} />
                                 )}
                             </Tooltip>
                         </Col>
                         <Col>
                             <Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`} mouseLeaveDelay={0}>
                                 {keyframe ? (
-                                    <Icon type='star' theme='filled' onClick={unsetKeyframe} style={keyframeStyle} />
+                                    <Icon
+                                        {...classes.keyframe.enabled}
+                                        type='star'
+                                        theme='filled'
+                                        onClick={unsetKeyframe}
+                                        style={keyframeStyle}
+                                    />
                                 ) : (
-                                    <Icon type='star' onClick={setKeyframe} style={keyframeStyle} />
+                                    <Icon
+                                        {...classes.keyframe.disabled}
+                                        type='star'
+                                        onClick={setKeyframe}
+                                        style={keyframeStyle}
+                                    />
                                 )}
                             </Tooltip>
                         </Col>
@@ -181,9 +269,14 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                             <Col>
                                 <Tooltip title='Switch pinned property' mouseLeaveDelay={0}>
                                     {pinned ? (
-                                        <Icon type='pushpin' theme='filled' onClick={unpin} />
+                                        <Icon
+                                            {...classes.pinned.enabled}
+                                            type='pushpin'
+                                            theme='filled'
+                                            onClick={unpin}
+                                        />
                                     ) : (
-                                        <Icon type='pushpin' onClick={pin} />
+                                        <Icon {...classes.pinned.disabled} type='pushpin' onClick={pin} />
                                     )}
                                 </Tooltip>
                             </Col>
@@ -202,9 +295,9 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                         <Col>
                             <Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
                                 {locked ? (
-                                    <Icon type='lock' onClick={unlock} theme='filled' />
+                                    <Icon {...classes.lock.enabled} type='lock' onClick={unlock} theme='filled' />
                                 ) : (
-                                    <Icon type='unlock' onClick={lock} />
+                                    <Icon {...classes.lock.disabled} type='unlock' onClick={lock} />
                                 )}
                             </Tooltip>
                         </Col>
@@ -221,33 +314,37 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                     <Col>
                         <Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
                             {locked ? (
-                                <Icon type='lock' onClick={unlock} theme='filled' />
+                                <Icon {...classes.lock.enabled} type='lock' onClick={unlock} theme='filled' />
                             ) : (
-                                <Icon type='unlock' onClick={lock} />
+                                <Icon {...classes.lock.disabled} type='unlock' onClick={lock} />
                             )}
                         </Tooltip>
                     </Col>
                     <Col>
                         <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}>
                             {occluded ? (
-                                <Icon type='team' onClick={unsetOccluded} />
+                                <Icon {...classes.occluded.enabled} type='team' onClick={unsetOccluded} />
                             ) : (
-                                <Icon type='user' onClick={setOccluded} />
+                                <Icon {...classes.occluded.disabled} type='user' onClick={setOccluded} />
                             )}
                         </Tooltip>
                     </Col>
                     <Col>
                         <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}>
-                            {hidden ? <Icon type='eye-invisible' onClick={show} /> : <Icon type='eye' onClick={hide} />}
+                            {hidden ? (
+                                <Icon {...classes.hidden.enabled} type='eye-invisible' onClick={show} />
+                            ) : (
+                                <Icon {...classes.hidden.disabled} type='eye' onClick={hide} />
+                            )}
                         </Tooltip>
                     </Col>
                     {shapeType !== ShapeType.POINTS && (
                         <Col>
                             <Tooltip title='Switch pinned property' mouseLeaveDelay={0}>
                                 {pinned ? (
-                                    <Icon type='pushpin' theme='filled' onClick={unpin} />
+                                    <Icon {...classes.pinned.enabled} type='pushpin' theme='filled' onClick={unpin} />
                                 ) : (
-                                    <Icon type='pushpin' onClick={pin} />
+                                    <Icon {...classes.pinned.disabled} type='pushpin' onClick={pin} />
                                 )}
                             </Tooltip>
                         </Col>