From 38c1105af24e41705823b9c09d0e860fe4e646f8 Mon Sep 17 00:00:00 2001
From: Andrew Sikowitz <andrew.sikowitz@acryl.io>
Date: Wed, 26 Feb 2025 15:21:06 -0800
Subject: [PATCH 1/2] refactor(ui/v2): Update icons and search bars on schema
 tab, glossary search, domain search

---
 .../components/Button/Button.stories.tsx      |  49 +++---
 .../components/Button/Button.tsx              |   6 +-
 .../components/Button/types.ts                |  16 +-
 .../components/Button/utils.ts                |  42 ++---
 .../components/ButtonIcon/IconButton.tsx      |  22 +++
 .../components/Drawer/Drawer.tsx              |   4 +-
 .../GraphCard/GraphCard.stories.tsx           |   2 +-
 .../components/Icon/constants.ts              |   4 +-
 .../components/Input/Input.stories.tsx        |   5 +
 .../components/Input/Input.tsx                |   2 +-
 .../components/Input/types.ts                 |   2 +-
 .../components/SearchBar/SearchBar.tsx        |  11 +-
 .../components/SearchBar/types.ts             |   1 +
 .../components/Select/AutoCompleteSelect.tsx  |   8 +-
 .../components/Select/BasicSelect.tsx         |   6 +-
 .../components/Select/Nested/NestedSelect.tsx |   2 +-
 .../components/Select/SimpleSelect.tsx        |   6 +-
 .../src/app/domainV2/DomainSearch.tsx         |  49 +++---
 .../nestedDomains/ManageDomainsPageV2.tsx     |   2 +-
 .../schema/components/SchemaHeader.tsx        |   4 +-
 .../Dataset/Queries/QueriesTabToolbar.tsx     |   5 +-
 .../Dataset/Relationship/RelationshipsTab.tsx |   5 +-
 .../tabs/Properties/AddPropertyButton.tsx     |   2 +-
 .../shared/tabs/Properties/TabHeader.tsx      |   4 +-
 .../schema/components/SchemaHeader.tsx        |  64 +++-----
 .../schema/components/SchemaSearchInput.tsx   | 145 ++++--------------
 .../components/search/InlineListSearch.tsx    |   4 +-
 .../shared/components/styled/TabToolbar.tsx   |   2 +-
 .../shared/tabs/Dataset/Schema/SchemaTab.tsx  |   4 +-
 .../shared/tabs/Lineage/CompactLineageTab.tsx |   6 +-
 .../shared/tabs/Properties/TabHeader.tsx      |   4 +-
 .../shared/versioning/VersionsDrawer.tsx      |   2 +-
 .../glossaryV2/GlossaryContentProvider.tsx    |   2 +-
 .../src/app/glossaryV2/GlossarySearch.tsx     |  36 ++---
 .../StructuredProperties.tsx                  |   9 +-
 .../src/app/lineage/NodeColumnsHeader.tsx     |   5 +-
 .../app/lineageV2/controls/SearchControl.tsx  |  21 ++-
 .../src/app/search/ViewAllSearchItem.tsx      |   4 +-
 .../search/autoComplete/RecommendedOption.tsx |   4 +-
 .../src/app/searchV2/ViewAllSearchItem.tsx    |   4 +-
 .../autoComplete/RecommendedOption.tsx        |   4 +-
 41 files changed, 255 insertions(+), 324 deletions(-)
 create mode 100644 datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx

diff --git a/datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx b/datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx
index 22cd810c246bf..124508de36b03 100644
--- a/datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx
@@ -1,3 +1,6 @@
+import { ButtonVariantValues } from '@components/components/Button/types';
+import { MATERIAL_UI_ICONS, PHOSPHOR_ICONS } from '@components/components/Icon/constants';
+import { SizeValues } from '@components/theme/config';
 import React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -33,7 +36,7 @@ const meta = {
         },
         variant: {
             description: 'The variant of the Button.',
-            options: ['filled', 'outline', 'text'],
+            options: Object.values(ButtonVariantValues),
             table: {
                 defaultValue: { summary: buttonDefaults.variant },
             },
@@ -43,7 +46,7 @@ const meta = {
         },
         color: {
             description: 'The color of the Button.',
-            options: ['violet', 'green', 'red', 'blue', 'gray'],
+            options: ['violet', 'green', 'red', 'gray'],
             table: {
                 defaultValue: { summary: buttonDefaults.color },
             },
@@ -53,7 +56,7 @@ const meta = {
         },
         size: {
             description: 'The size of the Button.',
-            options: ['sm', 'md', 'lg', 'xl'],
+            options: Object.values(SizeValues),
             table: {
                 defaultValue: { summary: buttonDefaults.size },
             },
@@ -61,23 +64,14 @@ const meta = {
                 type: 'select',
             },
         },
-        iconSize: {
-            description: 'The optional size of the Icon.',
-            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
-            table: {
-                defaultValue: {
-                    summary: 'undefined',
-                    detail: 'The size of the Button will be used as the size of the Icon',
-                },
-            },
-            control: {
-                type: 'select',
-            },
-        },
         icon: {
             description: 'The icon to display in the Button.',
             type: 'string',
             options: AVAILABLE_ICONS,
+            mapping: Object.fromEntries([
+                ...MATERIAL_UI_ICONS.map((icon) => [icon, { icon, source: 'material', size: '2xl' }]),
+                ...PHOSPHOR_ICONS.map((icon) => [icon, { icon, source: 'phosphor', size: '2xl' }]),
+            ]),
             table: {
                 defaultValue: { summary: 'undefined' },
             },
@@ -143,7 +137,7 @@ const meta = {
 
     // Define defaults
     args: {
-        children: 'Button Content',
+        children: 'Button',
         variant: buttonDefaults.variant,
         color: buttonDefaults.color,
         size: buttonDefaults.size,
@@ -167,7 +161,7 @@ type Story = StoryObj<typeof meta>;
 // Pass props to this so that it can be customized via the UI props panel
 export const sandbox: Story = {
     tags: ['dev'],
-    render: (props) => <Button {...props}>Button</Button>,
+    render: (props) => <Button {...props} />,
 };
 
 export const states = () => (
@@ -191,17 +185,18 @@ export const colors = () => (
 
 export const sizes = () => (
     <GridList>
-        <Button size="sm">Small Button</Button>
-        <Button size="md">Regular Button</Button>
-        <Button size="lg">Large Button</Button>
-        <Button size="xl">XLarge Button</Button>
+        <Button size="xs">XSmall</Button>
+        <Button size="sm">Small</Button>
+        <Button size="md">Regular</Button>
+        <Button size="lg">Large</Button>
+        <Button size="xl">XLarge</Button>
     </GridList>
 );
 
 export const withIcon = () => (
     <GridList>
-        <Button icon="Add">Icon Left</Button>
-        <Button icon="Add" iconPosition="right">
+        <Button icon={{ icon: 'Add', source: 'material' }}>Icon Left</Button>
+        <Button icon={{ icon: 'Add', source: 'material' }} iconPosition="right">
             Icon Right
         </Button>
     </GridList>
@@ -209,8 +204,8 @@ export const withIcon = () => (
 
 export const circleShape = () => (
     <GridList>
-        <Button icon="Add" size="sm" isCircle />
-        <Button icon="Add" isCircle />
-        <Button icon="Add" size="lg" isCircle />
+        <Button icon={{ icon: 'Add', source: 'material' }} size="sm" isCircle />
+        <Button icon={{ icon: 'Add', source: 'material' }} isCircle />
+        <Button icon={{ icon: 'Add', source: 'material' }} size="lg" isCircle />
     </GridList>
 );
diff --git a/datahub-web-react/src/alchemy-components/components/Button/Button.tsx b/datahub-web-react/src/alchemy-components/components/Button/Button.tsx
index a41cdad05a6c8..a0e91e4cda647 100644
--- a/datahub-web-react/src/alchemy-components/components/Button/Button.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Button/Button.tsx
@@ -24,7 +24,6 @@ export const Button = ({
     size = buttonDefaults.size,
     icon, // default undefined
     iconPosition = buttonDefaults.iconPosition,
-    iconSize,
     isCircle = buttonDefaults.isCircle,
     isLoading = buttonDefaults.isLoading,
     isDisabled = buttonDefaults.isDisabled,
@@ -40,6 +39,7 @@ export const Button = ({
         isLoading,
         isActive,
         isDisabled,
+        hasChildren: !!children,
     };
 
     if (isLoading) {
@@ -52,9 +52,9 @@ export const Button = ({
 
     return (
         <ButtonBase {...styleProps} {...props}>
-            {icon && iconPosition === 'left' && <Icon icon={icon} size={iconSize || size} />}
+            {icon && iconPosition === 'left' && <Icon {...icon} size={icon.size || size} />}
             {!isCircle && children}
-            {icon && iconPosition === 'right' && <Icon icon={icon} size={iconSize || size} />}
+            {icon && iconPosition === 'right' && <Icon {...icon} size={icon.size || size} />}
         </ButtonBase>
     );
 };
diff --git a/datahub-web-react/src/alchemy-components/components/Button/types.ts b/datahub-web-react/src/alchemy-components/components/Button/types.ts
index 8e1ee6953a493..a01295d2a8472 100644
--- a/datahub-web-react/src/alchemy-components/components/Button/types.ts
+++ b/datahub-web-react/src/alchemy-components/components/Button/types.ts
@@ -1,9 +1,14 @@
+import { IconProps } from '@components/components/Icon/types';
 import { ButtonHTMLAttributes } from 'react';
 
-import type { IconNames } from '@components';
-import type { SizeOptions, ColorOptions, FontSizeOptions } from '@components/theme/config';
+import type { SizeOptions, ColorOptions } from '@components/theme/config';
 
-export type ButtonVariant = 'filled' | 'outline' | 'text';
+export enum ButtonVariantValues {
+    filled = 'filled',
+    outline = 'outline',
+    text = 'text',
+}
+export type ButtonVariant = keyof typeof ButtonVariantValues;
 
 export interface ButtonPropsDefaults {
     variant: ButtonVariant;
@@ -19,8 +24,7 @@ export interface ButtonPropsDefaults {
 export interface ButtonProps
     extends Partial<ButtonPropsDefaults>,
         Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
-    icon?: IconNames;
-    iconSize?: FontSizeOptions;
+    icon?: IconProps;
 }
 
-export type ButtonStyleProps = Omit<ButtonPropsDefaults, 'iconPosition'>;
+export type ButtonStyleProps = Omit<ButtonPropsDefaults, 'iconPosition'> & { hasChildren: boolean };
diff --git a/datahub-web-react/src/alchemy-components/components/Button/utils.ts b/datahub-web-react/src/alchemy-components/components/Button/utils.ts
index a0825dadce831..337901a8bfdc8 100644
--- a/datahub-web-react/src/alchemy-components/components/Button/utils.ts
+++ b/datahub-web-react/src/alchemy-components/components/Button/utils.ts
@@ -81,7 +81,7 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions): Colo
 
             bgColor: colors.transparent,
             borderColor: colors.transparent,
-            hoverBgColor: colors.transparent,
+            hoverBgColor: colors.gray[1500],
             activeBgColor: colors.transparent,
             disabledBgColor: colors.transparent,
             disabledBorderColor: colors.transparent,
@@ -151,26 +151,7 @@ const getButtonFontStyles = (size: SizeOptions) => {
         lineHeight: typography.lineHeights.none,
     };
 
-    const sizeStyles = {
-        sm: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 12px
-        },
-        md: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 14px
-        },
-        lg: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 16px
-        },
-        xl: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 18px
-        },
-    };
-
-    return sizeStyles[size];
+    return { ...baseFontStyles, fontSize: getFontSize(size) };
 };
 
 // Generate radii styles for button
@@ -180,13 +161,14 @@ const getButtonRadiiStyles = (isCircle: boolean) => {
 };
 
 // Generate padding styles for button
-const getButtonPadding = (size: SizeOptions, variant: ButtonVariant, isCircle: boolean) => {
+const getButtonPadding = (size: SizeOptions, hasChildren: boolean, isCircle: boolean) => {
     if (isCircle) return { padding: spacing.xsm };
+    if (!hasChildren) return { padding: spacing.xsm };
 
     const paddingStyles = {
         xs: {
-            vertical: 0,
-            horizontal: 0,
+            vertical: 6,
+            horizontal: 6,
         },
         sm: {
             vertical: 8,
@@ -208,7 +190,7 @@ const getButtonPadding = (size: SizeOptions, variant: ButtonVariant, isCircle: b
 
     const selectedStyle = paddingStyles[size];
     const verticalPadding = selectedStyle.vertical;
-    const horizontalPadding = variant === 'text' ? 0 : selectedStyle.horizontal;
+    const horizontalPadding = selectedStyle.horizontal;
     return { padding: `${verticalPadding}px ${horizontalPadding}px` };
 };
 
@@ -221,7 +203,7 @@ const getButtonActiveStyles = (colorStyles: ColorStyles) => ({
 });
 
 // Generate loading styles for button
-const getButtonLoadingStyles = () => ({
+const getButtonLoadingStyles = (): CSSObject => ({
     pointerEvents: 'none',
     opacity: 0.75,
 });
@@ -229,8 +211,8 @@ const getButtonLoadingStyles = () => ({
 /*
  * Main function to generate styles for button
  */
-export const getButtonStyle = (props: ButtonStyleProps) => {
-    const { variant, color, size, isCircle, isActive, isLoading, isDisabled } = props;
+export const getButtonStyle = (props: ButtonStyleProps): CSSObject => {
+    const { variant, color, size, isCircle, isActive, isLoading, isDisabled, hasChildren } = props;
 
     // Get map of colors
     const colorStyles = getButtonColorStyles(variant, color);
@@ -239,10 +221,10 @@ export const getButtonStyle = (props: ButtonStyleProps) => {
     const variantStyles = getButtonVariantStyles(variant, colorStyles);
     const fontStyles = getButtonFontStyles(size);
     const radiiStyles = getButtonRadiiStyles(isCircle);
-    const paddingStyles = getButtonPadding(size, variant, isCircle);
+    const paddingStyles = getButtonPadding(size, hasChildren, isCircle);
 
     // Base of all generated styles
-    let styles = {
+    let styles: CSSObject = {
         ...variantStyles,
         ...fontStyles,
         ...radiiStyles,
diff --git a/datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx b/datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx
new file mode 100644
index 0000000000000..15513421f2d7c
--- /dev/null
+++ b/datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx
@@ -0,0 +1,22 @@
+import { Button, ButtonProps, Icon, IconProps } from '@components';
+import React from 'react';
+
+// const StyledButton = styled`
+//     display: flex;
+//     align-items: center;
+//     height: fit-content;
+//     padding: 4px;
+// `;
+
+interface Props {
+    buttonProps: ButtonProps;
+    iconProps: IconProps;
+}
+
+export default function IconButton({ buttonProps, iconProps }: Props) {
+    return (
+        <Button variant="text" {...buttonProps}>
+            <Icon {...iconProps} />
+        </Button>
+    );
+}
diff --git a/datahub-web-react/src/alchemy-components/components/Drawer/Drawer.tsx b/datahub-web-react/src/alchemy-components/components/Drawer/Drawer.tsx
index 1067b95700576..d1c55f6e9c804 100644
--- a/datahub-web-react/src/alchemy-components/components/Drawer/Drawer.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Drawer/Drawer.tsx
@@ -26,7 +26,7 @@ export const Drawer = ({
                         {onBack && (
                             <Button
                                 color="gray"
-                                icon="ArrowBack"
+                                icon={{ icon: 'ArrowBack', source: 'material' }}
                                 iconPosition="left"
                                 isCircle
                                 onClick={() => onBack?.()}
@@ -41,7 +41,7 @@ export const Drawer = ({
                     {closable && (
                         <Button
                             color="gray"
-                            icon="Close"
+                            icon={{ icon: 'Close', source: 'material' }}
                             iconPosition="left"
                             isCircle
                             onClick={() => onClose?.()}
diff --git a/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.stories.tsx b/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.stories.tsx
index c8f7bb700f686..718f2f08011b8 100644
--- a/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.stories.tsx
+++ b/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.stories.tsx
@@ -50,7 +50,7 @@ const meta = {
         subTitle: 'Description of the card',
         renderControls: () => (
             <>
-                <Button icon="Add" variant="outline" size="md">
+                <Button icon={{ icon: 'Add', source: 'material' }} variant="outline" size="md">
                     Assertion
                 </Button>
                 <SimpleSelect
diff --git a/datahub-web-react/src/alchemy-components/components/Icon/constants.ts b/datahub-web-react/src/alchemy-components/components/Icon/constants.ts
index 3c16eb713b2c9..1bd11c5f899db 100644
--- a/datahub-web-react/src/alchemy-components/components/Icon/constants.ts
+++ b/datahub-web-react/src/alchemy-components/components/Icon/constants.ts
@@ -1,4 +1,4 @@
-const MATERIAL_UI_ICONS = [
+export const MATERIAL_UI_ICONS = [
     'AccountCircle',
     'AccountTree',
     'AddCircle',
@@ -546,7 +546,7 @@ const MATERIAL_UI_ICONS = [
     'ZoomOutMap',
 ];
 
-const PHOSPHOR_ICONS = [
+export const PHOSPHOR_ICONS = [
     'Activity',
     'AddressBook',
     'Airplane',
diff --git a/datahub-web-react/src/alchemy-components/components/Input/Input.stories.tsx b/datahub-web-react/src/alchemy-components/components/Input/Input.stories.tsx
index 053e952b62a2e..10597cf64cebb 100644
--- a/datahub-web-react/src/alchemy-components/components/Input/Input.stories.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Input/Input.stories.tsx
@@ -1,3 +1,4 @@
+import { MATERIAL_UI_ICONS, PHOSPHOR_ICONS } from '@components/components/Icon/constants';
 import React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -54,6 +55,10 @@ const meta = {
             description: 'The icon to display in the Input.',
             type: 'string',
             options: AVAILABLE_ICONS,
+            mapping: Object.fromEntries([
+                ...MATERIAL_UI_ICONS.map((icon) => [icon, { icon, source: 'material' }]),
+                ...PHOSPHOR_ICONS.map((icon) => [icon, { icon, source: 'phosphor' }]),
+            ]),
             table: {
                 defaultValue: { summary: 'undefined' },
             },
diff --git a/datahub-web-react/src/alchemy-components/components/Input/Input.tsx b/datahub-web-react/src/alchemy-components/components/Input/Input.tsx
index 75c199610f81e..3db152d7fd216 100644
--- a/datahub-web-react/src/alchemy-components/components/Input/Input.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Input/Input.tsx
@@ -76,7 +76,7 @@ export const Input = ({
                 </Label>
             )}
             <InputContainer {...inputBaseProps}>
-                {icon && <SearchIcon icon={icon.name} source={icon.source} variant={icon.variant} size="xl" />}
+                {icon && <SearchIcon {...icon} size="xl" />}
                 <InputField
                     value={value}
                     onChange={(e) => setValue?.(e.target.value)}
diff --git a/datahub-web-react/src/alchemy-components/components/Input/types.ts b/datahub-web-react/src/alchemy-components/components/Input/types.ts
index 8ec3c8ed3e358..28e5429563d0c 100644
--- a/datahub-web-react/src/alchemy-components/components/Input/types.ts
+++ b/datahub-web-react/src/alchemy-components/components/Input/types.ts
@@ -8,7 +8,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     setValue?: React.Dispatch<React.SetStateAction<string>>;
     label: string;
     placeholder?: string;
-    icon?: { name: IconNames; source: IconSource; variant?: MaterialIconVariant };
+    icon?: { icon: IconNames; source: IconSource; variant?: MaterialIconVariant };
     error?: string;
     warning?: string;
     isSuccess?: boolean;
diff --git a/datahub-web-react/src/alchemy-components/components/SearchBar/SearchBar.tsx b/datahub-web-react/src/alchemy-components/components/SearchBar/SearchBar.tsx
index 8e9eea5eb907c..ec78f6db7021b 100644
--- a/datahub-web-react/src/alchemy-components/components/SearchBar/SearchBar.tsx
+++ b/datahub-web-react/src/alchemy-components/components/SearchBar/SearchBar.tsx
@@ -1,4 +1,5 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { Icon } from '@src/alchemy-components';
+import { InputProps } from 'antd';
 import React from 'react';
 import { StyledSearchBar } from './components';
 import { SearchBarProps } from './types';
@@ -6,7 +7,7 @@ import { SearchBarProps } from './types';
 export const searchBarDefaults: SearchBarProps = {
     placeholder: 'Search...',
     value: '',
-    width: '272px',
+    width: '100%',
     allowClear: true,
 };
 
@@ -16,15 +17,17 @@ export const SearchBar = ({
     width = searchBarDefaults.width,
     allowClear = searchBarDefaults.allowClear,
     onChange,
-}: SearchBarProps) => {
+    ...props
+}: SearchBarProps & Omit<InputProps, 'onChange'>) => {
     return (
         <StyledSearchBar
             placeholder={placeholder}
             onChange={(e) => onChange?.(e.target.value)}
             value={value}
-            prefix={<SearchOutlined />}
+            prefix={<Icon icon="MagnifyingGlass" source="phosphor" />}
             allowClear={allowClear}
             $width={width}
+            {...props}
         />
     );
 };
diff --git a/datahub-web-react/src/alchemy-components/components/SearchBar/types.ts b/datahub-web-react/src/alchemy-components/components/SearchBar/types.ts
index 04ac218dc2cc6..74f0eca340519 100644
--- a/datahub-web-react/src/alchemy-components/components/SearchBar/types.ts
+++ b/datahub-web-react/src/alchemy-components/components/SearchBar/types.ts
@@ -4,4 +4,5 @@ export interface SearchBarProps {
     width?: string;
     onChange?: (value: string) => void;
     allowClear?: boolean;
+    disabled?: boolean;
 }
diff --git a/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx b/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx
index ed16e42dbc650..2f7f67df65910 100644
--- a/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx
@@ -173,7 +173,7 @@ export default function AutoCompleteSelect<T>({
                         <Input
                             label=""
                             type="text"
-                            icon={{ name: 'MagnifyingGlass', source: 'phosphor' }}
+                            icon={{ icon: 'MagnifyingGlass', source: 'phosphor' }}
                             placeholder={searchPlaceholder || ''}
                             value={query}
                             onChange={(e) => {
@@ -218,7 +218,11 @@ function SelectActionButtons({
     return (
         <ActionButtonsContainer>
             {showClear && selectedValues.length > 0 && !isDisabled && !isReadOnly && (
-                <StyledClearButton icon="Close" isCircle onClick={handleClearSelection} iconSize="lg" />
+                <StyledClearButton
+                    icon={{ icon: 'Close', source: 'material', size: 'lg' }}
+                    isCircle
+                    onClick={handleClearSelection}
+                />
             )}
             <StyledIcon icon="ChevronLeft" rotate={isOpen ? '90' : '270'} size="lg" />
         </ActionButtonsContainer>
diff --git a/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx b/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx
index c4b6404cc0f54..09cd4a51e8fb2 100644
--- a/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx
@@ -37,7 +37,11 @@ const SelectActionButtons = ({
     return (
         <ActionButtonsContainer>
             {showClear && selectedValues.length > 0 && !isDisabled && !isReadOnly && (
-                <StyledClearButton icon="Close" isCircle onClick={handleClearSelection} iconSize="lg" />
+                <StyledClearButton
+                    icon={{ icon: 'Close', source: 'material', size: 'lg' }}
+                    isCircle
+                    onClick={handleClearSelection}
+                />
             )}
             <StyledIcon icon="ChevronLeft" rotate={isOpen ? '90' : '270'} size="lg" />
         </ActionButtonsContainer>
diff --git a/datahub-web-react/src/alchemy-components/components/Select/Nested/NestedSelect.tsx b/datahub-web-react/src/alchemy-components/components/Select/Nested/NestedSelect.tsx
index 16312d2cf6e8a..a10b482679956 100644
--- a/datahub-web-react/src/alchemy-components/components/Select/Nested/NestedSelect.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Select/Nested/NestedSelect.tsx
@@ -99,7 +99,7 @@ const SelectActionButtons = ({
         <ActionButtonsContainer>
             {!showCount && !!selectedOptions.length && !isDisabled && !isReadOnly && (
                 <StyledClearButton
-                    icon="Close"
+                    icon={{ icon: 'Close', source: 'material', size: 'lg' }}
                     isCircle
                     onClick={handleClearSelection}
                     size={fontSize}
diff --git a/datahub-web-react/src/alchemy-components/components/Select/SimpleSelect.tsx b/datahub-web-react/src/alchemy-components/components/Select/SimpleSelect.tsx
index 456650c51a7c6..3ffa048629afb 100644
--- a/datahub-web-react/src/alchemy-components/components/Select/SimpleSelect.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Select/SimpleSelect.tsx
@@ -34,7 +34,11 @@ const SelectActionButtons = ({
     return (
         <ActionButtonsContainer>
             {showClear && selectedValues.length > 0 && !isDisabled && !isReadOnly && (
-                <StyledClearButton icon="Close" isCircle onClick={handleClearSelection} iconSize="lg" />
+                <StyledClearButton
+                    icon={{ icon: 'Close', source: 'material', size: 'lg' }}
+                    isCircle
+                    onClick={handleClearSelection}
+                />
             )}
             <StyledIcon icon="ChevronLeft" rotate={isOpen ? '90' : '270'} size="lg" />
         </ActionButtonsContainer>
diff --git a/datahub-web-react/src/app/domainV2/DomainSearch.tsx b/datahub-web-react/src/app/domainV2/DomainSearch.tsx
index 73552060cb5e8..824043ee9ce96 100644
--- a/datahub-web-react/src/app/domainV2/DomainSearch.tsx
+++ b/datahub-web-react/src/app/domainV2/DomainSearch.tsx
@@ -1,13 +1,14 @@
-import React, { useRef, useState } from 'react';
+import { SearchBar } from '@components';
+import React, { useState } from 'react';
 import { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
+import { useDebounce } from 'react-use';
 import styled from 'styled-components/macro';
 import { useGetAutoCompleteResultsQuery } from '../../graphql/search.generated';
 import { EntityType } from '../../types.generated';
-import { SearchBar } from '../searchV2/SearchBar';
 import ClickOutside from '../shared/ClickOutside';
 import { useEntityRegistry } from '../useEntityRegistry';
 import DomainSearchResultItem from './DomainSearchResultItem';
-import { ANTD_GRAY, REDESIGN_COLORS } from '../entityV2/shared/constants';
+import { REDESIGN_COLORS } from '../entityV2/shared/constants';
 
 const DomainSearchWrapper = styled.div`
     flex-shrink: 0;
@@ -35,6 +36,10 @@ const LoadingWrapper = styled(ResultsWrapper)`
     font-size: 16px;
 `;
 
+const InputWrapper = styled.div`
+    padding: 12px;
+`;
+
 const SearchIcon = styled(SearchOutlined)`
     color: ${REDESIGN_COLORS.TEXT_HEADING_SUB_LINK};
     padding: 16px;
@@ -48,9 +53,12 @@ type Props = {
 };
 
 function DomainSearch({ isCollapsed, unhideSidebar }: Props) {
+    const [searchInput, setSearchInput] = useState('');
     const [query, setQuery] = useState('');
     const [isSearchBarFocused, setIsSearchBarFocused] = useState(false);
     const entityRegistry = useEntityRegistry();
+
+    useDebounce(() => setQuery(searchInput), 200, [searchInput]);
     const { data, loading } = useGetAutoCompleteResultsQuery({
         variables: {
             input: {
@@ -62,14 +70,6 @@ function DomainSearch({ isCollapsed, unhideSidebar }: Props) {
     });
 
     const entities = data?.autoComplete?.entities || [];
-    const timerRef = useRef(-1);
-
-    const handleQueryChange = (q: string) => {
-        window.clearTimeout(timerRef.current);
-        timerRef.current = window.setTimeout(() => {
-            setQuery(q);
-        }, 250);
-    };
 
     return (
         <DomainSearchWrapper>
@@ -77,25 +77,14 @@ function DomainSearch({ isCollapsed, unhideSidebar }: Props) {
                 <SearchIcon onClick={unhideSidebar} />
             ) : (
                 <ClickOutside onClickOutside={() => setIsSearchBarFocused(false)}>
-                    <SearchBar
-                        initialQuery={query || ''}
-                        placeholderText="Search Domains"
-                        suggestions={[]}
-                        hideRecommendations
-                        style={{ padding: 9 }}
-                        inputStyle={{
-                            height: 30,
-                            fontSize: 10,
-                            fontWeight: 500,
-                            backgroundColor: ANTD_GRAY[3],
-                        }}
-                        textColor={ANTD_GRAY[10]}
-                        placeholderColor={REDESIGN_COLORS.PLACEHOLDER_PURPLE}
-                        onSearch={() => null}
-                        onQueryChange={(q) => handleQueryChange(q)}
-                        entityRegistry={entityRegistry}
-                        onFocus={() => setIsSearchBarFocused(true)}
-                    />
+                    <InputWrapper>
+                        <SearchBar
+                            placeholder="Search"
+                            value={searchInput}
+                            onChange={setSearchInput}
+                            onFocus={() => setIsSearchBarFocused(true)}
+                        />
+                    </InputWrapper>
                     {loading && isSearchBarFocused && (
                         <LoadingWrapper>
                             <LoadingOutlined />
diff --git a/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx b/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx
index 9735136972d12..62a8f9b1154b0 100644
--- a/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx
+++ b/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx
@@ -49,7 +49,7 @@ export default function ManageDomainsPageV2() {
                     id={DOMAINS_CREATE_DOMAIN_ID}
                     onClick={() => setIsCreatingDomain(true)}
                     data-testid="domains-new-domain-button"
-                    icon="Add"
+                    icon={{ icon: 'Add', source: 'material' }}
                 >
                     Create
                 </Button>
diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx
index 2fc8fc11cd1b2..e5a6791557021 100644
--- a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx
+++ b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx
@@ -1,3 +1,4 @@
+import { Icon } from '@components';
 import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Button, Input, Popover, Select, Tooltip, Typography } from 'antd';
@@ -7,7 +8,6 @@ import {
     CaretDownOutlined,
     FileTextOutlined,
     QuestionCircleOutlined,
-    SearchOutlined,
     TableOutlined,
 } from '@ant-design/icons';
 import styled from 'styled-components/macro';
@@ -245,7 +245,7 @@ export default function SchemaHeader({
                             placeholder="Search in schema..."
                             onChange={debouncedSetFilterText}
                             allowClear
-                            prefix={<SearchOutlined />}
+                            prefix={<Icon icon="MagnifyingGlass" source="phosphor" />}
                         />
                     )}
                 </LeftButtonsGroup>
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx
index 85fb011bc8e30..7dfe3c2289466 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx
@@ -1,5 +1,6 @@
+import { Icon } from '@components';
 import { Button, Input, Tooltip } from 'antd';
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import React from 'react';
 import TabToolbar from '../../../components/styled/TabToolbar';
@@ -31,7 +32,7 @@ export default function QueriesTabToolbar({ addQueryDisabled, onAddQuery, onChan
                 placeholder="Search in queries..."
                 onChange={onChangeSearch}
                 allowClear
-                prefix={<SearchOutlined />}
+                prefix={<Icon icon="MagnifyingGlass" source="phosphor" />}
                 data-testid="search-query-input"
             />
         </TabToolbar>
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx
index c44bddc2c30d1..84ed707753e31 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx
@@ -1,7 +1,8 @@
+import { Icon } from '@components';
 import { Button, Card, Divider, Empty, Input, Modal, Pagination } from 'antd';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { ExclamationCircleFilled, LoadingOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { ExclamationCircleFilled, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import { useBaseEntity } from '../../../EntityContext';
 import './RelationshipsTab.less';
 import { EntityType, ErModelRelationship } from '../../../../../../types.generated';
@@ -243,7 +244,7 @@ export const RelationshipsTab = () => {
                         onChange={(e) => setFilterText(e.target.value)}
                         allowClear
                         autoFocus
-                        prefix={<SearchOutlined />}
+                        prefix={<Icon icon="MagnifyingGlass" source="phosphor" />}
                     />
                     <Button
                         type="link"
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Properties/AddPropertyButton.tsx b/datahub-web-react/src/app/entity/shared/tabs/Properties/AddPropertyButton.tsx
index 50e6c64c7463b..ca378af088a9e 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Properties/AddPropertyButton.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Properties/AddPropertyButton.tsx
@@ -183,7 +183,7 @@ const AddPropertyButton = ({ fieldUrn, refetch, fieldProperties, isV1Drawer }: P
                                 label=""
                                 placeholder="Search..."
                                 value={searchQuery}
-                                onChange={(e) => setSearchQuery(e.target.value)}
+                                setValue={setSearchQuery}
                             />
                         </SearchContainer>
                         {loading ? (
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Properties/TabHeader.tsx b/datahub-web-react/src/app/entity/shared/tabs/Properties/TabHeader.tsx
index 192b840b50040..4ba48e1c71519 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Properties/TabHeader.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Properties/TabHeader.tsx
@@ -1,4 +1,4 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { Icon } from '@components';
 import { Maybe, StructuredProperties } from '@src/types.generated';
 import { Input } from 'antd';
 import React from 'react';
@@ -32,7 +32,7 @@ export default function TabHeader({ setFilterText, fieldUrn, fieldProperties, re
                 placeholder="Search in properties..."
                 onChange={(e) => setFilterText(e.target.value)}
                 allowClear
-                prefix={<SearchOutlined />}
+                prefix={<Icon icon="MagnifyingGlass" source="phosphor" />}
             />
             <AddPropertyButton fieldUrn={fieldUrn} fieldProperties={fieldProperties} refetch={refetch} />
         </TableHeader>
diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaHeader.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaHeader.tsx
index d95ff2992c2b8..be6db2397f2f9 100644
--- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaHeader.tsx
+++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaHeader.tsx
@@ -1,22 +1,24 @@
 import { FileTextOutlined, TableOutlined } from '@ant-design/icons';
 import VersionSelector from '@app/entityV2/dataset/profile/schema/components/VersionSelector';
-import HistoryIcon from '@mui/icons-material/History';
-import { Button, Typography } from 'antd';
-import { Tooltip } from '@components';
-import { debounce } from 'lodash';
+import { Button as AntButton, Typography } from 'antd';
+import { Button, Tooltip } from '@components';
 import React, { useState } from 'react';
+import { useDebounce } from 'react-use';
 import styled from 'styled-components/macro';
 import { SemanticVersionStruct } from '../../../../../../types.generated';
 import TabToolbar from '../../../../shared/components/styled/TabToolbar';
-import { ANTD_GRAY, REDESIGN_COLORS } from '../../../../shared/constants';
 import { SchemaFilterType } from '../../../../shared/tabs/Dataset/Schema/utils/filterSchemaRows';
 import SchemaSearchInput from './SchemaSearchInput';
 
+const StyledTabToolbar = styled(TabToolbar)`
+    height: unset;
+    padding: 8px 16px 16px 16px;
+`;
+
 const SchemaHeaderContainer = styled.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-    padding-bottom: 3px;
 `;
 
 // Below styles are for buttons on the left side of the Schema Header
@@ -28,7 +30,7 @@ const LeftButtonsGroup = styled.div`
     }
 `;
 
-const RawButton = styled(Button)`
+const RawButton = styled(AntButton)`
     &&& {
         display: flex;
         margin-right: 10px;
@@ -71,25 +73,6 @@ const RightButtonsGroup = styled.div`
     padding-left: 5px;
 `;
 
-const SchemaAuditButton = styled(Button)`
-    display: flex;
-    align-items: center;
-    background: ${REDESIGN_COLORS.WHITE};
-    padding: 0;
-    margin-right: 15px;
-
-    svg {
-        background: ${REDESIGN_COLORS.TITLE_PURPLE};
-        border-radius: 50%;
-        stroke: ${REDESIGN_COLORS.WHITE};
-        color: ${REDESIGN_COLORS.WHITE};
-        padding: 4px;
-        stroke-width: 0.5px;
-    }
-`;
-
-const MAX_ROWS_BEFORE_DEBOUNCE = 50;
-
 type Props = {
     hasRaw: boolean;
     showRaw: boolean;
@@ -101,6 +84,7 @@ type Props = {
     versionList: Array<SemanticVersionStruct>;
     showSchemaTimeline: boolean;
     setShowSchemaTimeline: any;
+    filterText: string;
     setFilterText: (text: string) => void;
     numRows: number;
     schemaFilterTypes: SchemaFilterType[];
@@ -108,7 +92,6 @@ type Props = {
     highlightedMatchIndex: number | null;
     setHighlightedMatchIndex: (val: number | null) => void;
     matches: { path: string; index: number }[];
-    schemaFilter: string;
 };
 
 export default function SchemaHeader({
@@ -122,6 +105,7 @@ export default function SchemaHeader({
     versionList,
     setShowSchemaTimeline,
     showSchemaTimeline,
+    filterText,
     setFilterText,
     numRows,
     schemaFilterTypes,
@@ -129,19 +113,16 @@ export default function SchemaHeader({
     matches,
     highlightedMatchIndex,
     setHighlightedMatchIndex,
-    schemaFilter,
 }: Props) {
     const [schemaFilterSelectOpen, setSchemaFilterSelectOpen] = useState(false);
 
     const schemaAuditToggleText = showSchemaTimeline ? 'Close change history' : 'View change history';
 
-    const debouncedSetFilterText = debounce(
-        (e: React.ChangeEvent<HTMLInputElement>) => setFilterText(e.target.value),
-        numRows > MAX_ROWS_BEFORE_DEBOUNCE ? 100 : 0,
-    );
+    const [searchInput, setSearchInput] = useState(filterText);
+    useDebounce(() => setFilterText(searchInput), 100, [searchInput]);
 
     return (
-        <TabToolbar>
+        <StyledTabToolbar>
             <SchemaHeaderContainer>
                 <LeftButtonsGroup>
                     {hasRaw && (
@@ -173,8 +154,8 @@ export default function SchemaHeader({
                         <SchemaSearchInput
                             schemaFilterTypes={schemaFilterTypes}
                             setSchemaFilterTypes={setSchemaFilterTypes}
-                            schemaFilter={schemaFilter}
-                            debouncedSetFilterText={debouncedSetFilterText}
+                            searchInput={searchInput}
+                            setSearchInput={setSearchInput}
                             matches={matches.map((match) => match.path)}
                             highlightedMatchIndex={highlightedMatchIndex}
                             setHighlightedMatchIndex={setHighlightedMatchIndex}
@@ -194,17 +175,16 @@ export default function SchemaHeader({
                         />
                     )}
                     <Tooltip title={schemaAuditToggleText} showArrow={false}>
-                        <SchemaAuditButton
-                            type="text"
+                        <Button
+                            variant="text"
                             data-testid="schema-blame-button"
+                            color={showSchemaTimeline ? 'violet' : 'gray'}
+                            icon={{ icon: 'ClockCounterClockwise', source: 'phosphor', size: '2xl' }}
                             onClick={() => setShowSchemaTimeline(!showSchemaTimeline)}
-                            style={{ color: showSchemaTimeline ? REDESIGN_COLORS.BLUE : ANTD_GRAY[7] }}
-                        >
-                            <HistoryIcon />
-                        </SchemaAuditButton>
+                        />
                     </Tooltip>
                 </RightButtonsGroup>
             </SchemaHeaderContainer>
-        </TabToolbar>
+        </StyledTabToolbar>
     );
 }
diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx
index 7c6333ab78b31..5b7c44047888a 100644
--- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx
+++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx
@@ -1,6 +1,4 @@
-import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
-import { Input } from 'antd';
-import { Popover } from '@components';
+import { Button, Popover, SearchBar } from '@components';
 import React from 'react';
 import styled from 'styled-components';
 import { pluralize } from '../../../../../shared/textUtil';
@@ -8,16 +6,6 @@ import { REDESIGN_COLORS } from '../../../../shared/constants';
 import { SchemaFilterType } from '../../../../shared/tabs/Dataset/Schema/utils/filterSchemaRows';
 import SchemaFilterSelectContent from './SchemaFilterSelectContent';
 
-const StyledInput = styled(Input)`
-    max-width: 300px;
-    background: ${REDESIGN_COLORS.LIGHT_GREY};
-    margin-top: 5px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 24px;
-    color: ${REDESIGN_COLORS.DARK_GREY};
-`;
-
 const MatchLabelText = styled.span`
     font-size: 12px;
     font-style: normal;
@@ -28,82 +16,17 @@ const MatchLabelText = styled.span`
 `;
 
 const SearchContainer = styled.span`
-    --antd-wave-shadow-color: transparent;
-    flex: auto;
-    white-space: nowrap;
     display: flex;
     align-items: center;
-
-    .ant-input-group-wrapper {
-        border-radius: 20px;
-        border: 1px solid ${REDESIGN_COLORS.GREY};
-        background: #f3f5fa;
-    }
-
-    .ant-input-group-wrapper {
-        background-color: #ffffff00 !important;
-    }
-
-    .ant-input-wrapper {
-        background-color: #ffffff00 !important;
-    }
-
-    .ant-input {
-        border-radius: 0;
-    }
-
-    .ant-input-affix-wrapper {
-        border-radius: 20px;
-        border: none;
-    }
-
-    .ant-input-group-addon {
-        border: none;
-        background-color: #ffffff00 !important;
-        left: 2px;
-    }
-
-    .ant-input-affix-wrapper:focus {
-        border: none;
-    }
-
-    .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
-        border: none;
-    }
-
-    .ant-input-affix-wrapper::selection {
-        background: transparent;
-    }
-`;
-
-const StyledPopover = styled(Popover)`
-    border-radius: 50%;
-    background: ${REDESIGN_COLORS.GREY};
-`;
-
-const StyledFilterIcon = styled(FilterOutlined)<{ $hasFiltered: boolean }>`
-    cursor: pointer;
-    margin-left: -14px;
-    margin-right: -14px;
-    margin-top: -12px;
-    margin-bottom: -12px;
-    padding-left: 14px;
-    padding-right: 14px;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    border-radius: 50%;
-    color: ${(props) => (props.$hasFiltered ? props.theme.styles['primary-color'] : 'inherit')};
-
-    :hover {
-        color: ${(props) => (!props.$hasFiltered ? props.theme.styles['primary-color'] : 'inherit')};
-    }
+    gap: 8px;
+    white-space: nowrap;
 `;
 
 interface SchemaSearchProps {
     schemaFilterTypes: SchemaFilterType[];
     setSchemaFilterTypes: (filters: SchemaFilterType[]) => void;
-    schemaFilter: string;
-    debouncedSetFilterText: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    searchInput: string;
+    setSearchInput: (value: string) => void;
     matches: string[];
     highlightedMatchIndex: number | null;
     setHighlightedMatchIndex: (val: number | null) => void;
@@ -115,8 +38,8 @@ interface SchemaSearchProps {
 const SchemaSearchInput: React.FC<SchemaSearchProps> = ({
     schemaFilterTypes,
     setSchemaFilterTypes,
-    schemaFilter,
-    debouncedSetFilterText,
+    searchInput,
+    setSearchInput,
     matches,
     highlightedMatchIndex,
     setHighlightedMatchIndex,
@@ -124,46 +47,42 @@ const SchemaSearchInput: React.FC<SchemaSearchProps> = ({
     setSchemaFilterSelectOpen,
     numRows,
 }: SchemaSearchProps) => {
-    const schemaFilterTypeSelectPrompt = (
-        <StyledPopover
-            placement="bottom"
-            open={schemaFilterSelectOpen}
-            onOpenChange={(val) => setSchemaFilterSelectOpen(val)}
-            content={
-                <SchemaFilterSelectContent
-                    close={() => setSchemaFilterSelectOpen(false)}
-                    schemaFilterTypes={schemaFilterTypes}
-                    setSchemaFilterTypes={setSchemaFilterTypes}
-                />
-            }
-            trigger="click"
-            overlayInnerStyle={{ padding: 0 }}
-        >
-            <StyledFilterIcon
-                $hasFiltered={schemaFilterTypes.length < 4}
-                style={{ cursor: 'pointer', margin: '-10px', padding: '10px' }}
-            />
-        </StyledPopover>
-    );
-
     return (
         <SearchContainer>
-            <StyledInput
-                bordered={false}
+            <SearchBar
+                value={searchInput}
                 disabled={schemaFilterTypes.length === 0}
-                addonAfter={schemaFilterTypeSelectPrompt}
-                defaultValue={schemaFilter}
                 placeholder="Search"
-                onChange={debouncedSetFilterText}
+                onChange={setSearchInput}
                 allowClear
-                prefix={<SearchOutlined />}
                 onKeyDown={(e) => {
                     if (e.code === 'Enter' && highlightedMatchIndex !== null && matches.length > 0) {
                         setHighlightedMatchIndex((highlightedMatchIndex + 1) % matches.length);
                     }
                 }}
+                width="300px"
             />
-            {schemaFilter.length > 0 && (
+            <Popover
+                placement="bottom"
+                open={schemaFilterSelectOpen}
+                onOpenChange={(val) => setSchemaFilterSelectOpen(val)}
+                content={
+                    <SchemaFilterSelectContent
+                        close={() => setSchemaFilterSelectOpen(false)}
+                        schemaFilterTypes={schemaFilterTypes}
+                        setSchemaFilterTypes={setSchemaFilterTypes}
+                    />
+                }
+                trigger="click"
+                overlayInnerStyle={{ padding: 0 }}
+            >
+                <Button
+                    variant="text"
+                    color={schemaFilterTypes.length < 4 ? 'violet' : 'gray'}
+                    icon={{ icon: 'FadersHorizontal', source: 'phosphor', size: '2xl' }}
+                />
+            </Popover>
+            {searchInput.length > 0 && (
                 <MatchLabelText>
                     Matched {matches.length} {pluralize(matches.length, 'column')} of {numRows}
                 </MatchLabelText>
diff --git a/datahub-web-react/src/app/entityV2/shared/components/search/InlineListSearch.tsx b/datahub-web-react/src/app/entityV2/shared/components/search/InlineListSearch.tsx
index c74f1ce107e3d..ddf4a6671eb29 100644
--- a/datahub-web-react/src/app/entityV2/shared/components/search/InlineListSearch.tsx
+++ b/datahub-web-react/src/app/entityV2/shared/components/search/InlineListSearch.tsx
@@ -1,4 +1,4 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { Icon } from '@components';
 import React from 'react';
 import { pluralize } from '@src/app/shared/textUtil';
 import { MatchLabelText, SearchContainer, StyledInput } from './styledComponents';
@@ -33,7 +33,7 @@ export const InlineListSearch: React.FC<InlineListSearchProps> = ({
                 placeholder={options?.placeholder || 'Search...'}
                 onChange={debouncedSetFilterText}
                 allowClear
-                prefix={!options?.hidePrefix && <SearchOutlined />}
+                prefix={!options?.hidePrefix && <Icon icon="MagnifyingGlass" source="phosphor" />}
             />
             {searchText && !options?.hideMatchCountText && (
                 <MatchLabelText>
diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx
index 6c3d2ad3e6a3a..c1cd5af4aff8f 100644
--- a/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx
+++ b/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx
@@ -8,7 +8,7 @@ export default styled.div`
     justify-content: space-between;
     height: 46px;
     border-bottom: 1px solid ${ANTD_GRAY[4.5]};
-    padding: 7px 16px;
+    padding: 8px 16px;
     box-shadow: 0px 2px 6px 0px #0000000d;
     flex: 0 0 auto;
 `;
diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/SchemaTab.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/SchemaTab.tsx
index 32bca28639c81..1f5e69f5ba5a7 100644
--- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/SchemaTab.tsx
+++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/SchemaTab.tsx
@@ -219,7 +219,8 @@ export const SchemaTab = ({ renderType, properties }: { renderType: TabRenderTyp
             <SchemaHeader
                 // see above hook
                 key={wasSearchReset ? 'key1' : 'key2'}
-                schemaFilter={filterText}
+                filterText={filterText}
+                setFilterText={setFilterText}
                 showRaw={showRaw}
                 setShowRaw={setShowRaw}
                 hasRaw={hasRawSchema}
@@ -230,7 +231,6 @@ export const SchemaTab = ({ renderType, properties }: { renderType: TabRenderTyp
                 versionList={versionList}
                 showSchemaTimeline={showSchemaTimelineView}
                 setShowSchemaTimeline={setShowSchemaTimelineView}
-                setFilterText={setFilterText}
                 numRows={schemaMetadata?.fields?.length}
                 schemaFilterTypes={schemaFilterTypes}
                 setSchemaFilterTypes={setSchemaFilterTypes}
diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Lineage/CompactLineageTab.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Lineage/CompactLineageTab.tsx
index 1da9a6f21d5cb..f4c444608d5d7 100644
--- a/datahub-web-react/src/app/entityV2/shared/tabs/Lineage/CompactLineageTab.tsx
+++ b/datahub-web-react/src/app/entityV2/shared/tabs/Lineage/CompactLineageTab.tsx
@@ -1,7 +1,7 @@
-import { ArrowDownOutlined, ArrowUpOutlined, SearchOutlined } from '@ant-design/icons';
+import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
 import { useIsSeparateSiblingsMode } from '@app/entity/shared/siblingUtils';
 import { Button, Divider } from 'antd';
-import { Tooltip } from '@components';
+import { Icon, Tooltip } from '@components';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components/macro';
 import { LineageDirection } from '../../../../../types.generated';
@@ -227,7 +227,7 @@ export const CompactLineageTab = ({ defaultDirection }: { defaultDirection: Line
                         $isSelected={showAdvancedFilters}
                         onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
                     >
-                        <SearchOutlined />
+                        <Icon icon="MagnifyingGlass" source="phosphor" />
                     </AdvancedFiltersButton>
                 </Tooltip>
             </Filters>
diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Properties/TabHeader.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Properties/TabHeader.tsx
index 9e0b4992d9c78..4ce1fbd457a21 100644
--- a/datahub-web-react/src/app/entityV2/shared/tabs/Properties/TabHeader.tsx
+++ b/datahub-web-react/src/app/entityV2/shared/tabs/Properties/TabHeader.tsx
@@ -1,4 +1,4 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { Icon } from '@components';
 import { Input } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
@@ -25,7 +25,7 @@ export default function TabHeader({ setFilterText }: Props) {
                 placeholder="Search in properties..."
                 onChange={(e) => setFilterText(e.target.value)}
                 allowClear
-                prefix={<SearchOutlined />}
+                prefix={<Icon icon="MagnifyingGlass" source="phosphor" />}
             />
         </TableHeader>
     );
diff --git a/datahub-web-react/src/app/entityV2/shared/versioning/VersionsDrawer.tsx b/datahub-web-react/src/app/entityV2/shared/versioning/VersionsDrawer.tsx
index 5aecd562d3d5a..fdcecefee89bf 100644
--- a/datahub-web-react/src/app/entityV2/shared/versioning/VersionsDrawer.tsx
+++ b/datahub-web-react/src/app/entityV2/shared/versioning/VersionsDrawer.tsx
@@ -207,7 +207,7 @@ export default function VersionsDrawer({ versionSetUrn, open }: Props) {
                 <Input
                     label=""
                     placeholder="Search versions by name..."
-                    icon={{ name: 'MagnifyingGlass', source: 'phosphor' }}
+                    icon={{ icon: 'MagnifyingGlass', source: 'phosphor' }}
                     value={searchInput}
                     setValue={setSearchInput}
                 />
diff --git a/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx b/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx
index 8bd52b6ee4324..b94b018a3582b 100644
--- a/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx
+++ b/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx
@@ -67,7 +67,7 @@ const GlossaryContentProvider = (props: Props) => {
                         data-testid="add-term-group-button-v2"
                         id={BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID}
                         size="lg"
-                        icon="Add"
+                        icon={{ icon: 'Add', source: 'material' }}
                         // can not be disabled on acryl-main due to ability to propose
                         onClick={() => setIsCreateNodeModalVisible(true)}
                     >
diff --git a/datahub-web-react/src/app/glossaryV2/GlossarySearch.tsx b/datahub-web-react/src/app/glossaryV2/GlossarySearch.tsx
index 8774b1dc33f2c..e28d1da3b924a 100644
--- a/datahub-web-react/src/app/glossaryV2/GlossarySearch.tsx
+++ b/datahub-web-react/src/app/glossaryV2/GlossarySearch.tsx
@@ -1,12 +1,13 @@
 import { LoadingOutlined } from '@ant-design/icons';
+import { SearchBar } from '@components';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { useDebounce } from 'react-use';
 import styled from 'styled-components/macro';
 import { useGetAutoCompleteMultipleResultsQuery } from '../../graphql/search.generated';
 import { EntityType } from '../../types.generated';
 import { IconStyleType } from '../entityV2/Entity';
 import { ANTD_GRAY, REDESIGN_COLORS } from '../entityV2/shared/constants';
-import { SearchBar } from '../searchV2/SearchBar';
 import ClickOutside from '../shared/ClickOutside';
 import { useEntityRegistry } from '../useEntityRegistry';
 
@@ -49,15 +50,21 @@ const SearchResult = styled(Link)`
     }
 `;
 
+const InputWrapper = styled.div`
+    padding: 12px;
+`;
+
 const IconWrapper = styled.span`
     margin-right: 8px;
 `;
 
 function GlossarySearch() {
+    const [searchInput, setSearchInput] = useState('');
     const [query, setQuery] = useState('');
     const [isSearchBarFocused, setIsSearchBarFocused] = useState(false);
     const entityRegistry = useEntityRegistry();
 
+    useDebounce(() => setQuery(searchInput), 200, [searchInput]);
     const { data, loading } = useGetAutoCompleteMultipleResultsQuery({
         variables: {
             input: {
@@ -74,25 +81,14 @@ function GlossarySearch() {
     return (
         <GlossarySearchWrapper>
             <ClickOutside onClickOutside={() => setIsSearchBarFocused(false)}>
-                <SearchBar
-                    initialQuery={query || ''}
-                    placeholderText="Search"
-                    suggestions={[]}
-                    hideRecommendations
-                    style={{ padding: 9 }}
-                    inputStyle={{
-                        height: 30,
-                        fontSize: 10,
-                        fontWeight: 500,
-                        backgroundColor: ANTD_GRAY[3],
-                    }}
-                    textColor={ANTD_GRAY[10]}
-                    placeholderColor={REDESIGN_COLORS.PLACEHOLDER_PURPLE}
-                    onSearch={() => null}
-                    onQueryChange={(q) => setQuery(q)}
-                    entityRegistry={entityRegistry}
-                    onFocus={() => setIsSearchBarFocused(true)}
-                />
+                <InputWrapper>
+                    <SearchBar
+                        placeholder="Search"
+                        value={searchInput}
+                        onChange={setSearchInput}
+                        onFocus={() => setIsSearchBarFocused(true)}
+                    />
+                </InputWrapper>
                 {isSearchBarFocused && (loading || !!searchResults?.length) && (
                     <ResultsWrapper>
                         {loading && (
diff --git a/datahub-web-react/src/app/govern/structuredProperties/StructuredProperties.tsx b/datahub-web-react/src/app/govern/structuredProperties/StructuredProperties.tsx
index 06d610a8162e3..e5d0a62b2e5da 100644
--- a/datahub-web-react/src/app/govern/structuredProperties/StructuredProperties.tsx
+++ b/datahub-web-react/src/app/govern/structuredProperties/StructuredProperties.tsx
@@ -66,7 +66,7 @@ const StructuredProperties = () => {
                     <ButtonContainer>
                         <Button
                             disabled={!canEditProps}
-                            icon="Add"
+                            icon={{ icon: 'Add', source: 'material' }}
                             data-testid="structured-props-create-button"
                             onClick={() => {
                                 setIsDrawerOpen(true);
@@ -78,7 +78,12 @@ const StructuredProperties = () => {
                     </ButtonContainer>
                 </Tooltip>
             </HeaderContainer>
-            <SearchBar placeholder="Search" value={searchQuery} onChange={(value) => handleSearch(value)} />
+            <SearchBar
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(value) => handleSearch(value)}
+                width="272px"
+            />
             <TableContainer>
                 <StructuredPropsTable
                     searchQuery={searchQuery}
diff --git a/datahub-web-react/src/app/lineage/NodeColumnsHeader.tsx b/datahub-web-react/src/app/lineage/NodeColumnsHeader.tsx
index ea2ae4a1a6ee6..46bfc2e8653b6 100644
--- a/datahub-web-react/src/app/lineage/NodeColumnsHeader.tsx
+++ b/datahub-web-react/src/app/lineage/NodeColumnsHeader.tsx
@@ -1,8 +1,9 @@
+import { Icon } from '@components';
 import React, { useContext, useState } from 'react';
 import { Button, Input } from 'antd';
 import { Group } from '@visx/group';
 import styled from 'styled-components';
-import { DownOutlined, SearchOutlined, UpOutlined } from '@ant-design/icons';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { blue } from '@ant-design/colors';
 import { NodeData } from './types';
 import { getTitleHeight } from './utils/titleUtils';
@@ -106,7 +107,7 @@ export default function NodeColumnsHeader({ node, filterText, setFilterText }: P
                             )}
                             {!isSearchBarVisible && (
                                 <Button type="text" size="small" onClick={() => setIsSearchBarVisible(true)}>
-                                    <SearchOutlined />
+                                    <Icon icon="MagnifyingGlass" source="phosphor" />
                                 </Button>
                             )}
                         </foreignObject>
diff --git a/datahub-web-react/src/app/lineageV2/controls/SearchControl.tsx b/datahub-web-react/src/app/lineageV2/controls/SearchControl.tsx
index 5ce3d5b1ffe2e..3af11d043ed9e 100644
--- a/datahub-web-react/src/app/lineageV2/controls/SearchControl.tsx
+++ b/datahub-web-react/src/app/lineageV2/controls/SearchControl.tsx
@@ -93,9 +93,24 @@ export default function SearchControl() {
                                 {matchedNodes.length ? searchIndex + 1 : 0} / {matchedNodes.length}
                             </span>
                             <VerticalDivider margin={8} />
-                            <Button icon="KeyboardArrowUp" variant="outline" size="sm" onClick={prev} />
-                            <Button icon="KeyboardArrowDown" variant="outline" size="sm" onClick={next} />
-                            <Button icon="Close" variant="outline" size="sm" onClick={close} />
+                            <Button
+                                icon={{ icon: 'KeyboardArrowUp', source: 'material' }}
+                                variant="outline"
+                                size="sm"
+                                onClick={prev}
+                            />
+                            <Button
+                                icon={{ icon: 'KeyboardArrowDown', source: 'material' }}
+                                variant="outline"
+                                size="sm"
+                                onClick={next}
+                            />
+                            <Button
+                                icon={{ icon: 'Close', source: 'material' }}
+                                variant="outline"
+                                size="sm"
+                                onClick={close}
+                            />
                         </>
                     )
                 }
diff --git a/datahub-web-react/src/app/search/ViewAllSearchItem.tsx b/datahub-web-react/src/app/search/ViewAllSearchItem.tsx
index 208fe3c92146d..cbf438c3f5c47 100644
--- a/datahub-web-react/src/app/search/ViewAllSearchItem.tsx
+++ b/datahub-web-react/src/app/search/ViewAllSearchItem.tsx
@@ -1,7 +1,7 @@
+import { Icon } from '@components';
 import React from 'react';
 import styled from 'styled-components/macro';
 import { Typography } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
 
 const ExploreForEntity = styled.span`
     font-weight: light;
@@ -31,7 +31,7 @@ function ViewAllSearchItem({ searchTarget: searchText }: { searchTarget?: string
     return (
         <ViewAllContainer>
             <ExploreForEntity>
-                <SearchOutlined />
+                <Icon icon="MagnifyingGlass" source="phosphor" />
                 <ExploreForEntityText>
                     View all results for <Typography.Text strong>{searchText}</Typography.Text>
                 </ExploreForEntityText>
diff --git a/datahub-web-react/src/app/search/autoComplete/RecommendedOption.tsx b/datahub-web-react/src/app/search/autoComplete/RecommendedOption.tsx
index f4c31b18c99b2..9a63f9e67fc72 100644
--- a/datahub-web-react/src/app/search/autoComplete/RecommendedOption.tsx
+++ b/datahub-web-react/src/app/search/autoComplete/RecommendedOption.tsx
@@ -1,4 +1,4 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { Icon } from '@components';
 import React from 'react';
 import styled from 'styled-components/macro';
 import { SuggestionText } from './styledComponents';
@@ -22,7 +22,7 @@ interface Props {
 export default function RecommendedOption({ text }: Props) {
     return (
         <RecommendedOptionWrapper>
-            <SearchOutlined />
+            <Icon icon="MagnifyingGlass" source="phosphor" />
             <TextWrapper>{text}</TextWrapper>
         </RecommendedOptionWrapper>
     );
diff --git a/datahub-web-react/src/app/searchV2/ViewAllSearchItem.tsx b/datahub-web-react/src/app/searchV2/ViewAllSearchItem.tsx
index 208fe3c92146d..cbf438c3f5c47 100644
--- a/datahub-web-react/src/app/searchV2/ViewAllSearchItem.tsx
+++ b/datahub-web-react/src/app/searchV2/ViewAllSearchItem.tsx
@@ -1,7 +1,7 @@
+import { Icon } from '@components';
 import React from 'react';
 import styled from 'styled-components/macro';
 import { Typography } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
 
 const ExploreForEntity = styled.span`
     font-weight: light;
@@ -31,7 +31,7 @@ function ViewAllSearchItem({ searchTarget: searchText }: { searchTarget?: string
     return (
         <ViewAllContainer>
             <ExploreForEntity>
-                <SearchOutlined />
+                <Icon icon="MagnifyingGlass" source="phosphor" />
                 <ExploreForEntityText>
                     View all results for <Typography.Text strong>{searchText}</Typography.Text>
                 </ExploreForEntityText>
diff --git a/datahub-web-react/src/app/searchV2/autoComplete/RecommendedOption.tsx b/datahub-web-react/src/app/searchV2/autoComplete/RecommendedOption.tsx
index f4c31b18c99b2..9a63f9e67fc72 100644
--- a/datahub-web-react/src/app/searchV2/autoComplete/RecommendedOption.tsx
+++ b/datahub-web-react/src/app/searchV2/autoComplete/RecommendedOption.tsx
@@ -1,4 +1,4 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { Icon } from '@components';
 import React from 'react';
 import styled from 'styled-components/macro';
 import { SuggestionText } from './styledComponents';
@@ -22,7 +22,7 @@ interface Props {
 export default function RecommendedOption({ text }: Props) {
     return (
         <RecommendedOptionWrapper>
-            <SearchOutlined />
+            <Icon icon="MagnifyingGlass" source="phosphor" />
             <TextWrapper>{text}</TextWrapper>
         </RecommendedOptionWrapper>
     );

From 5dd67178a935b5c47c2d3d4d2d5a131974e31dec Mon Sep 17 00:00:00 2001
From: Andrew Sikowitz <andrew.sikowitz@acryl.io>
Date: Wed, 26 Feb 2025 15:39:13 -0800
Subject: [PATCH 2/2] cleaning up

---
 .../components/Button/Button.tsx              |  5 +++--
 .../components/ButtonIcon/IconButton.tsx      | 22 -------------------
 .../components/Input/Input.tsx                |  2 +-
 .../components/Input/types.ts                 |  6 ++---
 4 files changed, 6 insertions(+), 29 deletions(-)
 delete mode 100644 datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx

diff --git a/datahub-web-react/src/alchemy-components/components/Button/Button.tsx b/datahub-web-react/src/alchemy-components/components/Button/Button.tsx
index a0e91e4cda647..be171e92ab65a 100644
--- a/datahub-web-react/src/alchemy-components/components/Button/Button.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Button/Button.tsx
@@ -50,11 +50,12 @@ export const Button = ({
         );
     }
 
+    // Prefer `icon.size` over `size` for icon size
     return (
         <ButtonBase {...styleProps} {...props}>
-            {icon && iconPosition === 'left' && <Icon {...icon} size={icon.size || size} />}
+            {icon && iconPosition === 'left' && <Icon size={size} {...icon} />}
             {!isCircle && children}
-            {icon && iconPosition === 'right' && <Icon {...icon} size={icon.size || size} />}
+            {icon && iconPosition === 'right' && <Icon size={size} {...icon} />}
         </ButtonBase>
     );
 };
diff --git a/datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx b/datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx
deleted file mode 100644
index 15513421f2d7c..0000000000000
--- a/datahub-web-react/src/alchemy-components/components/ButtonIcon/IconButton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button, ButtonProps, Icon, IconProps } from '@components';
-import React from 'react';
-
-// const StyledButton = styled`
-//     display: flex;
-//     align-items: center;
-//     height: fit-content;
-//     padding: 4px;
-// `;
-
-interface Props {
-    buttonProps: ButtonProps;
-    iconProps: IconProps;
-}
-
-export default function IconButton({ buttonProps, iconProps }: Props) {
-    return (
-        <Button variant="text" {...buttonProps}>
-            <Icon {...iconProps} />
-        </Button>
-    );
-}
diff --git a/datahub-web-react/src/alchemy-components/components/Input/Input.tsx b/datahub-web-react/src/alchemy-components/components/Input/Input.tsx
index 3db152d7fd216..138476f2ad606 100644
--- a/datahub-web-react/src/alchemy-components/components/Input/Input.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Input/Input.tsx
@@ -76,7 +76,7 @@ export const Input = ({
                 </Label>
             )}
             <InputContainer {...inputBaseProps}>
-                {icon && <SearchIcon {...icon} size="xl" />}
+                {icon && <SearchIcon size="xl" {...icon} />}
                 <InputField
                     value={value}
                     onChange={(e) => setValue?.(e.target.value)}
diff --git a/datahub-web-react/src/alchemy-components/components/Input/types.ts b/datahub-web-react/src/alchemy-components/components/Input/types.ts
index 28e5429563d0c..a750ce675637e 100644
--- a/datahub-web-react/src/alchemy-components/components/Input/types.ts
+++ b/datahub-web-react/src/alchemy-components/components/Input/types.ts
@@ -1,14 +1,12 @@
-import { IconSource } from '@components/components/Icon/types';
+import { IconProps } from '@components/components/Icon/types';
 import React, { InputHTMLAttributes } from 'react';
 
-import { IconNames, MaterialIconVariant } from '../Icon';
-
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     value?: string | number | readonly string[] | undefined;
     setValue?: React.Dispatch<React.SetStateAction<string>>;
     label: string;
     placeholder?: string;
-    icon?: { icon: IconNames; source: IconSource; variant?: MaterialIconVariant };
+    icon?: IconProps;
     error?: string;
     warning?: string;
     isSuccess?: boolean;