diff --git a/src-docs/src/views/beacon/beacon_example.js b/src-docs/src/views/beacon/beacon_example.js
index ce381dc9db5..c02abbb582f 100644
--- a/src-docs/src/views/beacon/beacon_example.js
+++ b/src-docs/src/views/beacon/beacon_example.js
@@ -6,6 +6,8 @@ import { GuideSectionTypes } from '../../components';
 
 import { EuiBeacon, EuiText } from '../../../../src/components';
 
+import { beaconConfig } from './playground';
+
 import Beacon from './beacon';
 const beaconSource = require('!!raw-loader!./beacon');
 const beaconHtml = renderToHtml(Beacon);
@@ -38,4 +40,5 @@ export const BeaconExample = {
       demo: <Beacon />,
     },
   ],
+  playground: beaconConfig,
 };
diff --git a/src-docs/src/views/beacon/playground.js b/src-docs/src/views/beacon/playground.js
new file mode 100644
index 00000000000..d740b6c408a
--- /dev/null
+++ b/src-docs/src/views/beacon/playground.js
@@ -0,0 +1,31 @@
+import { PropTypes } from 'react-view';
+import { EuiBeacon } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const beaconConfig = () => {
+  const docgenInfo = Array.isArray(EuiBeacon.__docgenInfo)
+    ? EuiBeacon.__docgenInfo[0]
+    : EuiBeacon.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.size = {
+    ...propsToUse.size,
+    type: PropTypes.Number,
+    defaultValue: 12,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiBeacon',
+      props: propsToUse,
+      scope: {
+        EuiBeacon,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiBeacon'],
+        },
+      },
+    },
+  };
+};