diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b1a4b321035..f31fb768d316 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+**Breaking changes**
+
+- `EuiFormControlLayout` no longer has `onClear`, `iconSide`, or `onIconClick` props. Instead of `onClear` it now accepts a `clear` object of the shape `{ onClick }`. Instead of the icon props, it now accepts a single `icon` prop which be either a string or an object of the shape `{ type, side, onClick }`. ([#866](https://github.com/elastic/eui/pull/866))
+
 **Bug fixes**
 
+- `EuiComboBox` is no longer a focus trap and the clear button is now keyboard-accessible ([#866](https://github.com/elastic/eui/pull/866))
 - `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` now look and behave disabled when `isDisabled={true}` ([#862](https://github.com/elastic/eui/pull/862))
 - `EuiGlobalToastList` no longer triggers `Uncaught TypeError: _this.callback is not a function`  ([#865](https://github.com/elastic/eui/pull/865))
 - `EuiGlobalToastList` checks to see if it has dismissed a toast before re-dismissing it ([#868](https://github.com/elastic/eui/pull/868))
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
index 9d79a33edc78..c4dfbe24c958 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.js.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -10,6 +10,7 @@ exports[`EuiComboBox is rendered 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    clearButtonRef={[Function]}
     hasSelectedOptions={false}
     inputRef={[Function]}
     isListOpen={false}
@@ -38,6 +39,7 @@ exports[`props isClearable is false with selectedOptions 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    clearButtonRef={[Function]}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
@@ -74,6 +76,7 @@ exports[`props isClearable is false without selectedOptions 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    clearButtonRef={[Function]}
     hasSelectedOptions={false}
     inputRef={[Function]}
     isListOpen={false}
@@ -101,6 +104,7 @@ exports[`props isDisabled 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    clearButtonRef={[Function]}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isDisabled={true}
@@ -135,6 +139,7 @@ exports[`props options 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    clearButtonRef={[Function]}
     hasSelectedOptions={false}
     inputRef={[Function]}
     isListOpen={false}
@@ -163,6 +168,7 @@ exports[`props selectedOptions 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    clearButtonRef={[Function]}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
@@ -200,6 +206,7 @@ exports[`props singleSelection 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    clearButtonRef={[Function]}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
index 3fd85cfa6bc3..3d9ef95c8827 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.js
@@ -138,25 +138,37 @@ export class EuiComboBox extends Component {
 
   tabAway = amount => {
     const tabbableItems = tabbable(document);
-    const comboBoxIndex = tabbableItems.indexOf(this.searchInput);
 
-    // Wrap to last tabbable if tabbing backwards.
-    if (amount < 0) {
-      if (comboBoxIndex === 0) {
-        tabbableItems[tabbableItems.length - 1].focus();
-        return;
+    if (document.activeElement === this.searchInput) {
+      const searchInputIndex = tabbableItems.indexOf(this.searchInput);
+
+      // Wrap to last tabbable if tabbing backwards.
+      if (amount < 0) {
+        if (searchInputIndex === 0) {
+          tabbableItems[tabbableItems.length - 1].focus();
+          return;
+        }
       }
+
+      // Otherwise tab to the next adjacent item.
+      tabbableItems[searchInputIndex + amount].focus();
+      return;
     }
 
-    // Wrap to first tabbable if tabbing forwards.
-    if (amount > 0) {
-      if (comboBoxIndex === tabbableItems.length - 1) {
-        tabbableItems[0].focus();
-        return;
+    if (document.activeElement === this.clearButton) {
+      const clearButtonIndex = tabbableItems.indexOf(this.clearButton);
+
+      // Wrap to first tabbable if tabbing forwards.
+      if (amount > 0) {
+        if (clearButtonIndex === tabbableItems.length - 1) {
+          tabbableItems[0].focus();
+          return;
+        }
       }
-    }
 
-    tabbableItems[comboBoxIndex + amount].focus();
+      // Otherwise tab to the next adjacent item.
+      tabbableItems[clearButtonIndex + amount].focus();
+    }
   };
 
   incrementActiveOptionIndex = throttle(amount => {
@@ -290,14 +302,10 @@ export class EuiComboBox extends Component {
   };
 
   onFocus = () => {
-    document.addEventListener('click', this.onDocumentFocusChange);
-    document.addEventListener('focusin', this.onDocumentFocusChange);
     this.openList();
   }
 
   onBlur = () => {
-    document.removeEventListener('click', this.onDocumentFocusChange);
-    document.removeEventListener('focusin', this.onDocumentFocusChange);
     this.closeList();
   }
 
@@ -309,6 +317,7 @@ export class EuiComboBox extends Component {
       || this.optionsList === event.target
       || this.optionsList && this.optionsList.contains(event.target)
     ) {
+      this.onFocus();
       return;
     }
 
@@ -454,8 +463,14 @@ export class EuiComboBox extends Component {
     this.options[index] = node;
   };
 
+  clearButtonRef = node => {
+    this.clearButton = node;
+  };
+
   componentDidMount() {
     this._isMounted = true;
+    document.addEventListener('click', this.onDocumentFocusChange);
+    document.addEventListener('focusin', this.onDocumentFocusChange);
 
     // TODO: This will need to be called once the actual stylesheet loads.
     setTimeout(() => {
@@ -593,6 +608,7 @@ export class EuiComboBox extends Component {
           onOpenListClick={this.onOpenListClick}
           singleSelection={singleSelection}
           isDisabled={isDisabled}
+          clearButtonRef={this.clearButtonRef}
         />
 
         {optionsList}
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.js b/src/components/combo_box/combo_box_input/combo_box_input.js
index 0f181f51e19a..d26fd2e1aead 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.js
+++ b/src/components/combo_box/combo_box_input/combo_box_input.js
@@ -29,6 +29,7 @@ export class EuiComboBoxInput extends Component {
     onOpenListClick: PropTypes.func.isRequired,
     singleSelection: PropTypes.bool,
     isDisabled: PropTypes.bool,
+    clearButtonRef: PropTypes.func,
   }
 
   constructor(props) {
@@ -88,6 +89,7 @@ export class EuiComboBoxInput extends Component {
       onOpenListClick,
       singleSelection,
       isDisabled,
+      clearButtonRef,
     } = this.props;
 
     const pills = selectedOptions.map((option) => {
@@ -147,14 +149,24 @@ export class EuiComboBoxInput extends Component {
     const clickProps = {};
 
     if (!isDisabled) {
-      clickProps.onClear = hasSelectedOptions ? onClear : undefined;
-      clickProps.onIconClick = isListOpen ? undefined : onOpenListClick;
+      clickProps.clear = {
+        onClick: hasSelectedOptions ? onClear : undefined,
+        ref: clearButtonRef,
+      };
     }
 
+    const icon = {
+      type: 'arrowDown',
+      side: 'right',
+      onClick: isListOpen && !isDisabled ? undefined : onOpenListClick,
+      // We want to remove this from the tab order because you can open the combo box by tabbing
+      // to it already.
+      tabIndex: '-1',
+    };
+
     return (
       <EuiFormControlLayout
-        icon="arrowDown"
-        iconSide="right"
+        icon={icon}
         {...clickProps}
       >
         <div
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.js.snap b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
index 3523f318baf9..7bd61764ea99 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.js.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
@@ -9,7 +9,6 @@ exports[`EuiDatePicker is rendered 1`] = `
       compressed={false}
       fullWidth={false}
       icon="calendar"
-      iconSide="left"
       isLoading={false}
     >
       <EuiValidatableControl>
diff --git a/src/components/form/field_number/field_number.js b/src/components/form/field_number/field_number.js
index a75471e455af..eba2f0885b97 100644
--- a/src/components/form/field_number/field_number.js
+++ b/src/components/form/field_number/field_number.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {
+  ICON_SIDES,
   EuiFormControlLayout,
 } from '../form_control_layout';
 
@@ -81,7 +82,14 @@ EuiFieldNumber.propTypes = {
   max: PropTypes.number,
   step: PropTypes.number,
   value: numberOrEmptyString,
-  icon: PropTypes.string,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      type: PropTypes.string,
+      side: PropTypes.oneOf(ICON_SIDES),
+      onClick: PropTypes.func,
+    }),
+  ]),
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,
diff --git a/src/components/form/field_number/field_number.test.js b/src/components/form/field_number/field_number.test.js
index 41b16cb32a52..15158c1d8b10 100644
--- a/src/components/form/field_number/field_number.test.js
+++ b/src/components/form/field_number/field_number.test.js
@@ -4,7 +4,13 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiFieldNumber } from './field_number';
 
-jest.mock('../form_control_layout', () => ({ EuiFormControlLayout: 'eui-form-control-layout' }));
+jest.mock('../form_control_layout', () => {
+  const formControlLayout = require.requireActual('../form_control_layout')
+  return {
+    ...formControlLayout,
+    EuiFormControlLayout: 'eui-form-control-layout',
+  }
+});
 jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' }));
 
 describe('EuiFieldNumber', () => {
diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.js
index 7fb91cd72f91..361ebfc87e66 100644
--- a/src/components/form/field_text/field_text.js
+++ b/src/components/form/field_text/field_text.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {
+  ICON_SIDES,
   EuiFormControlLayout,
 } from '../form_control_layout';
 
@@ -61,7 +62,14 @@ EuiFieldText.propTypes = {
   id: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.string,
-  icon: PropTypes.string,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      type: PropTypes.string,
+      side: PropTypes.oneOf(ICON_SIDES),
+      onClick: PropTypes.func,
+    }),
+  ]),
   isInvalid: PropTypes.bool,
   inputRef: PropTypes.func,
   fullWidth: PropTypes.bool,
diff --git a/src/components/form/field_text/field_text.test.js b/src/components/form/field_text/field_text.test.js
index d0b7367c8518..1f04f7db0581 100644
--- a/src/components/form/field_text/field_text.test.js
+++ b/src/components/form/field_text/field_text.test.js
@@ -4,7 +4,13 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiFieldText } from './field_text';
 
-jest.mock('../form_control_layout', () => ({ EuiFormControlLayout: 'eui-form-control-layout' }));
+jest.mock('../form_control_layout', () => {
+  const formControlLayout = require.requireActual('../form_control_layout')
+  return {
+    ...formControlLayout,
+    EuiFormControlLayout: 'eui-form-control-layout',
+  }
+});
 jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' }));
 
 describe('EuiFieldText', () => {
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
index a010abb1aaa8..f6a6ac04bcb1 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
@@ -2,19 +2,52 @@
 
 exports[`EuiFormControlLayout is rendered 1`] = `
 <div
-  class="euiFormControlLayout"
+  aria-label="aria-label"
+  class="euiFormControlLayout testClass1 testClass2"
+  data-test-subj="test subject string"
 >
   <input />
 </div>
 `;
 
+exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
+<div
+  class="euiFormControlLayout"
+>
+  <button
+    class="euiFormControlLayout__clear customClass"
+    data-test-subj="clearButton"
+  >
+    <svg
+      class="euiIcon euiIcon--medium euiFormControlLayout__clearIcon"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xlink="http://www.w3.org/1999/xlink"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <path
+          d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+          id="cross-a"
+        />
+      </defs>
+      <use
+        fill-rule="nonzero"
+        href="#cross-a"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
 exports[`EuiFormControlLayout props fullWidth is rendered 1`] = `
 <div
   class="euiFormControlLayout euiFormControlLayout--fullWidth"
 />
 `;
 
-exports[`EuiFormControlLayout props icon is rendered 1`] = `
+exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
 <div
   class="euiFormControlLayout"
 >
@@ -40,7 +73,34 @@ exports[`EuiFormControlLayout props icon is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiFormControlLayout props iconSide left is rendered 1`] = `
+exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
+<div
+  class="euiFormControlLayout"
+>
+  <svg
+    aria-hidden="true"
+    class="euiIcon euiIcon--medium euiFormControlLayout__icon customClass"
+    data-test-subj="myIcon"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fill-rule="evenodd"
+    >
+      <path
+        d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+      />
+      <path
+        d="M7 6h1v5H7zM7 12h1v1H7z"
+      />
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
 <div
   class="euiFormControlLayout"
 >
@@ -66,7 +126,7 @@ exports[`EuiFormControlLayout props iconSide left is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiFormControlLayout props iconSide right is rendered 1`] = `
+exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
 <div
   class="euiFormControlLayout"
 >
diff --git a/src/components/form/form_control_layout/form_control_layout.js b/src/components/form/form_control_layout/form_control_layout.js
index 88fef6766dfe..6146efb30050 100644
--- a/src/components/form/form_control_layout/form_control_layout.js
+++ b/src/components/form/form_control_layout/form_control_layout.js
@@ -15,13 +15,12 @@ export const ICON_SIDES = Object.keys(iconSideToClassNameMap);
 export const EuiFormControlLayout = ({
   children,
   icon,
+  clear,
   fullWidth,
-  onClear,
-  iconSide,
   isLoading,
-  onIconClick,
   compressed,
-  className
+  className,
+  ...rest
 }) => {
 
   const classes = classNames(
@@ -42,11 +41,26 @@ export const EuiFormControlLayout = ({
 
   let optionalIcon;
   if (icon) {
+    // Normalize the icon to an object if it's a string.
+    const iconProps = typeof icon === 'string' ? {
+      type: icon,
+    } : icon;
+
+    const {
+      className: iconClassName,
+      type: iconType,
+      side: iconSide = 'left',
+      onClick: onIconClick,
+      ref: iconRef,
+      ...iconRest
+    } = iconProps
+
     const iconClasses = classNames(
       'euiFormControlLayout__icon',
       iconSideToClassNameMap[iconSide],
+      iconClassName,
       {
-        'euiFormControlLayout__iconButton': onIconClick
+        'euiFormControlLayout__iconButton': onIconClick,
       },
     );
 
@@ -55,9 +69,11 @@ export const EuiFormControlLayout = ({
         <button
           className={iconClasses}
           onClick={onIconClick}
+          ref={iconRef}
+          {...iconRest}
         >
           <EuiIcon
-            type={icon}
+            type={iconType}
           />
         </button>
       )
@@ -66,18 +82,28 @@ export const EuiFormControlLayout = ({
         <EuiIcon
           aria-hidden="true"
           className={iconClasses}
-          type={icon}
+          type={iconType}
+          {...iconRest}
         />
       );
     }
   }
 
   let optionalClear;
-  if (onClear) {
+  if (clear) {
+    const {
+      className: clearClassName,
+      onClick: onClearClick,
+      ...clearRest
+    } = clear;
+
+    const clearClasses = classNames('euiFormControlLayout__clear', clearClassName);
+
     optionalClear = (
       <button
-        className="euiFormControlLayout__clear"
-        onClick={onClear}
+        className={clearClasses}
+        onClick={onClearClick}
+        {...clearRest}
       >
         <EuiIcon
           className="euiFormControlLayout__clearIcon"
@@ -88,7 +114,7 @@ export const EuiFormControlLayout = ({
   }
 
   return (
-    <div className={classes}>
+    <div className={classes} {...rest}>
       {children}
       {optionalIcon}
       {optionalClear}
@@ -99,18 +125,24 @@ export const EuiFormControlLayout = ({
 
 EuiFormControlLayout.propTypes = {
   children: PropTypes.node,
-  icon: PropTypes.string,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      type: PropTypes.string,
+      side: PropTypes.oneOf(ICON_SIDES),
+      onClick: PropTypes.func,
+    }),
+  ]),
+  clear: PropTypes.shape({
+    onClick: PropTypes.func,
+  }),
   fullWidth: PropTypes.bool,
-  iconSide: PropTypes.oneOf(ICON_SIDES),
   isLoading: PropTypes.bool,
-  onClear: PropTypes.func,
-  onIconClick: PropTypes.func,
   className: PropTypes.string,
   compressed: PropTypes.bool,
 };
 
 EuiFormControlLayout.defaultProps = {
-  iconSide: 'left',
   isLoading: false,
   compressed: false,
 };
diff --git a/src/components/form/form_control_layout/form_control_layout.test.js b/src/components/form/form_control_layout/form_control_layout.test.js
index a5d547d525fe..33749c6677d5 100644
--- a/src/components/form/form_control_layout/form_control_layout.test.js
+++ b/src/components/form/form_control_layout/form_control_layout.test.js
@@ -1,5 +1,11 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
+import sinon from 'sinon';
+
+import {
+  findTestSubject,
+  requiredProps,
+} from '../../../test';
 
 import {
   EuiFormControlLayout,
@@ -11,34 +17,105 @@ jest.mock('../../', () => ({ EuiIcon: 'eui_icon', EuiLoadingSpinner: 'eui_loadin
 describe('EuiFormControlLayout', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiFormControlLayout>
+      <EuiFormControlLayout {...requiredProps}>
         <input />
       </EuiFormControlLayout>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   describe('props', () => {
-    test('icon is rendered', () => {
-      const component = render(
-        <EuiFormControlLayout icon="alert"/>
-      );
+    describe('icon', () => {
+      describe('is rendered', () => {
+        test('as a string', () => {
+          const component = render(
+            <EuiFormControlLayout icon="alert"/>
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+
+        test('as an object', () => {
+          const icon = {
+            type: 'alert',
+            className: 'customClass',
+            'data-test-subj': 'myIcon',
+          };
+
+          const component = render(
+            <EuiFormControlLayout icon={icon}/>
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+
+      describe('side', () => {
+        ICON_SIDES.forEach(side => {
+          test(`${side} is rendered`, () => {
+            const icon = {
+              type: 'alert',
+              side,
+            };
 
-      expect(component)
-        .toMatchSnapshot();
+            const component = render(
+              <EuiFormControlLayout icon={icon} />
+            );
+
+            expect(component).toMatchSnapshot();
+          });
+        });
+      });
+
+      describe('onClick', () => {
+        test('is called when clicked', () => {
+          const icon = {
+            type: 'alert',
+            onClick: sinon.spy(),
+            'data-test-subj': 'myIcon',
+          };
+
+          const component = mount(
+            <EuiFormControlLayout icon={icon}/>
+          );
+
+          const closeButton = findTestSubject(component, 'myIcon');
+          closeButton.simulate('click');
+          expect(icon.onClick.called).toBe(true);
+        });
+      });
     });
 
-    describe('iconSide', () => {
-      ICON_SIDES.forEach(side => {
-        test(`${side} is rendered`, () => {
+    describe('clear', () => {
+      describe('onClick', () => {
+        test('is rendered', () => {
+          const clear = {
+            onClick: () => {},
+            className: 'customClass',
+            'data-test-subj': 'clearButton',
+          };
+
           const component = render(
-            <EuiFormControlLayout icon="alert" iconSide={side}/>
+            <EuiFormControlLayout clear={clear}/>
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+
+        test('is called when clicked', () => {
+          const clear = {
+            onClick: sinon.spy(),
+            'data-test-subj': 'clearButton',
+          };
+
+          const component = mount(
+            <EuiFormControlLayout clear={clear}/>
           );
 
-          expect(component)
-            .toMatchSnapshot();
+          const closeButton = findTestSubject(component, 'clearButton');
+          closeButton.simulate('click');
+          expect(clear.onClick.called).toBe(true);
         });
       });
     });
@@ -48,8 +125,7 @@ describe('EuiFormControlLayout', () => {
         <EuiFormControlLayout isLoading/>
       );
 
-      expect(component)
-        .toMatchSnapshot();
+      expect(component).toMatchSnapshot();
     });
 
     test('fullWidth is rendered', () => {
@@ -57,8 +133,7 @@ describe('EuiFormControlLayout', () => {
         <EuiFormControlLayout fullWidth/>
       );
 
-      expect(component)
-        .toMatchSnapshot();
+      expect(component).toMatchSnapshot();
     });
   });
 });
diff --git a/src/components/form/form_control_layout/index.js b/src/components/form/form_control_layout/index.js
index 2beb9ccca96c..0aa8ec05c734 100644
--- a/src/components/form/form_control_layout/index.js
+++ b/src/components/form/form_control_layout/index.js
@@ -1,3 +1,4 @@
 export {
   EuiFormControlLayout,
+  ICON_SIDES,
 } from './form_control_layout';
diff --git a/src/components/form/select/__snapshots__/select.test.js.snap b/src/components/form/select/__snapshots__/select.test.js.snap
index 3f6489edeee7..54355d360956 100644
--- a/src/components/form/select/__snapshots__/select.test.js.snap
+++ b/src/components/form/select/__snapshots__/select.test.js.snap
@@ -4,8 +4,7 @@ exports[`EuiSelect is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="arrowDown"
-  iconside="right"
+  icon="[object Object]"
   isloading="false"
 >
   <eui-validatable-control>
@@ -24,8 +23,7 @@ exports[`EuiSelect props disabled options are rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="arrowDown"
-  iconside="right"
+  icon="[object Object]"
   isloading="false"
 >
   <eui-validatable-control>
@@ -52,8 +50,7 @@ exports[`EuiSelect props fullWidth is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="true"
-  icon="arrowDown"
-  iconside="right"
+  icon="[object Object]"
   isloading="false"
 >
   <eui-validatable-control>
@@ -68,8 +65,7 @@ exports[`EuiSelect props isInvalid is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="arrowDown"
-  iconside="right"
+  icon="[object Object]"
   isloading="false"
 >
   <eui-validatable-control
@@ -86,8 +82,7 @@ exports[`EuiSelect props isLoading is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="arrowDown"
-  iconside="right"
+  icon="[object Object]"
   isloading="true"
 >
   <eui-validatable-control>
@@ -102,8 +97,7 @@ exports[`EuiSelect props options are rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="arrowDown"
-  iconside="right"
+  icon="[object Object]"
   isloading="false"
 >
   <eui-validatable-control>
@@ -129,8 +123,7 @@ exports[`EuiSelect props value option is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="arrowDown"
-  iconside="right"
+  icon="[object Object]"
   isloading="false"
 >
   <eui-validatable-control>
diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js
index e0c9393c45eb..a442597f18f5 100644
--- a/src/components/form/select/select.js
+++ b/src/components/form/select/select.js
@@ -49,10 +49,14 @@ export const EuiSelect = ({
     selectDefaultValue = defaultValue || '';
   }
 
+  const icon = {
+    type: 'arrowDown',
+    side: 'right',
+  };
+
   return (
     <EuiFormControlLayout
-      icon="arrowDown"
-      iconSide="right"
+      icon={icon}
       fullWidth={fullWidth}
       isLoading={isLoading}
       compressed={compressed}