diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js
index 745152409ccd46..eec8ecd913a51f 100644
--- a/packages/components/src/icon-button/index.js
+++ b/packages/components/src/icon-button/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString, isArray } from 'lodash';
+import { isArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { Component } from '@wordpress/element';
  */
 import Tooltip from '../tooltip';
 import Button from '../button';
-import Dashicon from '../dashicon';
+import Icon from '../icon';
 
 // This is intentionally a Component class, not a function component because it
 // is common to apply a ref to the button element (only supported in class)
@@ -42,7 +42,7 @@ class IconButton extends Component {
 
 		let element = (
 			<Button aria-label={ label } { ...additionalProps } className={ classes }>
-				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
+				<Icon icon={ icon } />
 				{ children }
 			</Button>
 		);
diff --git a/packages/components/src/icon-button/test/index.js b/packages/components/src/icon-button/test/index.js
index d5b67eec7930f6..b93f46a3c5bf66 100644
--- a/packages/components/src/icon-button/test/index.js
+++ b/packages/components/src/icon-button/test/index.js
@@ -20,7 +20,7 @@ describe( 'IconButton', () => {
 
 		it( 'should render a Dashicon component matching the wordpress icon', () => {
 			const iconButton = shallow( <IconButton icon="wordpress" /> );
-			expect( iconButton.find( 'Dashicon' ).shallow().hasClass( 'dashicons-wordpress' ) ).toBe( true );
+			expect( iconButton.find( 'Icon' ).prop( 'icon' ) ).toBe( 'wordpress' );
 		} );
 
 		it( 'should render child elements when passed as children', () => {
diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
index d1976a038ddb8d..5b451e3547f271 100644
--- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -42,22 +42,16 @@ exports[`MoreMenu should match snapshot 1`] = `
               onMouseLeave={[Function]}
               type="button"
             >
-              <Dashicon
+              <Icon
                 icon="ellipsis"
                 key="0,0"
               >
-                <SVG
-                  aria-hidden={true}
-                  className="dashicon dashicons-ellipsis"
-                  focusable="false"
-                  height={20}
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width={20}
-                  xmlns="http://www.w3.org/2000/svg"
+                <Dashicon
+                  icon="ellipsis"
+                  size={20}
                 >
-                  <svg
-                    aria-hidden="true"
+                  <SVG
+                    aria-hidden={true}
                     className="dashicon dashicons-ellipsis"
                     focusable="false"
                     height={20}
@@ -66,16 +60,27 @@ exports[`MoreMenu should match snapshot 1`] = `
                     width={20}
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <Path
-                      d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                    <svg
+                      aria-hidden="true"
+                      className="dashicon dashicons-ellipsis"
+                      focusable="false"
+                      height={20}
+                      role="img"
+                      viewBox="0 0 20 20"
+                      width={20}
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <path
+                      <Path
                         d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </Path>
-                  </svg>
-                </SVG>
-              </Dashicon>
+                      >
+                        <path
+                          d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        />
+                      </Path>
+                    </svg>
+                  </SVG>
+                </Dashicon>
+              </Icon>
             </button>
           </Button>
         </Tooltip>
diff --git a/packages/editor/src/components/block-navigation/dropdown.js b/packages/editor/src/components/block-navigation/dropdown.js
index 3fded1f9591efa..20910e4eebb042 100644
--- a/packages/editor/src/components/block-navigation/dropdown.js
+++ b/packages/editor/src/components/block-navigation/dropdown.js
@@ -4,15 +4,15 @@
 import { Fragment } from '@wordpress/element';
 import { IconButton, Dropdown, SVG, Path, KeyboardShortcuts } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { rawShortcut } from '@wordpress/keycodes';
+import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import BlockNavigation from './';
 
-const menuIcon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20">
+const MenuIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
 		<Path d="M5 5H3v2h2V5zm3 8h11v-2H8v2zm9-8H6v2h11V5zM7 11H5v2h2v-2zm0 8h2v-2H7v2zm3-2v2h11v-2H10z" />
 	</SVG>
 );
@@ -29,11 +29,12 @@ function BlockNavigationDropdown() {
 						} }
 					/>
 					<IconButton
-						icon={ menuIcon }
+						icon={ MenuIcon }
 						aria-expanded={ isOpen }
 						onClick={ onToggle }
 						label={ __( 'Block Navigation' ) }
 						className="editor-block-navigation"
+						shortcut={ displayShortcut.access( 'o' ) }
 					/>
 				</Fragment>
 			) }