From 46fcca71fb972334710a97d42338f9e4743a148d Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Wed, 22 Jan 2020 09:41:44 +0100
Subject: [PATCH] Introduce the Icons package (#17055)

---
 docs/manifest-devhub.json                     |  6 ++
 package-lock.json                             | 22 +++++
 package.json                                  |  1 +
 packages/base-styles/_z-index.scss            |  2 +-
 .../test/__snapshots__/control.js.snap        |  7 +-
 packages/block-library/package.json           |  1 +
 packages/block-library/src/paragraph/icon.js  |  8 --
 packages/block-library/src/paragraph/index.js |  2 +-
 packages/components/package.json              |  1 +
 .../src/circular-option-picker/index.js       |  8 +-
 .../src/circular-option-picker/style.scss     |  8 +-
 .../test/__snapshots__/index.js.snap          | 32 ++++---
 .../src/custom-select-control/index.js        |  8 +-
 packages/editor/package.json                  |  1 +
 .../src/components/post-saved-state/index.js  |  3 +-
 .../components/post-saved-state/style.scss    |  5 +-
 .../components/post-saved-state/test/index.js |  2 +-
 packages/icons/.npmrc                         |  1 +
 packages/icons/CHANGELOG.md                   |  3 +
 packages/icons/README.md                      | 30 ++++++
 packages/icons/package.json                   | 31 +++++++
 packages/icons/src/icon/index.js              | 14 +++
 packages/icons/src/icon/stories/index.js      | 29 ++++++
 packages/icons/src/index.js                   |  4 +
 packages/icons/src/library/check.js           | 19 ++++
 packages/icons/src/library/paragraph.js       | 12 +++
 storybook/main.js                             |  1 +
 storybook/test/__snapshots__/index.js.snap    | 93 +++++++++++++++++++
 28 files changed, 317 insertions(+), 37 deletions(-)
 delete mode 100644 packages/block-library/src/paragraph/icon.js
 create mode 100644 packages/icons/.npmrc
 create mode 100644 packages/icons/CHANGELOG.md
 create mode 100644 packages/icons/README.md
 create mode 100644 packages/icons/package.json
 create mode 100644 packages/icons/src/icon/index.js
 create mode 100644 packages/icons/src/icon/stories/index.js
 create mode 100644 packages/icons/src/index.js
 create mode 100644 packages/icons/src/library/check.js
 create mode 100644 packages/icons/src/library/paragraph.js

diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json
index 34e54832509a7..a2960d6d7110c 100644
--- a/docs/manifest-devhub.json
+++ b/docs/manifest-devhub.json
@@ -1325,6 +1325,12 @@
 		"markdown_source": "../packages/i18n/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/icons",
+		"slug": "packages-icons",
+		"markdown_source": "../packages/icons/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/is-shallow-equal",
 		"slug": "packages-is-shallow-equal",
diff --git a/package-lock.json b/package-lock.json
index f53ef6ab607ea..bd8ddca28b333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9550,6 +9550,7 @@
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/escape-html": "file:packages/escape-html",
 				"@wordpress/i18n": "file:packages/i18n",
+				"@wordpress/icons": "file:packages/icons",
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"@wordpress/keycodes": "file:packages/keycodes",
 				"@wordpress/rich-text": "file:packages/rich-text",
@@ -9622,6 +9623,7 @@
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/hooks": "file:packages/hooks",
 				"@wordpress/i18n": "file:packages/i18n",
+				"@wordpress/icons": "file:packages/icons",
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"@wordpress/keycodes": "file:packages/keycodes",
 				"@wordpress/primitives": "file:packages/primitives",
@@ -9870,6 +9872,7 @@
 				"@wordpress/hooks": "file:packages/hooks",
 				"@wordpress/html-entities": "file:packages/html-entities",
 				"@wordpress/i18n": "file:packages/i18n",
+				"@wordpress/icons": "file:packages/icons",
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 				"@wordpress/keycodes": "file:packages/keycodes",
@@ -9972,6 +9975,25 @@
 				"tannin": "^1.1.0"
 			}
 		},
+		"@wordpress/icons": {
+			"version": "file:packages/icons",
+			"requires": {
+				"@wordpress/element": "file:packages/element",
+				"@wordpress/primitives": "file:packages/primitives"
+			},
+			"dependencies": {
+				"lodash": {
+					"version": "4.17.15",
+					"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+					"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+				},
+				"pascalcase": {
+					"version": "1.0.0",
+					"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-1.0.0.tgz",
+					"integrity": "sha512-BSExi0rRnCHReJys6NocaK+cfTXNinAegfWBvr0JD3hiaEG7Nuc7r0CIdOJunXrs8gU/sbHQ9dxVAtiVQisjmg=="
+				}
+			}
+		},
 		"@wordpress/is-shallow-equal": {
 			"version": "file:packages/is-shallow-equal",
 			"requires": {
diff --git a/package.json b/package.json
index 9ac0e8b7aa25d..1b19266fb01ab 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
 		"@wordpress/hooks": "file:packages/hooks",
 		"@wordpress/html-entities": "file:packages/html-entities",
 		"@wordpress/i18n": "file:packages/i18n",
+		"@wordpress/icons": "file:packages/icons",
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 		"@wordpress/keycodes": "file:packages/keycodes",
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index f9c23e29b6062..c9c369d051dea 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -125,7 +125,7 @@ $z-layers: (
 
 	".components-circular-option-picker__option.is-pressed": 1,
 	// Needs to be higher than .components-circular-option-picker__option.is-pressed.
-	".components-circular-option-picker__option.is-pressed + .dashicons-saved": 2
+	".components-circular-option-picker__option.is-pressed + svg": 2
 );
 
 @function z-index( $key ) {
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 22ff1e94352ba..bb4c84c0d9f96 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -49,12 +49,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           />
           <svg
             aria-hidden="true"
-            className="dashicon dashicons-saved"
             focusable="false"
-            height={20}
+            height={24}
             role="img"
-            viewBox="0 0 20 20"
-            width={20}
+            viewBox="-2 -2 24 24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 4bd0926814895..8a5a29976c9c3 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -41,6 +41,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/rich-text": "file:../rich-text",
diff --git a/packages/block-library/src/paragraph/icon.js b/packages/block-library/src/paragraph/icon.js
deleted file mode 100644
index d8f6a46df59bc..0000000000000
--- a/packages/block-library/src/paragraph/icon.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export default (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z" /></SVG>
-);
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 34c6169455f9d..d95174b9acbea 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -7,13 +7,13 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { paragraph as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import deprecated from './deprecated';
 import edit from './edit';
-import icon from './icon';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
diff --git a/packages/components/package.json b/packages/components/package.json
index 100a2b899fce8..0152ada85794c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -36,6 +36,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/primitives": "file:../primitives",
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index 17f1b7ce930b8..92bd47b051592 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -3,13 +3,17 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
-import Dashicon from '../dashicon';
 
 function Option( {
 	className,
@@ -33,7 +37,7 @@ function Option( {
 				( <Tooltip text={ tooltipText }>{ optionButton }</Tooltip> ) :
 				optionButton
 			}
-			{ isSelected && <Dashicon icon="saved" /> }
+			{ isSelected && <Icon icon={ check } /> }
 		</div>
 	);
 }
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 659dbbe78df44..a76a852559f7b 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -72,12 +72,12 @@ $color-palette-circle-spacing: 12px;
 		position: relative;
 		z-index: z-index(".components-circular-option-picker__option.is-pressed");
 
-		& + .dashicons-saved {
+		& + svg {
 			position: absolute;
-			left: 4px;
-			top: 4px;
+			left: 2px;
+			top: 2px;
 			border-radius: 50%;
-			z-index: z-index(".components-circular-option-picker__option.is-pressed + .dashicons-saved");
+			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
 			background: $white;
 			pointer-events: none;
 		}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index eb5ddef6b1986..1813d62aaccd8 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -318,27 +318,37 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               />
             </ForwardRef(Button)>
           </Tooltip>
-          <Dashicon
-            icon="saved"
+          <Icon
+            icon={
+              <SVG
+                aria-hidden={true}
+                focusable="false"
+                role="img"
+                viewBox="-2 -2 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <Path
+                  d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
+                />
+              </SVG>
+            }
           >
             <SVG
               aria-hidden={true}
-              className="dashicon dashicons-saved"
               focusable="false"
-              height={20}
+              height={24}
               role="img"
-              viewBox="0 0 20 20"
-              width={20}
+              viewBox="-2 -2 24 24"
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <svg
                 aria-hidden="true"
-                className="dashicon dashicons-saved"
                 focusable="false"
-                height={20}
+                height={24}
                 role="img"
-                viewBox="0 0 20 20"
-                width={20}
+                viewBox="-2 -2 24 24"
+                width={24}
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <Path
@@ -350,7 +360,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 </Path>
               </svg>
             </SVG>
-          </Dashicon>
+          </Icon>
         </div>
       </Option>
       <Option
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 0d49c08e4de13..e81ec97c83c23 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -4,6 +4,10 @@
 import { useSelect } from 'downshift';
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -126,8 +130,8 @@ export default function CustomSelectControl( {
 							} ) }
 						>
 							{ item === selectedItem && (
-								<Dashicon
-									icon="saved"
+								<Icon
+									icon={ check }
 									className="components-custom-select-control__item-icon"
 								/>
 							) }
diff --git a/packages/editor/package.json b/packages/editor/package.json
index dc56e097afb33..4041abb1cf0c8 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -39,6 +39,7 @@
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
index fcabe37c1f230..b6dbf6792112c 100644
--- a/packages/editor/src/components/post-saved-state/index.js
+++ b/packages/editor/src/components/post-saved-state/index.js
@@ -14,6 +14,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { withSafeTimeout, compose } from '@wordpress/compose';
 import { withViewportMatch } from '@wordpress/viewport';
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -88,7 +89,7 @@ export class PostSavedState extends Component {
 		if ( forceSavedMessage || ( ! isNew && ! isDirty ) ) {
 			return (
 				<span className="editor-post-saved-state is-saved">
-					<Dashicon icon="saved" />
+					<Icon icon={ check } />
 					{ __( 'Saved' ) }
 				</span>
 			);
diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
index 49f546627651a..7840f2816140a 100644
--- a/packages/editor/src/components/post-saved-state/style.scss
+++ b/packages/editor/src/components/post-saved-state/style.scss
@@ -7,10 +7,11 @@
 	overflow: hidden;
 	white-space: nowrap;
 
-	.dashicon {
+	svg {
 		display: inline-block;
 		flex: 0 0 auto;
-		margin-right: $grid-size;
+		margin-right: $grid-size-small;
+		fill: currentColor;
 	}
 
 	@include break-small() {
diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js
index 38b094c642321..8466002b8b614 100644
--- a/packages/editor/src/components/post-saved-state/test/index.js
+++ b/packages/editor/src/components/post-saved-state/test/index.js
@@ -48,7 +48,7 @@ describe( 'PostSavedState', () => {
 				isSaveable={ true } />
 		);
 
-		expect( wrapper.childAt( 0 ).name() ).toBe( 'Dashicon' );
+		expect( wrapper.childAt( 0 ).name() ).toBe( 'Icon' );
 		expect( wrapper.childAt( 1 ).text() ).toBe( 'Saved' );
 	} );
 
diff --git a/packages/icons/.npmrc b/packages/icons/.npmrc
new file mode 100644
index 0000000000000..43c97e719a5a8
--- /dev/null
+++ b/packages/icons/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
new file mode 100644
index 0000000000000..3a94f4422ce9b
--- /dev/null
+++ b/packages/icons/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 1.0.0 (2019-08-15)
+
+- Initial release
diff --git a/packages/icons/README.md b/packages/icons/README.md
new file mode 100644
index 0000000000000..9f03b4ee89563
--- /dev/null
+++ b/packages/icons/README.md
@@ -0,0 +1,30 @@
+# Icons
+
+WordPress Icons Library.
+
+## Installation
+
+Install the module:
+
+```bash
+npm install @wordpress/icons --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+## Usage
+
+```js
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
+
+<Icon icon={ check } />
+```
+
+## Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`size` | `integer` | `24` | Size of icon in pixels.
+
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/icons/package.json b/packages/icons/package.json
new file mode 100644
index 0000000000000..412c3daa9e87d
--- /dev/null
+++ b/packages/icons/package.json
@@ -0,0 +1,31 @@
+{
+	"name": "@wordpress/icons",
+	"version": "1.0.0",
+	"description": "WordPress Icons package, based on dashicon.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"icons",
+		"dashicon",
+		"wordpress"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/icons/README.md",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/icons"
+	},
+	"sideEffects": false,
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"dependencies": {
+		"@wordpress/element": "../element",
+		"@wordpress/primitives": "../primitives"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/icons/src/icon/index.js b/packages/icons/src/icon/index.js
new file mode 100644
index 0000000000000..eb196b9d05b6d
--- /dev/null
+++ b/packages/icons/src/icon/index.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneElement } from '@wordpress/element';
+
+function Icon( { icon, size = 24, ...props } ) {
+	return cloneElement( icon, {
+		width: size,
+		height: size,
+		...props,
+	} );
+}
+
+export default Icon;
diff --git a/packages/icons/src/icon/stories/index.js b/packages/icons/src/icon/stories/index.js
new file mode 100644
index 0000000000000..a2a63b0e3ec49
--- /dev/null
+++ b/packages/icons/src/icon/stories/index.js
@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import Icon from '../';
+import check from '../../library/check';
+import paragraph from '../../library/paragraph';
+
+export default { title: 'Icons/Icon', component: Icon };
+
+export const _default = () => {
+	return (
+		<>
+			<div>
+				<h2>Dashicons (corrected viewport)</h2>
+
+				<Icon icon={ check } />
+				<Icon icon={ check } size={ 36 } />
+				<Icon icon={ check } size={ 48 } />
+			</div>
+			<div>
+				<h2>Material and Other</h2>
+
+				<Icon icon={ paragraph } />
+				<Icon icon={ paragraph } size={ 36 } />
+				<Icon icon={ paragraph } size={ 48 } />
+			</div>
+		</>
+	);
+};
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
new file mode 100644
index 0000000000000..b3b5316dc9a05
--- /dev/null
+++ b/packages/icons/src/index.js
@@ -0,0 +1,4 @@
+export { default as __experimentalIcon } from './icon';
+
+export { default as check } from './library/check';
+export { default as paragraph } from './library/paragraph';
diff --git a/packages/icons/src/library/check.js b/packages/icons/src/library/check.js
new file mode 100644
index 0000000000000..165318e842117
--- /dev/null
+++ b/packages/icons/src/library/check.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const saved = (
+	<SVG
+		aria-hidden
+		role="img"
+		focusable="false"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="-2 -2 24 24"
+	>
+		<Path d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2" />
+	</SVG>
+);
+
+export default saved;
+
diff --git a/packages/icons/src/library/paragraph.js b/packages/icons/src/library/paragraph.js
new file mode 100644
index 0000000000000..c5bc4042b422b
--- /dev/null
+++ b/packages/icons/src/library/paragraph.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const paragraph = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z" />
+	</SVG>
+);
+
+export default paragraph;
diff --git a/storybook/main.js b/storybook/main.js
index 99c4c5290dff8..41417bd1e907e 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -1,6 +1,7 @@
 const stories = [
 	process.env.NODE_ENV !== 'test' && './stories/**/*.(js|mdx)',
 	'../packages/components/src/**/stories/*.js',
+	'../packages/icons/src/**/stories/*.js',
 ].filter( Boolean );
 
 module.exports = {
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index 8dfddc4bb32cd..b2f61d491bb3e 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -5697,3 +5697,96 @@ Array [
   </div>,
 ]
 `;
+
+exports[`Storyshots Icons/Icon Default 1`] = `
+Array [
+  <div>
+    <h2>
+      Dashicons (corrected viewport)
+    </h2>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={24}
+      role="img"
+      viewBox="-2 -2 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={36}
+      role="img"
+      viewBox="-2 -2 24 24"
+      width={36}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={48}
+      role="img"
+      viewBox="-2 -2 24 24"
+      width={48}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
+      />
+    </svg>
+  </div>,
+  <div>
+    <h2>
+      Material and Other
+    </h2>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={36}
+      role="img"
+      viewBox="0 0 24 24"
+      width={36}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={48}
+      role="img"
+      viewBox="0 0 24 24"
+      width={48}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z"
+      />
+    </svg>
+  </div>,
+]
+`;