diff --git a/components/dashicon/index.js b/components/dashicon/index.js
index ac5616576bb8de..1d3a020d9e9cc5 100644
--- a/components/dashicon/index.js
+++ b/components/dashicon/index.js
@@ -241,8 +241,14 @@ export default class Dashicon extends wp.element.Component {
 			case 'clock':
 				path = 'M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm0 14c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6zm-.71-5.29c.07.05.14.1.23.15l-.02.02L14 13l-3.03-3.19L10 5l-.97 4.81h.01c0 .02-.01.05-.02.09S9 9.97 9 10c0 .28.1.52.29.71z';
 				break;
+			case 'cloud-saved':
+				path = 'M14.8 9c.1-.3.2-.6.2-1 0-2.2-1.8-4-4-4-1.5 0-2.9.9-3.5 2.2-.3-.1-.7-.2-1-.2C5.1 6 4 7.1 4 8.5c0 .2 0 .4.1.5-1.8.3-3.1 1.7-3.1 3.5C1 14.4 2.6 16 4.5 16h10c1.9 0 3.5-1.6 3.5-3.5 0-1.8-1.4-3.3-3.2-3.5zm-6.3 5.9l-3.2-3.2 1.4-1.4 1.8 1.8 3.8-3.8 1.4 1.4-5.2 5.2z';
+				break;
+			case 'cloud-upload':
+				path = 'M14.8 9c.1-.3.2-.6.2-1 0-2.2-1.8-4-4-4-1.5 0-2.9.9-3.5 2.2-.3-.1-.7-.2-1-.2C5.1 6 4 7.1 4 8.5c0 .2 0 .4.1.5-1.8.3-3.1 1.7-3.1 3.5C1 14.4 2.6 16 4.5 16H8v-3H5l4.5-4.5L14 13h-3v3h3.5c1.9 0 3.5-1.6 3.5-3.5 0-1.8-1.4-3.3-3.2-3.5z';
+				break;
 			case 'cloud':
-				path = 'M14.85 10.03c1.76.18 3.15 1.66 3.15 3.47 0 1.93-1.57 3.5-3.5 3.5h-10C2.57 17 1 15.43 1 13.5c0-1.79 1.34-3.24 3.06-3.46C4.02 9.87 4 9.69 4 9.5 4 8.12 5.12 7 6.5 7c.34 0 .66.07.95.19C8.11 5.89 9.45 5 11 5c2.21 0 4 1.79 4 4 0 .36-.06.7-.15 1.03z';
+				path = 'M14.9 9c1.8.2 3.1 1.7 3.1 3.5 0 1.9-1.6 3.5-3.5 3.5h-10C2.6 16 1 14.4 1 12.5 1 10.7 2.3 9.3 4.1 9 4 8.9 4 8.7 4 8.5 4 7.1 5.1 6 6.5 6c.3 0 .7.1.9.2C8.1 4.9 9.4 4 11 4c2.2 0 4 1.8 4 4 0 .4-.1.7-.1 1z';
 				break;
 			case 'columns':
 				path = 'M3 15h6V5H3v10zm8 0h6V5h-6v10z';
diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
index 66c13a02c53d4f..fac908c46c1ebc 100644
--- a/components/icon-button/style.scss
+++ b/components/icon-button/style.scss
@@ -7,18 +7,14 @@
 	background: none;
 	color: $dark-gray-500;
 	position: relative;
-	width: $icon-button-size;	// show only icon on small breakpoints
 	overflow: hidden;
+	text-indent: 4px;
 
 	.dashicon {
 		display: inline-block;
 		flex: 0 0 auto;
 	}
 
-	@include break-medium() {
-		width: auto;
-	}
-
 	&:not( :disabled ):hover {
 		@include button-style__hover;
 	}
diff --git a/edit-post/components/header/style.scss b/edit-post/components/header/style.scss
index b9a68fe95a866e..cab93c6aa44b99 100644
--- a/edit-post/components/header/style.scss
+++ b/edit-post/components/header/style.scss
@@ -63,7 +63,10 @@
 		background: $dark-gray-500;
 	}
 
-	&.editor-post-publish-button, &.editor-post-publish-panel__toggle {
+	&.editor-post-switch-to-draft,
+	&.editor-post-preview,
+	&.editor-post-publish-button,
+	&.editor-post-publish-panel__toggle {
 		margin: 2px;
 		height: 33px;
 		line-height: 32px;
@@ -71,8 +74,13 @@
 	}
 
 	@include break-medium() {
-		&.editor-post-publish-button, &.editor-post-publish-panel__toggle {
-			margin: 0 10px;
+		&.editor-post-preview {
+			margin: 0 3px 0 12px;
+		}
+
+		&.editor-post-publish-button,
+		&.editor-post-publish-panel__toggle {
+			margin: 0 12px 0 3px;
 		}
 	}
 }
diff --git a/editor/components/post-preview-button/index.js b/editor/components/post-preview-button/index.js
index 04a717e9fb8925..f2c2db6664b1ee 100644
--- a/editor/components/post-preview-button/index.js
+++ b/editor/components/post-preview-button/index.js
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { IconButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -105,14 +105,16 @@ export class PostPreviewButton extends Component {
 		const { link, isSaveable } = this.props;
 
 		return (
-			<IconButton
+			<Button
+				className="editor-post-preview"
+				isLarge
 				href={ link }
 				onClick={ this.saveForPreview }
 				target={ this.getWindowTarget() }
-				icon="visibility"
 				disabled={ ! isSaveable }
-				label={ _x( 'Preview', 'imperative verb' ) }
-			/>
+			>
+				{ _x( 'Preview', 'imperative verb' ) }
+			</Button>
 		);
 	}
 }
diff --git a/editor/components/post-saved-state/index.js b/editor/components/post-saved-state/index.js
index 841a3bddf0a6f7..9c55cb97856dfd 100644
--- a/editor/components/post-saved-state/index.js
+++ b/editor/components/post-saved-state/index.js
@@ -2,13 +2,12 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dashicon, Button } from '@wordpress/components';
+import { Dashicon, IconButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -43,7 +42,7 @@ export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSavea
 	}
 
 	if ( isPublished ) {
-		return <PostSwitchToDraftButton className={ classnames( className, 'button-link' ) } />;
+		return <PostSwitchToDraftButton />;
 	}
 
 	if ( ! isSaveable ) {
@@ -60,10 +59,15 @@ export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSavea
 	}
 
 	return (
-		<Button className={ classnames( className, 'button-link' ) } onClick={ onSave }>
+		<IconButton
+			className="editor-post-save-draft"
+			onClick={ onSave }
+			icon="cloud-upload"
+			label={ __( 'Save Draft' ) }
+		>
 			<span className="editor-post-saved-state__mobile">{ __( 'Save' ) }</span>
 			<span className="editor-post-saved-state__desktop">{ __( 'Save Draft' ) }</span>
-		</Button>
+		</IconButton>
 	);
 }
 
diff --git a/editor/components/post-saved-state/test/__snapshots__/index.js.snap b/editor/components/post-saved-state/test/__snapshots__/index.js.snap
index 709e770b9e43b9..74ce5219263fa9 100644
--- a/editor/components/post-saved-state/test/__snapshots__/index.js.snap
+++ b/editor/components/post-saved-state/test/__snapshots__/index.js.snap
@@ -1,7 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `
-<Connect(PostSwitchToDraftButton)
-  className="editor-post-saved-state button-link"
-/>
-`;
+exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `<Connect(PostSwitchToDraftButton) />`;
diff --git a/editor/components/post-saved-state/test/index.js b/editor/components/post-saved-state/test/index.js
index bd45a24b8aa74b..0e1a460bfbac07 100644
--- a/editor/components/post-saved-state/test/index.js
+++ b/editor/components/post-saved-state/test/index.js
@@ -63,8 +63,7 @@ describe( 'PostSavedState', () => {
 				onSave={ saveSpy } />
 		);
 
-		expect( wrapper.name() ).toBe( 'Button' );
-		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
+		expect( wrapper.name() ).toBe( 'IconButton' );
 		wrapper.simulate( 'click' );
 		expect( saveSpy ).toHaveBeenCalled();
 	} );
diff --git a/editor/components/post-switch-to-draft-button/index.js b/editor/components/post-switch-to-draft-button/index.js
index 275d0543706462..39b89ab013374e 100644
--- a/editor/components/post-switch-to-draft-button/index.js
+++ b/editor/components/post-switch-to-draft-button/index.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { IconButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -18,7 +18,7 @@ import {
 	isCurrentPostPublished,
 } from '../../store/selectors';
 
-function PostSwitchToDraftButton( { className, isSaving, isPublished, onClick } ) {
+function PostSwitchToDraftButton( { isSaving, isPublished, onClick } ) {
 	if ( ! isPublished ) {
 		return null;
 	}
@@ -31,14 +31,14 @@ function PostSwitchToDraftButton( { className, isSaving, isPublished, onClick }
 	};
 
 	return (
-		<Button
-			className={ className }
+		<IconButton
+			className="editor-post-switch-to-draft"
 			isLarge
 			onClick={ onSwitch }
 			disabled={ isSaving }
 		>
 			{ __( 'Switch to Draft' ) }
-		</Button>
+		</IconButton>
 	);
 }