diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index b61815f4bf4..53037c6e388 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/src-docs/src/components/guide_section/guide_section.js
@@ -158,14 +158,28 @@ export class GuideSection extends Component {
       return;
     }
 
-    return [
-      <Fragment key="snippet">
-        <EuiSpacer size="m" />
-        <EuiCodeBlock language="html" fontSize="m" paddingSize="m" isCopyable>
-          {snippet}
-        </EuiCodeBlock>
-      </Fragment>
-    ];
+    let snippetCode;
+    if (typeof snippet === 'string') {
+      snippetCode = (
+        <Fragment key="snippet">
+          <EuiSpacer size="m" />
+          <EuiCodeBlock language="html" fontSize="m" paddingSize="m" isCopyable>
+            {snippet}
+          </EuiCodeBlock>
+        </Fragment>
+      );
+    } else {
+      snippetCode = snippet.map((snip, index) => (
+        <Fragment key={`snippet${index}`}>
+          <EuiSpacer size="m" />
+          <EuiCodeBlock language="html" fontSize="m" paddingSize="m" isCopyable>
+            {snip}
+          </EuiCodeBlock>
+        </Fragment>
+      ));
+    }
+
+    return snippetCode;
   }
 
   renderPropsForComponent = (componentName, component) => {
@@ -413,7 +427,10 @@ GuideSection.propTypes = {
   title: PropTypes.string,
   id: PropTypes.string,
   source: PropTypes.array,
-  snippet: PropTypes.string,
+  snippet: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
   children: PropTypes.any,
   toggleTheme: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
index 9a67d8af5b4..f2434a8059e 100644
--- a/src-docs/src/views/icon/icon_example.js
+++ b/src-docs/src/views/icon/icon_example.js
@@ -31,17 +31,15 @@ const iconsSnippet = `<EuiIcon type="alert" />`;
 
 import Tokens from './tokens';
 const tokensSource = require('!!raw-loader!./tokens');
-const tokensSnippet = `<EuiToken type="tokenAnnotation" />
-
-<EuiToken
+const tokensSnippet = [`<EuiToken type="tokenAnnotation" />`,
+  `<EuiToken
   iconType="visMapCoordinate"
   displayOptions={{
     color: 'tokenTint05',
     shape: 'circle',
   }}
-/>
-
-<EuiToken
+/>`,
+  `<EuiToken
   iconType="tokenElement"
   size="l"
   displayOptions={{
@@ -49,7 +47,7 @@ const tokensSnippet = `<EuiToken type="tokenAnnotation" />
     shape: 'rectangle',
     hideBorder: true
   }}
-/>`;
+/>`];
 
 
 import Apps from './apps';
@@ -74,23 +72,18 @@ const iconSizesSnippet = `<EuiIcon type="logoElasticStack" size="xl" />`;
 
 import IconColors from './icon_colors';
 const iconColorsSource = require('!!raw-loader!./icon_colors');
-const iconColorsSnippet = `<EuiIcon type="brush" color="primary" />
-
-<EuiIcon type="brush" color="#F98510" />`;
+const iconColorsSnippet = [`<EuiIcon type="brush" color="primary" />`,
+  `<EuiIcon type="brush" color="#F98510" />`];
 
 import Accessibility from './accessibility';
 const accessibilitySource = require('!!raw-loader!./accessibility');
 
 import IconTypes from './icon_types';
 const iconTypesSource = require('!!raw-loader!./icon_types');
-const iconTypesSnippet = `<EuiIcon type="logoElastic" size="xl" />
-
-<EuiIcon type={reactSVGElement} size="xl" />
-
-<EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg" size="xl" />
-
-<EuiButton iconType={reactSVGElement}>Works in other components too</EuiButton>
-`;
+const iconTypesSnippet = [`<EuiIcon type="logoElastic" size="xl" />`,
+  `<EuiIcon type={reactSVGElement} size="xl" />`,
+  `<EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg" size="xl" />`,
+  `<EuiButton iconType={reactSVGElement}>Works in other components too</EuiButton>`];
 
 export const IconExample = {
   title: 'Icons',