diff --git a/src/plugins/kibana_react/public/icon/__snapshots__/field_icon.test.tsx.snap b/src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap
similarity index 100%
rename from src/plugins/kibana_react/public/icon/__snapshots__/field_icon.test.tsx.snap
rename to src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap
diff --git a/src/plugins/kibana_react/public/icon/field_icon.test.tsx b/src/plugins/kibana_react/public/field_icon/field_icon.test.tsx
similarity index 100%
rename from src/plugins/kibana_react/public/icon/field_icon.test.tsx
rename to src/plugins/kibana_react/public/field_icon/field_icon.test.tsx
diff --git a/src/plugins/kibana_react/public/icon/field_icon.tsx b/src/plugins/kibana_react/public/field_icon/field_icon.tsx
similarity index 97%
rename from src/plugins/kibana_react/public/icon/field_icon.tsx
rename to src/plugins/kibana_react/public/field_icon/field_icon.tsx
index 35b8ceafc50806..f9bdf3a25adaa0 100644
--- a/src/plugins/kibana_react/public/icon/field_icon.tsx
+++ b/src/plugins/kibana_react/public/field_icon/field_icon.tsx
@@ -48,7 +48,7 @@ const { colors } = palettes.euiPaletteColorBlind;
 // defaultIcon => a unknown datatype
 const defaultIcon = { icon: 'questionInCircle', color: colors[0] };
 
-const typeToEuiIconMap: Partial<Record<string, IconMapEntry>> = {
+export const typeToEuiIconMap: Partial<Record<string, IconMapEntry>> = {
   boolean: { icon: 'invert', color: colors[5] },
   // icon for an index pattern mapping conflict in discover
   conflict: { icon: 'alert', color: colors[8] },
diff --git a/src/plugins/kibana_react/public/icon/index.ts b/src/plugins/kibana_react/public/field_icon/index.ts
similarity index 100%
rename from src/plugins/kibana_react/public/icon/index.ts
rename to src/plugins/kibana_react/public/field_icon/index.ts
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index 1c06229078b3d5..cd2ae89b05b5db 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -22,4 +22,4 @@ export * from './exit_full_screen_button';
 export * from './context';
 export * from './overlays';
 export * from './ui_settings';
-export * from './icon';
+export * from './field_icon';
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
index 30796eeda26f04..3adec2d4e56021 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
@@ -215,7 +215,7 @@ export function FieldEditor({
                       const { type, label } = option;
                       return (
                         <span className={contentClassName}>
-                          <FieldIcon type={type!} size={'m'} useColor />{' '}
+                          <FieldIcon type={type!} size="m" useColor />{' '}
                           <EuiHighlight search={searchValue}>{label}</EuiHighlight>
                         </span>
                       );
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
index e57d55718bb2a4..5df94ac873bc17 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
@@ -120,7 +120,7 @@ function toOptions(
 ): Array<{ label: string; checked?: 'on' | 'off'; prepend?: ReactNode }> {
   return fields.map(field => ({
     label: field.name,
-    prepend: <FieldIcon type={field.type} size={'m'} useColor />,
+    prepend: <FieldIcon type={field.type} size="m" useColor />,
     checked: field.selected ? 'on' : undefined,
   }));
 }
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/__snapshots__/lens_field_icon.test.tsx.snap b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/__snapshots__/lens_field_icon.test.tsx.snap
index 6bce1aa4481881..5593a1af00d70c 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/__snapshots__/lens_field_icon.test.tsx.snap
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/__snapshots__/lens_field_icon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`LensFieldIcon renders properly 1`] = `
 <FieldIcon
-  className="lnsFieldListPanel__fieldIcon lnsFieldListPanel__fieldIcon--date"
+  className="lnsFieldListPanel__fieldIcon"
   size="m"
   type="date"
   useColor={true}
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx
index 9ba2b910637805..7441083550706d 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx
@@ -11,9 +11,19 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { LensFieldIcon } from './lens_field_icon';
+import { LensFieldIcon, getColorForDataType } from './lens_field_icon';
 
 test('LensFieldIcon renders properly', () => {
   const component = shallow(<LensFieldIcon type={'date'} />);
   expect(component).toMatchSnapshot();
 });
+
+test('LensFieldIcon getColorForDataType for a valid type', () => {
+  const color = getColorForDataType('date');
+  expect(color).toEqual('#B0916F');
+});
+
+test('LensFieldIcon getColorForDataType for an invalid type', () => {
+  const color = getColorForDataType('invalid');
+  expect(color).toEqual('#1EA593');
+});
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx
index 000be2ddf4d49c..1773022bf6e1a0 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx
@@ -5,39 +5,18 @@
  */
 
 import React from 'react';
-import { ICON_TYPES, palettes } from '@elastic/eui';
-import classNames from 'classnames';
-import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';
+import { palettes } from '@elastic/eui';
+import { FieldIcon, typeToEuiIconMap } from '../../../../../../src/plugins/kibana_react/public';
 import { DataType } from '../types';
 
-function stringToNum(s: string) {
-  return Array.from(s).reduce((acc, ch) => acc + ch.charCodeAt(0), 1);
-}
-
-function getIconForDataType(dataType: string) {
-  const icons: Partial<Record<string, UnwrapArray<typeof ICON_TYPES>>> = {
-    boolean: 'invert',
-    date: 'calendar',
-    geo_point: 'globe',
-    ip: 'storage',
-  };
-  return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'document';
-}
-
 export function getColorForDataType(type: string) {
-  const iconType = getIconForDataType(type);
-  const { colors } = palettes.euiPaletteColorBlind;
-  const colorIndex = stringToNum(iconType) % colors.length;
-  return colors[colorIndex];
+  const iconMap = typeToEuiIconMap[type];
+  if (iconMap) {
+    return iconMap.color;
+  }
+  return palettes.euiPaletteColorBlind.colors[0];
 }
 
-export type UnwrapArray<T> = T extends Array<infer P> ? P : T;
-
 export function LensFieldIcon({ type }: { type: DataType }) {
-  const classes = classNames(
-    'lnsFieldListPanel__fieldIcon',
-    `lnsFieldListPanel__fieldIcon--${type}`
-  );
-
-  return <FieldIcon type={type} className={classes} size={'m'} useColor />;
+  return <FieldIcon type={type} className="lnsFieldListPanel__fieldIcon" size="m" useColor />;
 }