diff --git a/packages/kbn-react-field/src/field_button/field_button.scss b/packages/kbn-react-field/src/field_button/field_button.scss
index 5fd87c38b930e..e392f56554129 100644
--- a/packages/kbn-react-field/src/field_button/field_button.scss
+++ b/packages/kbn-react-field/src/field_button/field_button.scss
@@ -49,6 +49,7 @@
 
 .kbnFieldButton__dragHandle {
   margin-right: $euiSizeS;
+  height: $euiSizeXL;
 }
 
 .kbnFieldButton__fieldAction,
@@ -72,6 +73,10 @@
   .kbnFieldButton__dragHandle {
     line-height: $euiSizeL;
   }
+
+  .kbnFieldButton__dragHandle {
+    height: $euiSizeL;
+  }
 }
 
 .kbnFieldButton--flushBoth {
diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap b/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap
index bac19af40c310..b9d75695fc564 100644
--- a/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap
+++ b/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap
@@ -236,11 +236,7 @@ exports[`UnifiedFieldList <FieldItemButton /> renders properly with a drag handl
   }
   className="unifiedFieldListItemButton unifiedFieldListItemButton--number unifiedFieldListItemButton--exists unifiedFieldListItemButton--withDragHandle custom"
   dataTestSubj="test-subj"
-  dragHandle={
-    <span>
-      dragHandle
-    </span>
-  }
+  dragHandle={<FieldItemDragHandle />}
   fieldIcon={
     <WrappedFieldIcon
       scripted={false}
diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss
index 70073c37ea31c..effff6330dc22 100644
--- a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss
+++ b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss
@@ -70,3 +70,27 @@
   background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
   color: $euiColorDarkShade;
 }
+
+// A drag handle will appear only on item hover/focus
+.unifiedFieldListItemButton--withDragHandle {
+  .kbnFieldButton__dragHandle {
+    margin-right: 0;
+    flex-shrink: 0;
+    width: 0;
+    overflow: hidden;
+    transition: $euiAnimSpeedNormal ease-in-out;
+    transition-property: width;
+  }
+
+  &:hover,
+  &[class*='-isActive'],
+  .domDragDrop__keyboardHandler:focus + & {
+    .kbnFieldButton__dragHandle {
+      width: $euiSize + $euiSizeS; // icon width plus right margin
+    }
+  }
+
+  &:hover {
+    transform: none;
+  }
+}
diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.test.tsx b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.test.tsx
index 9451228a461ac..2ef1e01237ded 100644
--- a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.test.tsx
+++ b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.test.tsx
@@ -121,7 +121,7 @@ describe('UnifiedFieldList <FieldItemButton />', () => {
         size="xs"
         className="custom"
         dataTestSubj="test-subj"
-        dragHandle={<span>dragHandle</span>}
+        withDragHandle
         field={bytesField}
         fieldSearchHighlight={undefined}
         isEmpty={false}
diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx
index 45ae7c7111c51..edf337aa9132a 100644
--- a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx
+++ b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx
@@ -14,8 +14,11 @@ import { EuiButtonIcon, EuiButtonIconProps, EuiHighlight, EuiIcon, EuiToolTip }
 import type { DataViewField } from '@kbn/data-views-plugin/common';
 import { FieldIcon, getFieldIconProps, getFieldSearchMatchingHighlight } from '@kbn/field-utils';
 import { type FieldListItem, type GetCustomFieldType } from '../../types';
+import { FieldItemDragHandle } from '../field_item_drag_handle';
 import './field_item_button.scss';
 
+const DRAG_HANDLE = <FieldItemDragHandle />;
+
 /**
  * Props of FieldItemButton component
  */
@@ -28,7 +31,7 @@ export interface FieldItemButtonProps<T extends FieldListItem> {
   infoIcon?: FieldButtonProps['fieldInfoIcon'];
   className?: FieldButtonProps['className'];
   flush?: FieldButtonProps['flush'];
-  dragHandle?: FieldButtonProps['dragHandle'];
+  withDragHandle?: boolean;
   getCustomFieldType?: GetCustomFieldType<T>;
   dataTestSubj?: string;
   size?: FieldButtonProps['size'];
@@ -53,6 +56,7 @@ export interface FieldItemButtonProps<T extends FieldListItem> {
  * @param dataTestSubj
  * @param size
  * @param onClick
+ * @param withDragHandle
  * @param shouldAlwaysShowAction
  * @param buttonAddFieldToWorkspaceProps
  * @param buttonRemoveFieldFromWorkspaceProps
@@ -74,6 +78,7 @@ export function FieldItemButton<T extends FieldListItem = DataViewField>({
   dataTestSubj,
   size,
   onClick,
+  withDragHandle,
   shouldAlwaysShowAction,
   buttonAddFieldToWorkspaceProps,
   buttonRemoveFieldFromWorkspaceProps,
@@ -104,7 +109,7 @@ export function FieldItemButton<T extends FieldListItem = DataViewField>({
       [`unifiedFieldListItemButton--${type}`]: type,
       [`unifiedFieldListItemButton--exists`]: !isEmpty,
       [`unifiedFieldListItemButton--missing`]: isEmpty,
-      [`unifiedFieldListItemButton--withDragHandle`]: Boolean(otherProps.dragHandle),
+      [`unifiedFieldListItemButton--withDragHandle`]: withDragHandle,
     },
     className
   );
@@ -209,6 +214,7 @@ export function FieldItemButton<T extends FieldListItem = DataViewField>({
       fieldAction={fieldAction}
       fieldInfoIcon={conflictInfoIcon || infoIcon}
       onClick={onClick}
+      {...(withDragHandle ? { dragHandle: DRAG_HANDLE } : {})}
       {...otherProps}
     />
   );
diff --git a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx
new file mode 100644
index 0000000000000..29ee850467ffb
--- /dev/null
+++ b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiIcon, useEuiTheme, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const FieldItemDragHandle: React.FC = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup
+      className="unifiedFieldListItemDragHandle"
+      css={css`
+        pointer-events: none;
+        margin-right: ${euiTheme.size.s};
+        width: ${euiTheme.size.base};
+        height: 100%;
+        overflow: hidden;
+      `}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <EuiFlexItem
+        grow={false}
+        css={css`
+          flex-shrink: 0;
+        `}
+      >
+        <EuiIcon type="grabOmnidirectional" size="m" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx
new file mode 100644
index 0000000000000..7e97397033765
--- /dev/null
+++ b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { FieldItemDragHandle } from './field_item_drag_handle';
diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx
index 745d463b28386..0d3a41aac78e4 100644
--- a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx
+++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx
@@ -346,6 +346,7 @@ function UnifiedFieldListItemComponent({
           }-${field.name}`}
         >
           <FieldItemButton
+            withDragHandle
             fieldSearchHighlight={highlight}
             isEmpty={isEmpty}
             isActive={infoIsOpen}
diff --git a/x-pack/plugins/lens/public/datasources/common/field_item.tsx b/x-pack/plugins/lens/public/datasources/common/field_item.tsx
index 483e0c8005f6f..071c0350a4dd8 100644
--- a/x-pack/plugins/lens/public/datasources/common/field_item.tsx
+++ b/x-pack/plugins/lens/public/datasources/common/field_item.tsx
@@ -183,6 +183,7 @@ export function InnerFieldItem(props: FieldItemProps) {
   });
 
   const commonFieldItemButtonProps = {
+    withDragHandle: true,
     isSelected: false, // multiple selections are allowed
     isEmpty: !exists,
     isActive: infoIsOpen,