diff --git a/src-docs/src/services/playground/iconValidator.js b/src-docs/src/services/playground/iconValidator.js
new file mode 100644
index 00000000000..5fa54394c43
--- /dev/null
+++ b/src-docs/src/services/playground/iconValidator.js
@@ -0,0 +1,18 @@
+import { iconTypes } from '../../views/icon/icons';
+import { mapOptions } from './mapOptions';
+import { PropTypes } from 'react-view';
+
+const iconOptions = mapOptions(iconTypes);
+
+export const iconValidator = prop => {
+  const newProp = {
+    ...prop,
+    value: undefined,
+    type: PropTypes.String,
+    custom: {
+      ...prop.custom,
+      validator: val => iconOptions[val],
+    },
+  };
+  return newProp;
+};
diff --git a/src-docs/src/services/playground/index.js b/src-docs/src/services/playground/index.js
index 8ca0fab14f7..40b39240c92 100644
--- a/src-docs/src/services/playground/index.js
+++ b/src-docs/src/services/playground/index.js
@@ -2,3 +2,4 @@ export { default as playgroundCreator } from './playground';
 export { default as Knobs } from './knobs';
 export { default as propUtilityForPlayground } from './props';
 export { mapOptions } from './mapOptions';
+export { iconValidator } from './iconValidator';
diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js
index 18163a71828..91bbd4d1479 100644
--- a/src-docs/src/views/badge/playground.js
+++ b/src-docs/src/views/badge/playground.js
@@ -6,13 +6,10 @@ import {
 } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
-  mapOptions,
+  iconValidator,
 } from '../../services/playground';
-import { iconTypes } from '../icon/icons';
 import * as t from '@babel/types';
 
-const iconOptions = mapOptions(iconTypes);
-
 export const badgeConfig = () => {
   const docgenInfo = Array.isArray(EuiBadge.__docgenInfo)
     ? EuiBadge.__docgenInfo[0]
@@ -70,15 +67,7 @@ export const badgeConfig = () => {
     type: PropTypes.String,
   };
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => iconOptions[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   propsToUse.color = {
     ...propsToUse.color,
@@ -132,15 +121,7 @@ export const betaBadgeConfig = () => {
     type: PropTypes.String,
   };
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => iconOptions[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   return {
     config: {
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index 5ab5e36813a..bb61586582e 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -2,26 +2,16 @@ import { PropTypes } from 'react-view';
 import { EuiButton } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
-  mapOptions,
+  iconValidator,
 } from '../../services/playground';
-import { iconTypes } from '../icon/icons';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiButton.__docgenInfo)
     ? EuiButton.__docgenInfo[0]
     : EuiButton.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
-  const options = mapOptions(iconTypes);
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => options[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   propsToUse.children = {
     value: 'Button',
diff --git a/src-docs/src/views/call_out/playground.js b/src-docs/src/views/call_out/playground.js
index a1e641c540f..d388ef32bd5 100644
--- a/src-docs/src/views/call_out/playground.js
+++ b/src-docs/src/views/call_out/playground.js
@@ -2,26 +2,16 @@ import { PropTypes } from 'react-view';
 import { EuiCallOut, EuiText } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
-  mapOptions,
+  iconValidator,
 } from '../../services/playground';
-import { iconTypes } from '../icon/icons';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiCallOut.__docgenInfo)
     ? EuiCallOut.__docgenInfo[0]
     : EuiCallOut.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
-  const options = mapOptions(iconTypes);
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => options[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   propsToUse.title = {
     ...propsToUse.title,