diff --git a/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx b/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx
index 79999dfd2c403..4eaaea9bc9e27 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx
@@ -20,11 +20,12 @@ import React from 'react';
 import { Flex, H2, Indicator, Box, ButtonIcon } from 'design';
 import { HoverTooltip } from 'design/Tooltip';
 
+import { Cross, Trash } from 'design/Icon';
+
 import useTeleport from 'teleport/useTeleport';
 import { Role } from 'teleport/services/resources';
 
 import { EditorTab, EditorTabs } from './EditorTabs';
-import { Cross, Trash } from 'design/Icon';
 
 /** Renders a header button with role name and delete button. */
 export const EditorHeader = ({
diff --git a/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
index 73534199250b4..4b32c3e04b7c4 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
@@ -28,6 +28,10 @@ import { H3, P, P3 } from 'design/Text/Text';
 import { ButtonSecondary } from 'design/Button';
 import Image from 'design/Image';
 
+import { StepComponentProps, StepSlider } from 'design/StepSlider';
+
+import { ChevronLeft, ChevronRight } from 'design/Icon';
+
 import { State as ResourcesState } from 'teleport/components/useResources';
 import { Role, RoleWithYaml } from 'teleport/services/resources';
 import { yamlService } from 'teleport/services/yaml';
@@ -36,8 +40,6 @@ import { ButtonLockedFeature } from 'teleport/components/ButtonLockedFeature';
 
 import { RoleEditor } from './RoleEditor';
 import tagpromo from './tagpromo.png';
-import { StepComponentProps, StepSlider } from 'design/StepSlider';
-import { ChevronLeft, ChevronRight } from 'design/Icon';
 
 /**
  * This component is responsible for converting from the `Resource`