diff --git a/components/external-link/index.js b/components/external-link/index.js
new file mode 100644
index 00000000000000..52777d25f6b4d9
--- /dev/null
+++ b/components/external-link/index.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { compact, uniq } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
+/**
+ * Internal dependencies
+ */
+import Dashicon from '../dashicon';
+import './style.scss';
+
+function ExternalLink( { href, children, className, rel = '', ...additionalProps } ) {
+	rel = uniq( compact( [
+		...rel.split( ' ' ),
+		'external',
+		'noreferrer',
+		'noopener',
+	] ) ).join( ' ' );
+	const classes = classnames( 'components-external-link', className );
+	return (
+		<a { ...additionalProps } className={ classes } href={ href } target="_blank" rel={ rel }>
+			{ children }
+			<span className="screen-reader-text">
+				{
+					/* translators: accessibility text */
+					__( '(opens in a new window)' )
+				}
+			</span>
+			<Dashicon icon="external" />
+		</a>
+	);
+}
+
+export default ExternalLink;
diff --git a/components/external-link/style.scss b/components/external-link/style.scss
new file mode 100644
index 00000000000000..b20adc9ccccc9d
--- /dev/null
+++ b/components/external-link/style.scss
@@ -0,0 +1,8 @@
+.components-external-link {
+	.dashicon {
+		width: 1.4em;
+		height: 1.4em;
+		margin: 0 .2em;
+		vertical-align: top;
+	}
+}
\ No newline at end of file
diff --git a/components/index.js b/components/index.js
index 368fc512f25a49..2f2ba501c66cd5 100644
--- a/components/index.js
+++ b/components/index.js
@@ -3,6 +3,7 @@ export { default as Button } from './button';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as Dashicon } from './dashicon';
 export { default as DropZone } from './drop-zone';
+export { default as ExternalLink } from './external-link';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
 export { default as IconButton } from './icon-button';
diff --git a/editor/sidebar/post-excerpt/index.js b/editor/sidebar/post-excerpt/index.js
index d8fc4493cd63db..780bfab0a7ee0a 100644
--- a/editor/sidebar/post-excerpt/index.js
+++ b/editor/sidebar/post-excerpt/index.js
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from 'i18n';
-import { PanelBody } from 'components';
+import { ExternalLink, PanelBody } from 'components';
 
 /**
  * Internal Dependencies
@@ -28,9 +28,9 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 				placeholder={ __( 'Write an excerpt (optional)' ) }
 				aria-label={ __( 'Excerpt' ) }
 			/>
-			<a href="https://codex.wordpress.org/Excerpt" target="_blank">
+			<ExternalLink href="https://codex.wordpress.org/Excerpt">
 				{ __( 'Learn more about manual excerpts' ) }
-			</a>
+			</ExternalLink>
 		</PanelBody>
 	);
 }