From 57efb36acd3d62118bc659d29bba9432facc75f1 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Fri, 24 Jan 2020 13:36:04 +0100
Subject: [PATCH 01/11] add new icons and remove old ones

---
 .../js/atomic/blocks/product/button/index.js  |  4 +-
 .../js/atomic/blocks/product/image/index.js   |  4 +-
 .../js/atomic/blocks/product/price/index.js   |  4 +-
 .../js/atomic/blocks/product/rating/index.js  |  4 +-
 .../atomic/blocks/product/sale-badge/index.js |  4 +-
 .../js/atomic/blocks/product/shared-config.js |  4 +-
 .../components/checkout/no-shipping/index.js  |  4 +-
 assets/js/blocks/active-filters/index.js      |  4 +-
 assets/js/blocks/attribute-filter/edit.js     |  9 ++---
 assets/js/blocks/attribute-filter/index.js    |  4 +-
 .../cart/full-cart/cart-line-item-row.js      |  4 +-
 assets/js/blocks/cart-checkout/cart/index.js  |  3 +-
 .../js/blocks/cart-checkout/checkout/index.js |  7 ++--
 assets/js/blocks/featured-category/block.js   |  6 +--
 assets/js/blocks/featured-category/index.js   |  4 +-
 assets/js/blocks/featured-product/block.js    |  5 ++-
 assets/js/blocks/featured-product/index.js    |  3 +-
 assets/js/blocks/handpicked-products/block.js |  4 +-
 assets/js/blocks/handpicked-products/index.js |  4 +-
 assets/js/blocks/price-filter/edit.js         |  6 +--
 assets/js/blocks/price-filter/index.js        |  4 +-
 .../js/blocks/product-best-sellers/index.js   |  4 +-
 assets/js/blocks/product-categories/block.js  |  4 +-
 assets/js/blocks/product-categories/index.js  |  4 +-
 assets/js/blocks/product-category/block.js    |  5 ++-
 assets/js/blocks/product-category/index.js    |  3 +-
 assets/js/blocks/product-new/index.js         |  4 +-
 assets/js/blocks/product-on-sale/block.js     |  4 +-
 assets/js/blocks/product-on-sale/index.js     |  5 +--
 assets/js/blocks/product-search/index.js      |  5 +--
 assets/js/blocks/product-tag/block.js         | 16 ++++++--
 assets/js/blocks/product-tag/index.js         |  4 +-
 assets/js/blocks/product-top-rated/index.js   |  4 +-
 .../js/blocks/products-by-attribute/block.js  |  4 +-
 .../js/blocks/products-by-attribute/index.js  |  4 +-
 .../js/blocks/products/all-products/edit.js   |  6 +--
 .../js/blocks/products/all-products/index.js  |  4 +-
 assets/js/blocks/products/utils.js            |  4 +-
 assets/js/blocks/reviews/all-reviews/edit.js  |  9 ++++-
 assets/js/blocks/reviews/all-reviews/index.js |  4 +-
 .../all-reviews/no-reviews-placeholder.js     |  6 ++-
 .../reviews/reviews-by-category/edit.js       |  6 +--
 .../reviews/reviews-by-category/index.js      |  4 +-
 .../no-reviews-placeholder.js                 |  5 +--
 .../blocks/reviews/reviews-by-product/edit.js | 12 ++++--
 .../reviews/reviews-by-product/index.js       |  5 +--
 .../no-reviews-placeholder.js                 |  4 +-
 .../js/components/error-placeholder/index.js  |  4 +-
 assets/js/components/icons/all-reviews.js     | 25 -------------
 .../js/components/icons/checkbox-checked.js   | 22 -----------
 .../js/components/icons/checkbox-unchecked.js | 22 -----------
 assets/js/components/icons/external.js        | 34 -----------------
 assets/js/components/icons/folder-star.js     | 23 ------------
 assets/js/components/icons/folder.js          | 22 -----------
 assets/js/components/icons/index.js           | 19 ----------
 assets/js/components/icons/money.js           | 36 ------------------
 assets/js/components/icons/new-releases.js    | 21 -----------
 assets/js/components/icons/product-on-sale.js | 20 ----------
 assets/js/components/icons/product-search.js  | 17 ---------
 assets/js/components/icons/product-tag.js     | 28 --------------
 assets/js/components/icons/radio-selected.js  | 22 -----------
 .../js/components/icons/radio-unselected.js   | 22 -----------
 .../components/icons/reviews-by-category.js   | 28 --------------
 .../js/components/icons/reviews-by-product.js | 27 --------------
 assets/js/components/icons/trash.js           | 24 ------------
 assets/js/components/icons/widgets.js         | 21 -----------
 assets/js/components/icons/woo.js             | 37 -------------------
 assets/js/components/product-control/index.js | 17 +++++----
 .../with-feedback-prompt/feedback-prompt.js   |  6 +--
 assets/js/icons/icon/index.js                 | 14 +++++++
 assets/js/icons/index.js                      | 31 ++++++++++++++++
 assets/js/icons/library/bill.js               | 13 +++++++
 assets/js/icons/library/card.js               | 13 +++++++
 assets/js/icons/library/cart.js               | 13 +++++++
 assets/js/icons/library/comment.js            | 13 +++++++
 assets/js/icons/library/discussion.js         | 13 +++++++
 assets/js/icons/library/exclamation.js        | 13 +++++++
 assets/js/icons/library/external.js           | 27 ++++++++++++++
 assets/js/icons/library/folder-stared.js      | 13 +++++++
 assets/js/icons/library/folder.js             | 13 +++++++
 assets/js/icons/library/grid.js               | 13 +++++++
 assets/js/icons/library/image.js              | 13 +++++++
 assets/js/icons/library/list.js               | 13 +++++++
 assets/js/icons/library/more.js               | 16 ++++++++
 assets/js/icons/library/notice.js             | 12 ++++++
 assets/js/icons/library/radio-selected.js     | 15 ++++++++
 assets/js/icons/library/radio-unselected.js   | 15 ++++++++
 assets/js/icons/library/review.js             | 13 +++++++
 assets/js/icons/library/search.js             | 13 +++++++
 assets/js/icons/library/server.js             | 13 +++++++
 assets/js/icons/library/star.js               | 13 +++++++
 assets/js/icons/library/stonks.js             | 13 +++++++
 assets/js/icons/library/tag.js                | 15 ++++++++
 assets/js/icons/library/tags.js               | 15 ++++++++
 assets/js/icons/library/thumb-up.js           | 13 +++++++
 assets/js/icons/library/toggle.js             | 13 +++++++
 assets/js/icons/library/trash.js              | 16 ++++++++
 assets/js/icons/library/truck.js              | 13 +++++++
 assets/js/icons/library/widgets.js            | 13 +++++++
 assets/js/icons/library/woo.js                | 20 ++++++++++
 assets/js/index.js                            | 11 +++++-
 bin/webpack-helpers.js                        | 17 +++++----
 102 files changed, 615 insertions(+), 600 deletions(-)
 delete mode 100644 assets/js/components/icons/all-reviews.js
 delete mode 100644 assets/js/components/icons/checkbox-checked.js
 delete mode 100644 assets/js/components/icons/checkbox-unchecked.js
 delete mode 100644 assets/js/components/icons/external.js
 delete mode 100644 assets/js/components/icons/folder-star.js
 delete mode 100644 assets/js/components/icons/folder.js
 delete mode 100644 assets/js/components/icons/index.js
 delete mode 100644 assets/js/components/icons/money.js
 delete mode 100644 assets/js/components/icons/new-releases.js
 delete mode 100644 assets/js/components/icons/product-on-sale.js
 delete mode 100644 assets/js/components/icons/product-search.js
 delete mode 100644 assets/js/components/icons/product-tag.js
 delete mode 100644 assets/js/components/icons/radio-selected.js
 delete mode 100644 assets/js/components/icons/radio-unselected.js
 delete mode 100644 assets/js/components/icons/reviews-by-category.js
 delete mode 100644 assets/js/components/icons/reviews-by-product.js
 delete mode 100644 assets/js/components/icons/trash.js
 delete mode 100644 assets/js/components/icons/widgets.js
 delete mode 100644 assets/js/components/icons/woo.js
 create mode 100644 assets/js/icons/icon/index.js
 create mode 100644 assets/js/icons/index.js
 create mode 100644 assets/js/icons/library/bill.js
 create mode 100644 assets/js/icons/library/card.js
 create mode 100644 assets/js/icons/library/cart.js
 create mode 100644 assets/js/icons/library/comment.js
 create mode 100644 assets/js/icons/library/discussion.js
 create mode 100644 assets/js/icons/library/exclamation.js
 create mode 100644 assets/js/icons/library/external.js
 create mode 100644 assets/js/icons/library/folder-stared.js
 create mode 100644 assets/js/icons/library/folder.js
 create mode 100644 assets/js/icons/library/grid.js
 create mode 100644 assets/js/icons/library/image.js
 create mode 100644 assets/js/icons/library/list.js
 create mode 100644 assets/js/icons/library/more.js
 create mode 100644 assets/js/icons/library/notice.js
 create mode 100644 assets/js/icons/library/radio-selected.js
 create mode 100644 assets/js/icons/library/radio-unselected.js
 create mode 100644 assets/js/icons/library/review.js
 create mode 100644 assets/js/icons/library/search.js
 create mode 100644 assets/js/icons/library/server.js
 create mode 100644 assets/js/icons/library/star.js
 create mode 100644 assets/js/icons/library/stonks.js
 create mode 100644 assets/js/icons/library/tag.js
 create mode 100644 assets/js/icons/library/tags.js
 create mode 100644 assets/js/icons/library/thumb-up.js
 create mode 100644 assets/js/icons/library/toggle.js
 create mode 100644 assets/js/icons/library/trash.js
 create mode 100644 assets/js/icons/library/truck.js
 create mode 100644 assets/js/icons/library/widgets.js
 create mode 100644 assets/js/icons/library/woo.js

diff --git a/assets/js/atomic/blocks/product/button/index.js b/assets/js/atomic/blocks/product/button/index.js
index a4f55d258d6..486977838a1 100644
--- a/assets/js/atomic/blocks/product/button/index.js
+++ b/assets/js/atomic/blocks/product/button/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { Disabled } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import { Icon, cart } from '@woocommerce/icons';
 import { ProductButton } from '@woocommerce/atomic-components/product';
 
 /**
@@ -19,7 +19,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="cart" />,
+		src: <Icon icon={ cart } />,
 		foreground: '#96588a',
 	},
 	edit( props ) {
diff --git a/assets/js/atomic/blocks/product/image/index.js b/assets/js/atomic/blocks/product/image/index.js
index 8fb3c16acef..b91fbe63840 100644
--- a/assets/js/atomic/blocks/product/image/index.js
+++ b/assets/js/atomic/blocks/product/image/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, image } from '@woocommerce/icons';
 import { Fragment } from '@wordpress/element';
 import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -23,7 +23,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="image" />,
+		src: <Icon icon={ image } />,
 		foreground: '#96588a',
 	},
 	attributes: {
diff --git a/assets/js/atomic/blocks/product/price/index.js b/assets/js/atomic/blocks/product/price/index.js
index 0a8393c7751..b75231796f6 100644
--- a/assets/js/atomic/blocks/product/price/index.js
+++ b/assets/js/atomic/blocks/product/price/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, bill } from '@woocommerce/icons';
 import { ProductPrice } from '@woocommerce/atomic-components/product';
 
 /**
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="money" />,
+		src: <Icon icon={ bill } />,
 		foreground: '#96588a',
 	},
 
diff --git a/assets/js/atomic/blocks/product/rating/index.js b/assets/js/atomic/blocks/product/rating/index.js
index 41917aee845..7cc526287f6 100644
--- a/assets/js/atomic/blocks/product/rating/index.js
+++ b/assets/js/atomic/blocks/product/rating/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, star } from '@woocommerce/icons';
 import { ProductRating } from '@woocommerce/atomic-components/product';
 
 /**
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="star-outline" />,
+		src: <Icon icon={ star } />,
 		foreground: '#96588a',
 	},
 
diff --git a/assets/js/atomic/blocks/product/sale-badge/index.js b/assets/js/atomic/blocks/product/sale-badge/index.js
index d981c0c41c8..d854cac2e92 100644
--- a/assets/js/atomic/blocks/product/sale-badge/index.js
+++ b/assets/js/atomic/blocks/product/sale-badge/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { ProductSaleBadge } from '@woocommerce/atomic-components/product';
-import { IconProductOnSale } from '@woocommerce/block-components/icons';
+import { Icon, tag } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <IconProductOnSale />,
+		src: <Icon icon={ tag } />,
 		foreground: '#96588a',
 	},
 	supports: {
diff --git a/assets/js/atomic/blocks/product/shared-config.js b/assets/js/atomic/blocks/product/shared-config.js
index c431f6f720b..77da71c1f10 100644
--- a/assets/js/atomic/blocks/product/shared-config.js
+++ b/assets/js/atomic/blocks/product/shared-config.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import Gridicon from 'gridicons';
+import { Icon, grid } from '@woocommerce/icons';
 import { previewProducts } from '@woocommerce/resource-previews';
 
 /**
@@ -12,7 +12,7 @@ export default {
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	icon: {
-		src: <Gridicon icon="grid" />,
+		src: <Icon icon={ grid } />,
 		foreground: '#96588a',
 	},
 	supports: {
diff --git a/assets/js/base/components/checkout/no-shipping/index.js b/assets/js/base/components/checkout/no-shipping/index.js
index e8ac523a876..e85e5d4ff27 100644
--- a/assets/js/base/components/checkout/no-shipping/index.js
+++ b/assets/js/base/components/checkout/no-shipping/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Placeholder, Button } from '@wordpress/components';
-import ShippingIcon from 'gridicons/dist/shipping';
+import { Icon, truck } from '@woocommerce/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 
 /**
@@ -14,7 +14,7 @@ import './style.scss';
 const NoShipping = () => {
 	return (
 		<Placeholder
-			icon={ <ShippingIcon /> }
+			icon={ <Icon icon={ truck } /> }
 			label={ __( 'Shipping options', 'woo-gutenberg-products-block' ) }
 			className="wc-block-checkout__no-shipping"
 		>
diff --git a/assets/js/blocks/active-filters/index.js b/assets/js/blocks/active-filters/index.js
index a86c82f8310..234f47f0812 100644
--- a/assets/js/blocks/active-filters/index.js
+++ b/assets/js/blocks/active-filters/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, toggle } from '@woocommerce/icons';
 import classNames from 'classnames';
 
 /**
@@ -14,7 +14,7 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/active-filters', {
 	title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="list-checkmark" />,
+		src: <Icon icon={ toggle } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/attribute-filter/edit.js b/assets/js/blocks/attribute-filter/edit.js
index 312e7a29d79..6a48b480b20 100644
--- a/assets/js/blocks/attribute-filter/edit.js
+++ b/assets/js/blocks/attribute-filter/edit.js
@@ -13,7 +13,7 @@ import {
 	Toolbar,
 	withSpokenMessages,
 } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import { Icon, server, external } from '@woocommerce/icons';
 import { SearchListControl } from '@woocommerce/components';
 import { mapValues, toArray, sortBy, find } from 'lodash';
 import { ATTRIBUTES } from '@woocommerce/block-settings';
@@ -26,7 +26,6 @@ import BlockTitle from '@woocommerce/block-components/block-title';
  */
 import Block from './block.js';
 import './editor.scss';
-import { IconExternal } from '../../components/icons';
 import ToggleButtonControl from '../../components/toggle-button-control';
 
 const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
@@ -221,7 +220,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 	const noAttributesPlaceholder = () => (
 		<Placeholder
 			className="wc-block-attribute-filter"
-			icon={ <Gridicon icon="menus" /> }
+			icon={ <Icon icon={ server } /> }
 			label={ __(
 				'Filter Products by Attribute',
 				'woo-gutenberg-products-block'
@@ -247,7 +246,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 			>
 				{ __( 'Add new attribute', 'woo-gutenberg-products-block' ) +
 					' ' }
-				<IconExternal />
+				<Icon icon={ external } />
 			</Button>
 			<Button
 				className="wc-block-attribute-filter__read_more_button"
@@ -358,7 +357,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 		return (
 			<Placeholder
 				className="wc-block-attribute-filter"
-				icon={ <Gridicon icon="menus" /> }
+				icon={ <Icon icon={ server } /> }
 				label={ __(
 					'Filter Products by Attribute',
 					'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/attribute-filter/index.js b/assets/js/blocks/attribute-filter/index.js
index e1be352a99f..94b0bdadf3f 100644
--- a/assets/js/blocks/attribute-filter/index.js
+++ b/assets/js/blocks/attribute-filter/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, server } from '@woocommerce/icons';
 import classNames from 'classnames';
 
 /**
@@ -14,7 +14,7 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/attribute-filter', {
 	title: __( 'Filter Products by Attribute', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="menus" />,
+		src: <Icon icon={ server } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
index 6987af0bc52..5b54047b3a4 100644
--- a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
+++ b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import QuantitySelector from '@woocommerce/base-components/quantity-selector';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { getCurrency, formatPrice } from '@woocommerce/base-utils';
-import { IconTrash } from '@woocommerce/block-components/icons';
+import { Icon, trash } from '@woocommerce/icons';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -127,7 +127,7 @@ const CartLineItemRow = ( { lineItem } ) => {
 					{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
 				</button>
 				<button className="wc-block-cart-item__remove-icon">
-					<IconTrash />
+					<Icon icon={ trash } />
 				</button>
 			</td>
 			<td className="wc-block-cart-item__total">
diff --git a/assets/js/blocks/cart-checkout/cart/index.js b/assets/js/blocks/cart-checkout/cart/index.js
index 03c7a1aaed5..a95eea63030 100644
--- a/assets/js/blocks/cart-checkout/cart/index.js
+++ b/assets/js/blocks/cart-checkout/cart/index.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
+import { Icon, cart } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +19,7 @@ import './style.scss';
 registerBlockType( 'woocommerce/cart', {
 	title: __( 'Cart', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: 'cart',
+		src: <Icon icon={ cart } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/cart-checkout/checkout/index.js b/assets/js/blocks/cart-checkout/checkout/index.js
index 6012b772efc..383e9644229 100644
--- a/assets/js/blocks/cart-checkout/checkout/index.js
+++ b/assets/js/blocks/cart-checkout/checkout/index.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
+import { Icon, card } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -14,10 +15,8 @@ import './editor.scss';
 registerBlockType( 'woocommerce/checkout', {
 	title: __( 'Checkout', 'woo-gutenberg-products-block' ),
 	icon: {
-		// @todo: Replace this once we have an icon for the checkout
-		src: 'cart',
-		// @todo: Revert this to #96588a once we have an icon for the checkout
-		foreground: '#555d66',
+		src: <Icon icon={ card } />,
+		foreground: '#96588a',
 	},
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js
index de363605ea4..15db530a5c0 100644
--- a/assets/js/blocks/featured-category/block.js
+++ b/assets/js/blocks/featured-category/block.js
@@ -31,7 +31,7 @@ import { Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import PropTypes from 'prop-types';
 import { MIN_HEIGHT } from '@woocommerce/block-settings';
-import { IconFolderStar } from '@woocommerce/block-components/icons';
+import { Icon, folderStared } from '@woocommerce/icons';
 import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
 import ErrorPlaceholder from '@woocommerce/block-components/error-placeholder';
 
@@ -190,7 +190,7 @@ const FeaturedCategory = ( {
 
 		return (
 			<Placeholder
-				icon={ <IconFolderStar /> }
+				icon={ <Icon icon={ folderStared } /> }
 				label={ __(
 					'Featured Category',
 					'woo-gutenberg-products-block'
@@ -337,7 +337,7 @@ const FeaturedCategory = ( {
 	const renderNoCategory = () => (
 		<Placeholder
 			className="wc-block-featured-category"
-			icon={ <IconFolderStar /> }
+			icon={ <Icon icon={ folderStared } /> }
 			label={ __( 'Featured Category', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (
diff --git a/assets/js/blocks/featured-category/index.js b/assets/js/blocks/featured-category/index.js
index 0e593c043dc..1507d3b3dbe 100644
--- a/assets/js/blocks/featured-category/index.js
+++ b/assets/js/blocks/featured-category/index.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
-import { IconFolderStar } from '@woocommerce/block-components/icons';
+import { Icon, folderStared } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ import { example } from './example';
 registerBlockType( 'woocommerce/featured-category', {
 	title: __( 'Featured Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconFolderStar />,
+		src: <Icon icon={ folderStared } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js
index b323f8d1fd3..86e03bfe892 100644
--- a/assets/js/blocks/featured-product/block.js
+++ b/assets/js/blocks/featured-product/block.js
@@ -35,6 +35,7 @@ import { MIN_HEIGHT } from '@woocommerce/block-settings';
 import ProductControl from '@woocommerce/block-components/product-control';
 import ErrorPlaceholder from '@woocommerce/block-components/error-placeholder';
 import { withProduct } from '@woocommerce/block-hocs';
+import { Icon, star } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -84,7 +85,7 @@ const FeaturedProduct = ( {
 			<Fragment>
 				{ getBlockControls() }
 				<Placeholder
-					icon="star-filled"
+					icon={ <Icon icon={ star } /> }
 					label={ __(
 						'Featured Product',
 						'woo-gutenberg-products-block'
@@ -382,7 +383,7 @@ const FeaturedProduct = ( {
 	const renderNoProduct = () => (
 		<Placeholder
 			className="wc-block-featured-product"
-			icon="star-filled"
+			icon={ <Icon icon={ star } /> }
 			label={ __( 'Featured Product', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (
diff --git a/assets/js/blocks/featured-product/index.js b/assets/js/blocks/featured-product/index.js
index 8c93756bf47..3569302194b 100644
--- a/assets/js/blocks/featured-product/index.js
+++ b/assets/js/blocks/featured-product/index.js
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
+import { Icon, star } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +21,7 @@ import Block from './block';
 registerBlockType( 'woocommerce/featured-product', {
 	title: __( 'Featured Product', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: 'star-filled',
+		src: <Icon icon={ star } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/handpicked-products/block.js b/assets/js/blocks/handpicked-products/block.js
index 2a2955226f1..d57c8a2c02b 100644
--- a/assets/js/blocks/handpicked-products/block.js
+++ b/assets/js/blocks/handpicked-products/block.js
@@ -21,10 +21,10 @@ import { Component, Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { MAX_COLUMNS, MIN_COLUMNS } from '@woocommerce/block-settings';
 import GridContentControl from '@woocommerce/block-components/grid-content-control';
-import { IconWidgets } from '@woocommerce/block-components/icons';
 import ProductsControl from '@woocommerce/block-components/products-control';
 import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
+import { Icon, widgets } from '@woocommerce/icons';
 
 /**
  * Component to handle edit mode of "Hand-picked Products".
@@ -129,7 +129,7 @@ class ProductsBlock extends Component {
 
 		return (
 			<Placeholder
-				icon={ <IconWidgets /> }
+				icon={ <Icon icon={ widgets } /> }
 				label={ __(
 					'Hand-picked Products',
 					'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/handpicked-products/index.js b/assets/js/blocks/handpicked-products/index.js
index 60f1d32f6d9..75454d52bae 100644
--- a/assets/js/blocks/handpicked-products/index.js
+++ b/assets/js/blocks/handpicked-products/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_COLUMNS } from '@woocommerce/block-settings';
-import { IconWidgets } from '@woocommerce/block-components/icons';
+import { Icon, widgets } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import { deprecatedConvertToShortcode } from '../../utils/deprecations';
 registerBlockType( 'woocommerce/handpicked-products', {
 	title: __( 'Hand-picked Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconWidgets />,
+		src: <Icon icon={ widgets } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/price-filter/edit.js b/assets/js/blocks/price-filter/edit.js
index 6f2444e2f03..76ed8fc0c33 100644
--- a/assets/js/blocks/price-filter/edit.js
+++ b/assets/js/blocks/price-filter/edit.js
@@ -15,13 +15,13 @@ import { PRODUCT_COUNT } from '@woocommerce/block-settings';
 import { getAdminLink } from '@woocommerce/settings';
 import HeadingToolbar from '@woocommerce/block-components/heading-toolbar';
 import BlockTitle from '@woocommerce/block-components/block-title';
+import { Icon, bill, external } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
  */
 import Block from './block.js';
 import './editor.scss';
-import { IconMoney, IconExternal } from '../../components/icons';
 import ToggleButtonControl from '../../components/toggle-button-control';
 
 export default function( { attributes, setAttributes } ) {
@@ -116,7 +116,7 @@ export default function( { attributes, setAttributes } ) {
 	const noProductsPlaceholder = () => (
 		<Placeholder
 			className="wc-block-price-slider"
-			icon={ <IconMoney /> }
+			icon={ <Icon icon={ bill } /> }
 			label={ __(
 				'Filter Products by Price',
 				'woo-gutenberg-products-block'
@@ -140,7 +140,7 @@ export default function( { attributes, setAttributes } ) {
 			>
 				{ __( 'Add new product', 'woo-gutenberg-products-block' ) +
 					' ' }
-				<IconExternal />
+				<Icon icon={ external } />
 			</Button>
 			<Button
 				className="wc-block-price-slider__read_more_button"
diff --git a/assets/js/blocks/price-filter/index.js b/assets/js/blocks/price-filter/index.js
index 8b8a5d81057..69e982c3531 100644
--- a/assets/js/blocks/price-filter/index.js
+++ b/assets/js/blocks/price-filter/index.js
@@ -4,17 +4,17 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import classNames from 'classnames';
+import { Icon, bill } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
  */
 import edit from './edit.js';
-import { IconMoney } from '../../components/icons';
 
 registerBlockType( 'woocommerce/price-filter', {
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconMoney />,
+		src: <Icon icon={ bill } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-best-sellers/index.js b/assets/js/blocks/product-best-sellers/index.js
index 3d0d19c0b08..eafd848c7e8 100644
--- a/assets/js/blocks/product-best-sellers/index.js
+++ b/assets/js/blocks/product-best-sellers/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { without } from 'lodash';
-import Gridicon from 'gridicons';
+import { Icon, stonks } from '@woocommerce/icons';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 
 /**
@@ -18,7 +18,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-best-sellers', {
 	title: __( 'Best Selling Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="stats-up-alt" />,
+		src: <Icon icon={ stonks } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-categories/block.js b/assets/js/blocks/product-categories/block.js
index 76963c14930..93b5788f2c8 100644
--- a/assets/js/blocks/product-categories/block.js
+++ b/assets/js/blocks/product-categories/block.js
@@ -6,12 +6,12 @@ import { Fragment } from 'react';
 import { InspectorControls, ServerSideRender } from '@wordpress/editor';
 import PropTypes from 'prop-types';
 import { PanelBody, ToggleControl, Placeholder } from '@wordpress/components';
-import { IconFolder } from '@woocommerce/block-components/icons';
+import { Icon, list } from '@woocommerce/icons';
 import ToggleButtonControl from '@woocommerce/block-components/toggle-button-control';
 
 const EmptyPlaceholder = () => (
 	<Placeholder
-		icon={ <IconFolder /> }
+		icon={ <Icon icon={ list } /> }
 		label={ __(
 			'Product Categories List',
 			'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/product-categories/index.js b/assets/js/blocks/product-categories/index.js
index af81c7344b1..99be0347259 100644
--- a/assets/js/blocks/product-categories/index.js
+++ b/assets/js/blocks/product-categories/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { IconFolder } from '@woocommerce/block-components/icons';
+import { Icon, list } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import Block from './block.js';
 registerBlockType( 'woocommerce/product-categories', {
 	title: __( 'Product Categories List', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconFolder />,
+		src: <Icon icon={ list } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-category/block.js b/assets/js/blocks/product-category/block.js
index 051ce58eb8a..c7ce37efcbc 100644
--- a/assets/js/blocks/product-category/block.js
+++ b/assets/js/blocks/product-category/block.js
@@ -22,6 +22,7 @@ import GridLayoutControl from '@woocommerce/block-components/grid-layout-control
 import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
 import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
+import { Icon, folder } from '@woocommerce/icons';
 
 /**
  * Component to handle edit mode of "Products by Category".
@@ -198,7 +199,7 @@ class ProductByCategoryBlock extends Component {
 
 		return (
 			<Placeholder
-				icon="category"
+				icon={ <Icon icon={ folder } /> }
 				label={ __(
 					'Products by Category',
 					'woo-gutenberg-products-block'
@@ -248,7 +249,7 @@ class ProductByCategoryBlock extends Component {
 						attributes={ attributes }
 						EmptyResponsePlaceholder={ () => (
 							<Placeholder
-								icon="category"
+								icon={ <Icon icon={ folder } /> }
 								label={ __(
 									'Products by Category',
 									'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/product-category/index.js b/assets/js/blocks/product-category/index.js
index 13bd9bc31fc..35db6b1c5e9 100644
--- a/assets/js/blocks/product-category/index.js
+++ b/assets/js/blocks/product-category/index.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { without } from 'lodash';
+import { Icon, folder } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +22,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-category', {
 	title: __( 'Products by Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: 'category',
+		src: <Icon icon={ folder } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-new/index.js b/assets/js/blocks/product-new/index.js
index ec5a7afb84a..29e63b831eb 100644
--- a/assets/js/blocks/product-new/index.js
+++ b/assets/js/blocks/product-new/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { without } from 'lodash';
-import { IconNewReleases } from '@woocommerce/block-components/icons';
+import { Icon, exclamation } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-new', {
 	title: __( 'Newest Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconNewReleases />,
+		src: <Icon icon={ exclamation } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-on-sale/block.js b/assets/js/blocks/product-on-sale/block.js
index 06a78cb54f3..fb609199c03 100644
--- a/assets/js/blocks/product-on-sale/block.js
+++ b/assets/js/blocks/product-on-sale/block.js
@@ -11,11 +11,11 @@ import GridLayoutControl from '@woocommerce/block-components/grid-layout-control
 import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
 import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
-import { IconProductOnSale } from '@woocommerce/block-components/icons';
+import { Icon, tag } from '@woocommerce/icons';
 
 const EmptyPlaceholder = () => (
 	<Placeholder
-		icon={ <IconProductOnSale /> }
+		icon={ <Icon icon={ tag } /> }
 		label={ __( 'On Sale Products', 'woo-gutenberg-products-block' ) }
 		className="wc-block-product-on-sale"
 	>
diff --git a/assets/js/blocks/product-on-sale/index.js b/assets/js/blocks/product-on-sale/index.js
index 7a37e02e9c3..8d14a613d01 100644
--- a/assets/js/blocks/product-on-sale/index.js
+++ b/assets/js/blocks/product-on-sale/index.js
@@ -4,8 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { without } from 'lodash';
-import { IconProductOnSale } from '@woocommerce/block-components/icons';
-
+import { Icon, tag } from '@woocommerce/icons';
 /**
  * Internal dependencies
  */
@@ -19,7 +18,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-on-sale', {
 	title: __( 'On Sale Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconProductOnSale />,
+		src: <Icon icon={ tag } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-search/index.js b/assets/js/blocks/product-search/index.js
index 0bf3185069d..0b3cbb9eb90 100644
--- a/assets/js/blocks/product-search/index.js
+++ b/assets/js/blocks/product-search/index.js
@@ -6,8 +6,7 @@ import { registerBlockType } from '@wordpress/blocks';
 import { InspectorControls } from '@wordpress/editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
-import { IconProductSearch } from '@woocommerce/block-components/icons';
-
+import { Icon, search } from '@woocommerce/icons';
 /**
  * Internal dependencies
  */
@@ -18,7 +17,7 @@ import Block from './block.js';
 registerBlockType( 'woocommerce/product-search', {
 	title: __( 'Product Search', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconProductSearch />,
+		src: <Icon icon={ search } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-tag/block.js b/assets/js/blocks/product-tag/block.js
index c29e9e08910..7dc12a9b030 100644
--- a/assets/js/blocks/product-tag/block.js
+++ b/assets/js/blocks/product-tag/block.js
@@ -22,7 +22,7 @@ import GridContentControl from '@woocommerce/block-components/grid-content-contr
 import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
 import ProductTagControl from '@woocommerce/block-components/product-tag-control';
 import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
-import { IconProductTag } from '@woocommerce/block-components/icons';
+import { Icon, more } from '@woocommerce/icons';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 
 /**
@@ -177,7 +177,9 @@ class ProductsByTagBlock extends Component {
 
 		return (
 			<Placeholder
-				icon={ <IconProductTag className="block-editor-block-icon" /> }
+				icon={
+					<Icon icon={ more } className="block-editor-block-icon" />
+				}
 				label={ __(
 					'Products by Tag',
 					'woo-gutenberg-products-block'
@@ -229,7 +231,10 @@ class ProductsByTagBlock extends Component {
 				) : (
 					<Placeholder
 						icon={
-							<IconProductTag className="block-editor-block-icon" />
+							<Icon
+								icon={ more }
+								className="block-editor-block-icon"
+							/>
 						}
 						label={ __(
 							'Products by Tag',
@@ -282,7 +287,10 @@ class ProductsByTagBlock extends Component {
 				) : (
 					<Placeholder
 						icon={
-							<IconProductTag className="block-editor-block-icon" />
+							<Icon
+								icon={ more }
+								className="block-editor-block-icon"
+							/>
 						}
 						label={ __(
 							'Products by Tag',
diff --git a/assets/js/blocks/product-tag/index.js b/assets/js/blocks/product-tag/index.js
index 90fa052f19c..e6a50296aa5 100644
--- a/assets/js/blocks/product-tag/index.js
+++ b/assets/js/blocks/product-tag/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
-import { IconProductTag } from '@woocommerce/block-components/icons';
+import { Icon, more } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ import Block from './block';
 registerBlockType( 'woocommerce/product-tag', {
 	title: __( 'Products by Tag', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconProductTag />,
+		src: <Icon icon={ more } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-top-rated/index.js b/assets/js/blocks/product-top-rated/index.js
index 3fd1518a00a..f922c959f88 100644
--- a/assets/js/blocks/product-top-rated/index.js
+++ b/assets/js/blocks/product-top-rated/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, thumbUp } from '@woocommerce/icons';
 import { without } from 'lodash';
 
 /**
@@ -20,7 +20,7 @@ const blockTypeName = 'woocommerce/product-top-rated';
 registerBlockType( blockTypeName, {
 	title: __( 'Top Rated Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="trophy" />,
+		src: <Icon icon={ thumbUp } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/products-by-attribute/block.js b/assets/js/blocks/products-by-attribute/block.js
index 780ea473abd..b31c2680cb4 100644
--- a/assets/js/blocks/products-by-attribute/block.js
+++ b/assets/js/blocks/products-by-attribute/block.js
@@ -16,7 +16,7 @@ import {
 	withSpokenMessages,
 } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
-import Gridicon from 'gridicons';
+import { Icon, tags } from '@woocommerce/icons';
 import PropTypes from 'prop-types';
 import GridContentControl from '@woocommerce/block-components/grid-content-control';
 import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
@@ -118,7 +118,7 @@ class ProductsByAttributeBlock extends Component {
 
 		return (
 			<Placeholder
-				icon={ <Gridicon icon="custom-post-type" /> }
+				icon={ <Icon icon={ tags } /> }
 				label={ __(
 					'Products by Attribute',
 					'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/products-by-attribute/index.js b/assets/js/blocks/products-by-attribute/index.js
index 795f3891fb1..f8121043bbc 100644
--- a/assets/js/blocks/products-by-attribute/index.js
+++ b/assets/js/blocks/products-by-attribute/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import Gridicon from 'gridicons';
+import { Icon, tags } from '@woocommerce/icons';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
 
@@ -18,7 +18,7 @@ const blockTypeName = 'woocommerce/products-by-attribute';
 registerBlockType( blockTypeName, {
 	title: __( 'Products by Attribute', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="custom-post-type" />,
+		src: <Icon icon={ tags } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/products/all-products/edit.js b/assets/js/blocks/products/all-products/edit.js
index 402002f3083..9a08df8a798 100644
--- a/assets/js/blocks/products/all-products/edit.js
+++ b/assets/js/blocks/products/all-products/edit.js
@@ -22,7 +22,7 @@ import {
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import PropTypes from 'prop-types';
-import Gridicon from 'gridicons';
+import { Icon, grid } from '@woocommerce/icons';
 import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
 import { HAS_PRODUCTS } from '@woocommerce/block-settings';
 import { InnerBlockConfigurationProvider } from '@woocommerce/base-context/inner-block-configuration-context';
@@ -86,7 +86,7 @@ class Editor extends Component {
 	};
 
 	getIcon = () => {
-		return <Gridicon icon="grid" />;
+		return <Icon icon={ grid } />;
 	};
 
 	togglePreview = () => {
@@ -232,7 +232,7 @@ class Editor extends Component {
 						</Button>
 						<IconButton
 							className="wc-block-all-products__reset-button"
-							icon={ <Gridicon icon="grid" /> }
+							icon={ <Icon icon={ grid } /> }
 							label={ __(
 								'Reset layout to default',
 								'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/products/all-products/index.js b/assets/js/blocks/products/all-products/index.js
index 62c3859bffe..b971efcf84e 100644
--- a/assets/js/blocks/products/all-products/index.js
+++ b/assets/js/blocks/products/all-products/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, grid } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -17,7 +17,7 @@ import '../../../atomic/blocks/product';
 const blockSettings = {
 	title: __( 'All Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="grid" />,
+		src: <Icon icon={ grid } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/products/utils.js b/assets/js/blocks/products/utils.js
index 3f2ea04f406..4ac479e506e 100644
--- a/assets/js/blocks/products/utils.js
+++ b/assets/js/blocks/products/utils.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { Button, Placeholder } from '@wordpress/components';
 import classNames from 'classnames';
 import { adminUrl } from '@woocommerce/settings';
-import { IconExternal } from '@woocommerce/block-components/icons';
+import { Icon, external } from '@woocommerce/icons';
 
 export const getBlockClassName = ( blockClassName, attributes ) => {
 	const { className, contentVisibility } = attributes;
@@ -38,7 +38,7 @@ export const renderNoProductsPlaceholder = ( blockTitle, blockIcon ) => (
 			href={ adminUrl + 'post-new.php?post_type=product' }
 		>
 			{ __( 'Add new product', 'woo-gutenberg-products-block' ) + ' ' }
-			<IconExternal />
+			<Icon icon={ external } />
 		</Button>
 		<Button
 			className="wc-block-products__read_more_button"
diff --git a/assets/js/blocks/reviews/all-reviews/edit.js b/assets/js/blocks/reviews/all-reviews/edit.js
index d105d4773a7..2de55d1f581 100644
--- a/assets/js/blocks/reviews/all-reviews/edit.js
+++ b/assets/js/blocks/reviews/all-reviews/edit.js
@@ -6,7 +6,7 @@ import { InspectorControls } from '@wordpress/editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
-import { IconAllReviews } from '@woocommerce/block-components/icons';
+import { Icon, discussion } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -63,7 +63,12 @@ const AllReviewsEditor = ( { attributes, setAttributes } ) => {
 			<EditorContainerBlock
 				attributes={ attributes }
 				className="wc-block-all-reviews"
-				icon={ <IconAllReviews className="block-editor-block-icon" /> }
+				icon={
+					<Icon
+						icon={ discussion }
+						className="block-editor-block-icon"
+					/>
+				}
 				name={ __( 'All Reviews', 'woo-gutenberg-products-block' ) }
 				noReviewsPlaceholder={ NoReviewsPlaceholder }
 			/>
diff --git a/assets/js/blocks/reviews/all-reviews/index.js b/assets/js/blocks/reviews/all-reviews/index.js
index 91a9fd4ec78..f83706a37c4 100644
--- a/assets/js/blocks/reviews/all-reviews/index.js
+++ b/assets/js/blocks/reviews/all-reviews/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { IconAllReviews } from '@woocommerce/block-components/icons';
+import { Icon, discussion } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ import { example } from '../example';
 registerBlockType( 'woocommerce/all-reviews', {
 	title: __( 'All Reviews', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconAllReviews />,
+		src: <Icon icon={ discussion } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js b/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js
index f758b6ad3de..bc7e6174593 100644
--- a/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js
+++ b/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js
@@ -3,13 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Placeholder } from '@wordpress/components';
-import { IconAllReviews } from '@woocommerce/block-components/icons';
+import { Icon, discussion } from '@woocommerce/icons';
 
 const NoCategoryReviewsPlaceholder = () => {
 	return (
 		<Placeholder
 			className="wc-block-all-reviews"
-			icon={ <IconAllReviews className="block-editor-block-icon" /> }
+			icon={
+				<Icon icon={ discussion } className="block-editor-block-icon" />
+			}
 			label={ __( 'All Reviews', 'woo-gutenberg-products-block' ) }
 		>
 			{ __(
diff --git a/assets/js/blocks/reviews/reviews-by-category/edit.js b/assets/js/blocks/reviews/reviews-by-category/edit.js
index a3dc8a04729..8dc70d9eeae 100644
--- a/assets/js/blocks/reviews/reviews-by-category/edit.js
+++ b/assets/js/blocks/reviews/reviews-by-category/edit.js
@@ -14,7 +14,7 @@ import { SearchListItem } from '@woocommerce/components';
 import { Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
-import { IconReviewsByCategory } from '@woocommerce/block-components/icons';
+import { Icon, review } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -132,7 +132,7 @@ const ReviewsByCategoryEditor = ( {
 		return (
 			<Placeholder
 				icon={
-					<IconReviewsByCategory className="block-editor-block-icon" />
+					<Icon icon={ review } className="block-editor-block-icon" />
 				}
 				label={ __(
 					'Reviews by Category',
@@ -172,7 +172,7 @@ const ReviewsByCategoryEditor = ( {
 				attributes={ attributes }
 				className="wc-block-reviews-by-category"
 				icon={
-					<IconReviewsByCategory className="block-editor-block-icon" />
+					<Icon icon={ review } className="block-editor-block-icon" />
 				}
 				name={ __(
 					'Reviews by Category',
diff --git a/assets/js/blocks/reviews/reviews-by-category/index.js b/assets/js/blocks/reviews/reviews-by-category/index.js
index 5d8f4c025a6..11b0469c76e 100644
--- a/assets/js/blocks/reviews/reviews-by-category/index.js
+++ b/assets/js/blocks/reviews/reviews-by-category/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { IconReviewsByCategory } from '@woocommerce/block-components/icons';
+import { Icon, review } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +20,7 @@ import { example } from '../example';
 registerBlockType( 'woocommerce/reviews-by-category', {
 	title: __( 'Reviews by Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconReviewsByCategory />,
+		src: <Icon icon={ review } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js b/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js
index d109ec30900..5057bb206ca 100644
--- a/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js
+++ b/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js
@@ -3,14 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Placeholder } from '@wordpress/components';
-import { IconReviewsByCategory } from '@woocommerce/block-components/icons';
-
+import { Icon, review } from '@woocommerce/icons';
 const NoReviewsPlaceholder = () => {
 	return (
 		<Placeholder
 			className="wc-block-reviews-by-category"
 			icon={
-				<IconReviewsByCategory className="block-editor-block-icon" />
+				<Icon icon={ review } className="block-editor-block-icon" />
 			}
 			label={ __(
 				'Reviews by Category',
diff --git a/assets/js/blocks/reviews/reviews-by-product/edit.js b/assets/js/blocks/reviews/reviews-by-product/edit.js
index 77066f1d38b..25abf1504ea 100644
--- a/assets/js/blocks/reviews/reviews-by-product/edit.js
+++ b/assets/js/blocks/reviews/reviews-by-product/edit.js
@@ -13,7 +13,7 @@ import { SearchListItem } from '@woocommerce/components';
 import { Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import ProductControl from '@woocommerce/block-components/product-control';
-import { IconReviewsByProduct } from '@woocommerce/block-components/icons';
+import { Icon, comment } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -116,7 +116,10 @@ const ReviewsByProductEditor = ( {
 		return (
 			<Placeholder
 				icon={
-					<IconReviewsByProduct className="block-editor-block-icon" />
+					<Icon
+						icon={ comment }
+						className="block-editor-block-icon"
+					/>
 				}
 				label={ __(
 					'Reviews by Product',
@@ -160,7 +163,10 @@ const ReviewsByProductEditor = ( {
 				attributes={ attributes }
 				className="wc-block-all-reviews"
 				icon={
-					<IconReviewsByProduct className="block-editor-block-icon" />
+					<Icon
+						icon={ comment }
+						className="block-editor-block-icon"
+					/>
 				}
 				name={ __(
 					'Reviews by Product',
diff --git a/assets/js/blocks/reviews/reviews-by-product/index.js b/assets/js/blocks/reviews/reviews-by-product/index.js
index 641ef2336dd..106f4ca4105 100644
--- a/assets/js/blocks/reviews/reviews-by-product/index.js
+++ b/assets/js/blocks/reviews/reviews-by-product/index.js
@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { IconReviewsByProduct } from '@woocommerce/block-components/icons';
-
+import { Icon, comment } from '@woocommerce/icons';
 /**
  * Internal dependencies
  */
@@ -20,7 +19,7 @@ import { example } from '../example';
 registerBlockType( 'woocommerce/reviews-by-product', {
 	title: __( 'Reviews by Product', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconReviewsByProduct />,
+		src: <Icon icon={ comment } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
index 6d679e802ee..9a55ad02e00 100644
--- a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
+++ b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, Spinner } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import ErrorPlaceholder from '@woocommerce/block-components/error-placeholder';
-import { IconReviewsByProduct } from '@woocommerce/block-components/icons';
+import { Icon, comment } from '@woocommerce/icons';
 import { withProduct } from '@woocommerce/block-hocs';
 
 const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => {
@@ -39,7 +39,7 @@ const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => {
 		<Placeholder
 			className="wc-block-reviews-by-product"
 			icon={
-				<IconReviewsByProduct className="block-editor-block-icon" />
+				<Icon icon={ comment } className="block-editor-block-icon" />
 			}
 			label={ __( 'Reviews by Product', 'woo-gutenberg-products-block' ) }
 		>
diff --git a/assets/js/components/error-placeholder/index.js b/assets/js/components/error-placeholder/index.js
index 1a0161cd07a..6ca85f2bbf5 100644
--- a/assets/js/components/error-placeholder/index.js
+++ b/assets/js/components/error-placeholder/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
-import Gridicon from 'gridicons';
+import { Icon, notice } from '@woocommerce/icons';
 import classNames from 'classnames';
 import { Button, Placeholder, Spinner } from '@wordpress/components';
 
@@ -16,7 +16,7 @@ import './editor.scss';
 
 const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => (
 	<Placeholder
-		icon={ <Gridicon icon="notice" /> }
+		icon={ <Icon icon={ notice } /> }
 		label={ __(
 			'Sorry, an error occurred',
 			'woo-gutenberg-products-block'
diff --git a/assets/js/components/icons/all-reviews.js b/assets/js/components/icons/all-reviews.js
deleted file mode 100644
index 6552f5c3ab7..00000000000
--- a/assets/js/components/icons/all-reviews.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default ( { className } ) => (
-	<Icon
-		className={ className }
-		icon={
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22.41">
-				<g>
-					<g>
-						<path d="M16.55 0H1.75C.56 0 0 .52 0 1.68v9.24c0 1.15.56 1.92 1.75 1.92H2V4.76a2.51 2.51 0 0 1 2.74-2.68H18v-.4A1.51 1.51 0 0 0 16.55 0z" />
-						<path d="M19.54 3.11H4.74C3.55 3.11 3 3.64 3 4.79V14c0 1.19.55 2 1.74 2H5V7.88A2.51 2.51 0 0 1 7.73 5.2H21v-.41a1.51 1.51 0 0 0-1.46-1.68z" />
-						<path d="M22.53 6.23H7.73C6.54 6.23 6 6.75 6 7.91v9.24c0 1.15.56 1.92 1.75 1.92h7a.59.59 0 0 1 .32.11l1.61 1.15 2.83 2a.31.31 0 0 0 .18.05.3.3 0 0 0 .31-.3v-2.73a.3.3 0 0 1 .28-.28h2.31A1.47 1.47 0 0 0 24 17.6V7.91a1.52 1.52 0 0 0-1.47-1.68z" />
-						<path
-							fill="#ffffff"
-							d="M10.2 10.92l1.06-2.14 1.05 2.14 2.37.35-1.71 1.66.4 2.36-2.11-1.11-.17.09-.52.27-.51.26-.92.49.18-1.02.09-.57.1-.56.03-.21-1.71-1.66 2.37-.35zM21.46 14.25h-4.4a.69.69 0 0 1-.69-.69.68.68 0 0 1 .69-.68h4.4a.68.68 0 0 1 .69.68.69.69 0 0 1-.69.69zM21.46 11.19h-4.4a.69.69 0 1 1 0-1.37h4.4a.69.69 0 1 1 0 1.37z"
-						/>
-					</g>
-				</g>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/checkbox-checked.js b/assets/js/components/icons/checkbox-checked.js
deleted file mode 100644
index 2c30f17d9e3..00000000000
--- a/assets/js/components/icons/checkbox-checked.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="#1E8CBE"
-					d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/checkbox-unchecked.js b/assets/js/components/icons/checkbox-unchecked.js
deleted file mode 100644
index 94f3dfb10e1..00000000000
--- a/assets/js/components/icons/checkbox-unchecked.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="#6C7781"
-					d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/external.js b/assets/js/components/icons/external.js
deleted file mode 100644
index c998b0723ed..00000000000
--- a/assets/js/components/icons/external.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<mask
-					id="external-mask"
-					width="24"
-					height="24"
-					x="0"
-					y="0"
-					maskUnits="userSpaceOnUse"
-				>
-					<path
-						fill="#fff"
-						d="M6.3431 6.3431v1.994l7.8984.0072-8.6055 8.6054 1.4142 1.4143 8.6055-8.6055.0071 7.8984h1.994V6.3431H6.3431z"
-					/>
-				</mask>
-				<g mask="url(#external-mask)">
-					<path d="M0 0h24v24H0z" />
-				</g>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/folder-star.js b/assets/js/components/icons/folder-star.js
deleted file mode 100644
index 5312dbf56fc..00000000000
--- a/assets/js/components/icons/folder-star.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path d="M22 7.5H2c-1.2 0-2.1 1-2 2.2l.7 11.1c.1 1.1 1 1.9 2 1.9h18.5c1.1 0 2-.8 2-1.9L24 9.6c.1-1.1-.9-2.1-2-2.1zM13.1 2.8v-.4c0-1.1-.9-2-2-2H4.8c-1.1 0-2 .9-2 2v3.4h18.4v-1c0-1.1-.9-2-2-2h-6.1z" />
-				<path
-					fill="#fff"
-					d="M14.4 18.7L12 17.4l-2.4 1.3.5-2.6-1.9-1.9 2.6-.4 1.2-2.4 1.2 2.4 2.6.4-1.9 1.9z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/folder.js b/assets/js/components/icons/folder.js
deleted file mode 100644
index 22e6287e4e5..00000000000
--- a/assets/js/components/icons/folder.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fillRule="nonzero"
-					d="M21.913 7.0946H2.0254c-1.1708 0-2.0984.9908-2.0205 2.16l.741 11.0724c.0714 1.0638.9552 1.8892 2.0206 1.8892h18.4054c1.0654 0 1.9492-.8254 2.0205-1.8892l.7411-11.0724c.0779-1.1692-.8497-2.16-2.0205-2.16zm-8.8006-4.6573h5.987c1.119 0 2.0255.9065 2.0255 2.0254v.934H2.8103V2.0255C2.8103.9064 3.7168 0 4.8357 0h6.2513c1.119 0 2.0254.9065 2.0254 2.0254v.4119zm-7.0589 11.619a.926.926 0 1 1 0-1.852h11.8297a.926.926 0 1 1 0 1.852H6.0535z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/index.js b/assets/js/components/icons/index.js
deleted file mode 100644
index 192eca5badb..00000000000
--- a/assets/js/components/icons/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// Export each icon as a named component.
-export { default as IconAllReviews } from './all-reviews';
-export { default as IconCheckChecked } from './checkbox-checked';
-export { default as IconCheckUnchecked } from './checkbox-unchecked';
-export { default as IconTrash } from './trash';
-export { default as IconFolder } from './folder';
-export { default as IconFolderStar } from './folder-star';
-export { default as IconProductOnSale } from './product-on-sale';
-export { default as IconProductSearch } from './product-search';
-export { default as IconProductTag } from './product-tag';
-export { default as IconNewReleases } from './new-releases';
-export { default as IconRadioSelected } from './radio-selected';
-export { default as IconRadioUnselected } from './radio-unselected';
-export { default as IconReviewsByProduct } from './reviews-by-product';
-export { default as IconReviewsByCategory } from './reviews-by-category';
-export { default as IconWidgets } from './widgets';
-export { default as IconWoo } from './woo';
-export { default as IconMoney } from './money';
-export { default as IconExternal } from './external';
diff --git a/assets/js/components/icons/money.js b/assets/js/components/icons/money.js
deleted file mode 100644
index 2de8dc66d55..00000000000
--- a/assets/js/components/icons/money.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<mask
-					id="money-mask"
-					width="20"
-					height="14"
-					x="2"
-					y="5"
-					maskUnits="userSpaceOnUse"
-				>
-					<path
-						fill="#fff"
-						fillRule="evenodd"
-						d="M2 5v14h20V5H2zm5 12c0-1.657-1.343-3-3-3v-4c1.657 0 3-1.343 3-3h10c0 1.657 1.343 3 3 3v4c-1.657 0-3 1.343-3 3H7zm7-5c0-1.7-.9-3-2-3s-2 1.3-2 3 .9 3 2 3 2-1.3 2-3z"
-						clipRule="evenodd"
-					/>
-				</mask>
-				<g mask="url(#money-mask)">
-					<path d="M0 0h24v24H0z" />
-				</g>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/new-releases.js b/assets/js/components/icons/new-releases.js
deleted file mode 100644
index ede11af9bc3..00000000000
--- a/assets/js/components/icons/new-releases.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		className="material-icon"
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path d="M0 0h24v24H0z" fill="none" />
-				<path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z" />
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/product-on-sale.js b/assets/js/components/icons/product-on-sale.js
deleted file mode 100644
index 3f757f2a197..00000000000
--- a/assets/js/components/icons/product-on-sale.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default ( { className } ) => (
-	<Icon
-		className={ className }
-		icon={
-			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<path d="M21.5,0h-9.3L0.8,11.4c-1,1-1,2.6,0,3.6L9,23.2c1,1,2.6,1,3.6,0c0,0,0,0,0,0L24,11.9V2.5C24,1.1,22.9,0,21.5,0z" />
-				<circle fill="#fff" cx="18.1" cy="5.8" r="2.5" />
-				<path
-					fill="#fff"
-					d="M5.8,10.5C5.8,10,6,9.6,6.3,9.2s0.8-0.5,1.3-0.5c0.6,0,1,0.2,1.3,0.5s0.5,0.8,0.5,1.3V11 c0,0.5-0.2,1-0.5,1.3s-0.8,0.5-1.3,0.5c-0.6,0-1-0.2-1.3-0.5s-0.5-0.8-0.5-1.3V10.5z M7,11c0,0.2,0.1,0.4,0.2,0.6 s0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2s0.2-0.3,0.2-0.6v-0.4c0-0.2-0.1-0.4-0.2-0.6S7.9,9.7,7.7,9.7c-0.2,0-0.4,0.1-0.5,0.2 S7,10.3,7,10.5V11z M8,16.8l-0.8-0.4l4.2-6.7l0.8,0.4L8,16.8z M9.9,15.3c0-0.5,0.2-1,0.5-1.3s0.8-0.5,1.3-0.5 c0.6,0,1,0.2,1.3,0.5s0.5,0.8,0.5,1.3v0.4c0,0.5-0.2,0.9-0.5,1.3s-0.8,0.5-1.3,0.5c-0.6,0-1-0.2-1.4-0.5s-0.5-0.8-0.5-1.3V15.3z  M11,15.8c0,0.2,0.1,0.4,0.2,0.6s0.3,0.2,0.5,0.2c0.5,0,0.7-0.3,0.7-0.8v-0.4c0-0.2-0.1-0.4-0.2-0.6s-0.3-0.2-0.5-0.2 s-0.4,0.1-0.5,0.2S11,15.1,11,15.3V15.8z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/product-search.js b/assets/js/components/icons/product-search.js
deleted file mode 100644
index ef01dce2a0f..00000000000
--- a/assets/js/components/icons/product-search.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default ( { className } ) => (
-	<Icon
-		className={ className }
-		icon={
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 23">
-				<path d="M13.0993 2.41207V2.01231C13.0993 0.912976 12.1999 0.0135193 11.1005 0.0135193H4.80435C3.70501 0.0135193 2.80556 0.912976 2.80556 2.01231V5.41026H21.1944V4.5108C21.1944 3.41147 20.295 2.51201 19.1957 2.51201H13.0993V2.41207Z" />
-				<path d="M8.60759 11.3092C7.50759 12.4092 7.50759 14.2092 8.60759 15.3092C9.70759 16.4092 11.5076 16.4092 12.6076 15.3092C13.7076 14.2092 13.7076 12.4092 12.6076 11.3092C11.5076 10.2092 9.70759 10.2092 8.60759 11.3092Z" />
-				<path d="M22.0076 7.10919H2.00759C0.80759 7.10919 -0.0924101 8.10919 0.00758988 9.30919L0.70759 20.4092C0.80759 21.5092 1.70759 22.3092 2.70759 22.3092H21.2076C22.3076 22.3092 23.2076 21.5092 23.2076 20.4092L24.0076 9.30919C24.1076 8.10919 23.1076 7.10919 22.0076 7.10919ZM16.5076 20.2092L13.4076 17.1092V16.5092L13.3076 16.4092C11.7076 17.8092 9.30759 17.7092 7.80759 16.2092C6.20759 14.6092 6.20759 12.0092 7.80759 10.4092C9.40759 8.80919 12.0076 8.80919 13.6076 10.4092C15.1076 11.9092 15.2076 14.3092 13.8076 15.9092L13.9076 16.0092H14.4076L17.5076 19.1092L16.5076 20.2092Z" />
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/product-tag.js b/assets/js/components/icons/product-tag.js
deleted file mode 100644
index 39704783233..00000000000
--- a/assets/js/components/icons/product-tag.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default ( { className } ) => (
-	<Icon
-		className={ className }
-		icon={
-			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<path d="M21.45,0H12.14L.75,11.4A2.55,2.55,0,0,0,.75,15L9,23.25a2.55,2.55,0,0,0,3.61,0L24,11.86V2.55A2.55,2.55,0,0,0,21.45,0Z" />
-				<circle fill="#fff" cx="18.07" cy="5.75" r="2.47" />
-				<path
-					fill="#fff"
-					d="M9.27,9.53c-.14-.53.19-.85.72-.72l3.17.82a1.83,1.83,0,0,1,1.21,1.21L15.19,14c.13.53-.19.86-.72.72l-3.17-.81a1.9,1.9,0,0,1-1.22-1.22Z"
-				/>
-				<path
-					fill="#fff"
-					d="M14.14,15.71a.52.52,0,0,1,.26,1L12.09,19a1.94,1.94,0,0,1-1.68.46l-3.16-.81a.52.52,0,0,1-.26-1L9.3,15.36A1.93,1.93,0,0,1,11,14.9Z"
-				/>
-				<path
-					fill="#fff"
-					d="M8.29,9.86a.52.52,0,0,0-1-.26L5,11.91a1.94,1.94,0,0,0-.46,1.68l.81,3.16a.52.52,0,0,0,1,.26L8.64,14.7A1.93,1.93,0,0,0,9.1,13Z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/radio-selected.js b/assets/js/components/icons/radio-selected.js
deleted file mode 100644
index 85024f0adef..00000000000
--- a/assets/js/components/icons/radio-selected.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="#1E8CBE"
-					d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/radio-unselected.js b/assets/js/components/icons/radio-unselected.js
deleted file mode 100644
index 728157fc787..00000000000
--- a/assets/js/components/icons/radio-unselected.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="#6C7781"
-					d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/reviews-by-category.js b/assets/js/components/icons/reviews-by-category.js
deleted file mode 100644
index 6321ca5e649..00000000000
--- a/assets/js/components/icons/reviews-by-category.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default ( { className } ) => (
-	<Icon
-		className={ className }
-		icon={
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
-				<path d="M21.9943 7.0957H2.00638C0.807102 7.0957 -0.0923543 8.0951 0.0075853 9.29437L0.707162 20.3877C0.807102 21.487 1.70656 22.2865 2.70595 22.2865H21.1948C22.2941 22.2865 23.1936 21.487 23.1936 20.3877L23.9931 9.29437C24.093 8.0951 23.0936 7.0957 21.9943 7.0957Z" />
-				<path d="M13.0921 2.39855V1.99879C13.0921 0.899456 12.1926 0 11.0933 0H4.7971C3.69777 0 2.79831 0.899456 2.79831 1.99879V5.39674H21.1872V4.49728C21.1872 3.39795 20.2877 2.49849 19.1884 2.49849H13.0921V2.39855Z" />
-				<path
-					fill="white"
-					d="M8.63115 17.126L6.5415 15.9449L4.361 17.126L4.72442 14.6729L2.99819 13.0376L5.45125 12.6742L6.5415 10.4937L7.5409 12.6742L9.99396 13.0376L8.26773 14.6729L8.63115 17.126Z"
-				/>
-				<path
-					fill="white"
-					d="M19.1907 13.5918H12.9899C12.547 13.5918 12.1926 13.1921 12.1926 12.6924C12.1926 12.1927 12.547 11.7929 12.9899 11.7929H19.1907C19.6336 11.7929 19.9879 12.1927 19.9879 12.6924C19.9879 13.1921 19.6336 13.5918 19.1907 13.5918Z"
-				/>
-				<path
-					fill="white"
-					d="M19.1907 17.1897H12.9899C12.547 17.1897 12.1926 16.7899 12.1926 16.2902C12.1926 15.7905 12.547 15.3907 12.9899 15.3907H19.1907C19.6336 15.3907 19.9879 15.7905 19.9879 16.2902C19.9879 16.7899 19.6336 17.1897 19.1907 17.1897Z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/reviews-by-product.js b/assets/js/components/icons/reviews-by-product.js
deleted file mode 100644
index 1d776d5f67b..00000000000
--- a/assets/js/components/icons/reviews-by-product.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default ( { className } ) => (
-	<Icon
-		className={ className }
-		icon={
-			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<path d="M2.3,17.3h9.3c0.1,0,0.3,0,0.4,0.1l5.9,4.2c0.3,0.2,0.7,0,0.7-0.3v-3.7c0-0.2,0.2-0.4,0.4-0.4H22 c1.1,0,2-0.9,2-2V2.5c0-1.2-0.7-2.2-2-2.2H2.3C0.7,0.2,0,0.9,0,2.5v12.3C0,16.3,0.7,17.3,2.3,17.3z" />
-				<polygon
-					fill="#ffffff"
-					points="8.8,12.1 6.5,10.9 4.1,12.1 4.5,9.5 2.6,7.6 5.3,7.2 6.5,4.8 7.6,7.2 10.3,7.6 8.4,9.5"
-				/>
-				<path
-					fill="#ffffff"
-					d="M20.7,7.9h-7c-0.5,0-0.9-0.4-0.9-0.9S13.2,6,13.7,6h7c0.5,0,0.9,0.4,0.9,0.9S21.2,7.9,20.7,7.9z"
-				/>
-				<path
-					fill="#ffffff"
-					d="M20.7,11.5h-7c-0.5,0-0.9-0.4-0.9-0.9s0.4-0.9,0.9-0.9h7c0.5,0,0.9,0.4,0.9,0.9S21.2,11.5,20.7,11.5z"
-				/>
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/trash.js b/assets/js/components/icons/trash.js
deleted file mode 100644
index efb50fde3b6..00000000000
--- a/assets/js/components/icons/trash.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-// This uses `delete_outline` icon from Material.
-// https://material.io/resources/icons/?icon=delete_outline&style=baseline
-// We are using it as `trash` or `trashcan` or `remove-item`.
-export default () => (
-	<Icon
-		className="material-icon"
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z" />
-				<path fill="none" d="M0 0h24v24H0V0z" />
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/widgets.js b/assets/js/components/icons/widgets.js
deleted file mode 100644
index 7563e621d77..00000000000
--- a/assets/js/components/icons/widgets.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export default () => (
-	<Icon
-		className="material-icon"
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path d="M13 13v8h8v-8h-8zM3 21h8v-8H3v8zM3 3v8h8V3H3zm13.66-1.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65z" />
-				<path d="M0 0h24v24H0z" fill="none" />
-			</svg>
-		}
-	/>
-);
diff --git a/assets/js/components/icons/woo.js b/assets/js/components/icons/woo.js
deleted file mode 100644
index 3150c006943..00000000000
--- a/assets/js/components/icons/woo.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { Icon } from '@wordpress/components';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-const IconWoo = ( { size = 20, className } ) => (
-	<Icon
-		className={ classNames( 'woo-icon', className ) }
-		icon={
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				height={ size }
-				width={ Math.floor( size * 1.67 ) }
-				viewBox="0 0 245 145"
-			>
-				<path
-					fill="#96588A"
-					d="M22.76 0h199.1a22.77 22.77 0 0 1 22.8 22.76v75.92a22.77 22.77 0 0 1-22.78 22.78h-71.41l9.77 24-43.13-24H22.76C10.1946 121.449.011 111.2654 0 98.7V22.76C.011 10.1946 10.1946.011 22.76 0z"
-				/>
-				<path
-					fill="#FFF"
-					fillRule="nonzero"
-					d="M12.32 20.63a8.16 8.16 0 0 1 6.25-3.09c5.0733-.36 7.9867 2.0333 8.74 7.18 3.14 20.86 6.4933 38.5633 10.06 53.11l21.92-41.69c2-3.76 4.49-5.76 7.52-6 4.3867-.3067 7.13 2.49 8.23 8.39a186 186 0 0 0 9.47 34.23c2.62-25.38 7.0133-43.7133 13.18-55a7.73 7.73 0 0 1 6.6-4.43 8.8 8.8 0 0 1 6.32 2 7.75 7.75 0 0 1 3.05 5.74 8.52 8.52 0 0 1-1 4.77c-3.9 7.24-7.12 19.28-9.66 36.12-2.48 16.2533-3.3967 28.9633-2.75 38.13a12.25 12.25 0 0 1-1.16 6.56 6.32 6.32 0 0 1-5.33 3.53c-2.6667.18-5.3033-1.0567-7.91-3.71-9.2933-9.54-16.6567-23.7267-22.09-42.56C57.3 76.7167 52.48 86.3333 49.3 92.76c-5.86 11.3333-10.89 17.13-15.09 17.39-2.7333.1933-5.0667-2.0933-7-6.86-5.1-13.0933-10.5833-38.4033-16.45-75.93a8.56 8.56 0 0 1 1.56-6.73zM227.23 36.34a23.17 23.17 0 0 0-16-11.59 26.25 26.25 0 0 0-5.42-.58c-9.5867 0-17.41 5-23.47 15a53 53 0 0 0-7.78 28.16c0 7.7333 1.6167 14.3333 4.85 19.8a23.15 23.15 0 0 0 16 11.59 26.28 26.28 0 0 0 5.42.59c9.68 0 17.5033-5 23.47-15A53.89 53.89 0 0 0 232.08 56c0-7.7333-1.6167-14.2867-4.85-19.66zm-12.61 27.72c-1.3733 6.56-3.9167 11.5-7.63 14.82-2.9267 2.6667-5.6133 3.7433-8.06 3.23-2.4467-.5133-4.4033-2.6667-5.87-6.46a25.68 25.68 0 0 1-1.76-9.09 35.9 35.9 0 0 1 .73-7.34 33 33 0 0 1 5.28-11.88c3.3333-4.8933 6.8067-6.9467 10.42-6.16 2.44.4867 4.3933 2.64 5.86 6.46a25.68 25.68 0 0 1 1.76 9.12 35.73 35.73 0 0 1-.73 7.33v-.03zM164.57 36.34a23.2 23.2 0 0 0-16-11.59 26.42 26.42 0 0 0-5.43-.58c-9.5933 0-17.4167 5-23.47 15a53 53 0 0 0-7.78 28.16c0 7.7333 1.6133 14.3333 4.84 19.8a23.19 23.19 0 0 0 16 11.59 26.44 26.44 0 0 0 5.43.59c9.68 0 17.5033-5 23.47-15A53.88 53.88 0 0 0 169.4 56c0-7.7333-1.6133-14.2867-4.84-19.66h.01zm-12.61 27.72c-1.3667 6.56-3.91 11.5-7.63 14.82-2.93 2.64-5.63 3.72-8.07 3.23-2.44-.49-4.4-2.64-5.86-6.46a25.7 25.7 0 0 1-1.77-9.09 35.9 35.9 0 0 1 .74-7.34 33 33 0 0 1 5.28-11.88c3.3333-4.8933 6.8067-6.9467 10.42-6.16 2.44.4867 4.3933 2.64 5.86 6.46a25.91 25.91 0 0 1 1.76 9.12 35.73 35.73 0 0 1-.73 7.33v-.03z"
-				/>
-			</svg>
-		}
-	/>
-);
-
-IconWoo.propTypes = {
-	size: PropTypes.number,
-	className: PropTypes.string,
-};
-
-export default IconWoo;
diff --git a/assets/js/components/product-control/index.js b/assets/js/components/product-control/index.js
index bc08893ce44..b1f29bbe8e2 100644
--- a/assets/js/components/product-control/index.js
+++ b/assets/js/components/product-control/index.js
@@ -12,10 +12,7 @@ import {
 	withSearchedProducts,
 	withTransformSingleSelectToMultipleSelect,
 } from '@woocommerce/block-hocs';
-import {
-	IconRadioSelected,
-	IconRadioUnselected,
-} from '@woocommerce/block-components/icons';
+import { Icon, radioSelected, radioUnselected } from '@woocommerce/icons';
 import ErrorMessage from '@woocommerce/block-components/error-placeholder/error-message.js';
 
 /**
@@ -32,7 +29,11 @@ function getHighlightedName( name, search ) {
 }
 
 const getInteractionIcon = ( isSelected = false ) => {
-	return isSelected ? <IconRadioSelected /> : <IconRadioUnselected />;
+	return isSelected ? (
+		<Icon icon={ radioSelected } />
+	) : (
+		<Icon icon={ radioUnselected } />
+	);
 };
 
 const messages = {
@@ -89,9 +90,9 @@ const ProductControl = ( {
 		};
 
 		if ( item.breadcrumbs.length ) {
-			a11yProps[ 'aria-label' ] = `${ item.breadcrumbs[ 0 ] }: ${
-				item.name
-			}`;
+			a11yProps[
+				'aria-label'
+			] = `${ item.breadcrumbs[ 0 ] }: ${ item.name }`;
 		}
 
 		if ( variationsCount ) {
diff --git a/assets/js/hocs/with-feedback-prompt/feedback-prompt.js b/assets/js/hocs/with-feedback-prompt/feedback-prompt.js
index f6f6626b413..6cb1d1d3690 100644
--- a/assets/js/hocs/with-feedback-prompt/feedback-prompt.js
+++ b/assets/js/hocs/with-feedback-prompt/feedback-prompt.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import Gridicon from 'gridicons';
+import { Icon, comment, external } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import './style.scss';
 const FeedbackPrompt = ( { text } ) => {
 	return (
 		<div className="wc-block-feedback-prompt">
-			<Gridicon icon="comment" />
+			<Icon icon={ comment } />
 			<h2 className="wc-block-feedback-prompt__title">
 				{ __( 'Feedback?', 'woo-gutenberg-products-block' ) }
 			</h2>
@@ -32,7 +32,7 @@ const FeedbackPrompt = ( { text } ) => {
 					'Give us your feedback.',
 					'woo-gutenberg-products-block'
 				) }
-				<Gridicon icon="external" size={ 16 } />
+				<Icon icon={ external } size={ 16 } />
 			</a>
 		</div>
 	);
diff --git a/assets/js/icons/icon/index.js b/assets/js/icons/icon/index.js
new file mode 100644
index 00000000000..ae8f67d9d02
--- /dev/null
+++ b/assets/js/icons/icon/index.js
@@ -0,0 +1,14 @@
+/**
+ * External 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/assets/js/icons/index.js b/assets/js/icons/index.js
new file mode 100644
index 00000000000..86b2af4e6fd
--- /dev/null
+++ b/assets/js/icons/index.js
@@ -0,0 +1,31 @@
+export { default as Icon } from './icon';
+
+export { default as bill } from './library/bill';
+export { default as card } from './library/card';
+export { default as cart } from './library/cart';
+export { default as comment } from './library/comment';
+export { default as discussion } from './library/discussion';
+export { default as exclamation } from './library/exclamation';
+export { default as external } from './library/external';
+export { default as folderStared } from './library/folder-stared';
+export { default as folder } from './library/folder';
+export { default as image } from './library/image';
+export { default as grid } from './library/grid';
+export { default as list } from './library/list';
+export { default as more } from './library/more';
+export { default as notice } from './library/notice';
+export { default as tags } from './library/tags';
+export { default as radioSelected } from './library/radio-selected';
+export { default as radioUnselected } from './library/radio-unselected';
+export { default as review } from './library/review';
+export { default as search } from './library/search';
+export { default as server } from './library/server';
+export { default as star } from './library/star';
+export { default as stonks } from './library/stonks';
+export { default as tag } from './library/tag';
+export { default as thumbUp } from './library/thumb-up';
+export { default as toggle } from './library/toggle';
+export { default as trash } from './library/trash';
+export { default as truck } from './library/truck';
+export { default as widgets } from './library/widgets';
+export { default as woo } from './library/woo';
diff --git a/assets/js/icons/library/bill.js b/assets/js/icons/library/bill.js
new file mode 100644
index 00000000000..458e89f42f5
--- /dev/null
+++ b/assets/js/icons/library/bill.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const grid = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M11 17h2v-1h1c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1h-3v-1h4V8h-2V7h-2v1h-1c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3v1H9v2h2v1zm9-13H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V6h16v12z" />
+	</SVG>
+);
+
+export default grid;
diff --git a/assets/js/icons/library/card.js b/assets/js/icons/library/card.js
new file mode 100644
index 00000000000..b40389ad152
--- /dev/null
+++ b/assets/js/icons/library/card.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const card = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" />
+	</SVG>
+);
+
+export default card;
diff --git a/assets/js/icons/library/cart.js b/assets/js/icons/library/cart.js
new file mode 100644
index 00000000000..3bb24c36d29
--- /dev/null
+++ b/assets/js/icons/library/cart.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const cart = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" />
+	</SVG>
+);
+
+export default cart;
diff --git a/assets/js/icons/library/comment.js b/assets/js/icons/library/comment.js
new file mode 100644
index 00000000000..79c51dd0c91
--- /dev/null
+++ b/assets/js/icons/library/comment.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const comment = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM20 4v13.17L18.83 16H4V4h16zM6 12h12v2H6zm0-3h12v2H6zm0-3h12v2H6z" />
+	</SVG>
+);
+
+export default comment;
diff --git a/assets/js/icons/library/discussion.js b/assets/js/icons/library/discussion.js
new file mode 100644
index 00000000000..42229301996
--- /dev/null
+++ b/assets/js/icons/library/discussion.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const discussion = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M15 4v7H5.17l-.59.59-.58.58V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z" />
+	</SVG>
+);
+
+export default discussion;
diff --git a/assets/js/icons/library/exclamation.js b/assets/js/icons/library/exclamation.js
new file mode 100644
index 00000000000..a9b69c5c7ee
--- /dev/null
+++ b/assets/js/icons/library/exclamation.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const exclamation = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-4.51 2.11l.26 2.79-2.74.62-1.43 2.41L12 18.82l-2.58 1.11-1.43-2.41-2.74-.62.26-2.8L3.66 12l1.85-2.12-.26-2.78 2.74-.61 1.43-2.41L12 5.18l2.58-1.11 1.43 2.41 2.74.62-.26 2.79L20.34 12l-1.85 2.11zM11 15h2v2h-2zm0-8h2v6h-2z" />
+	</SVG>
+);
+
+export default exclamation;
diff --git a/assets/js/icons/library/external.js b/assets/js/icons/library/external.js
new file mode 100644
index 00000000000..7d8fc9a2eac
--- /dev/null
+++ b/assets/js/icons/library/external.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const external = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<mask
+			id="external-mask"
+			width="24"
+			height="24"
+			x="0"
+			y="0"
+			maskUnits="userSpaceOnUse"
+		>
+			<path
+				fill="#fff"
+				d="M6.3431 6.3431v1.994l7.8984.0072-8.6055 8.6054 1.4142 1.4143 8.6055-8.6055.0071 7.8984h1.994V6.3431H6.3431z"
+			/>
+		</mask>
+		<g mask="url(#external-mask)">
+			<path d="M0 0h24v24H0z" />
+		</g>
+	</SVG>
+);
+
+export default external;
diff --git a/assets/js/icons/library/folder-stared.js b/assets/js/icons/library/folder-stared.js
new file mode 100644
index 00000000000..3e2c2efd39e
--- /dev/null
+++ b/assets/js/icons/library/folder-stared.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const folderStared = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10zm-6.92-3.96L12.39 17 15 15.47 17.61 17l-.69-2.96 2.3-1.99-3.03-.26L15 9l-1.19 2.79-3.03.26z" />
+	</SVG>
+);
+
+export default folderStared;
diff --git a/assets/js/icons/library/folder.js b/assets/js/icons/library/folder.js
new file mode 100644
index 00000000000..5e53e4f71d9
--- /dev/null
+++ b/assets/js/icons/library/folder.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const folder = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" />
+	</SVG>
+);
+
+export default folder;
diff --git a/assets/js/icons/library/grid.js b/assets/js/icons/library/grid.js
new file mode 100644
index 00000000000..646d0049377
--- /dev/null
+++ b/assets/js/icons/library/grid.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const grid = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
+	</SVG>
+);
+
+export default grid;
diff --git a/assets/js/icons/library/image.js b/assets/js/icons/library/image.js
new file mode 100644
index 00000000000..06780f1d444
--- /dev/null
+++ b/assets/js/icons/library/image.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const image = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" />
+	</SVG>
+);
+
+export default image;
diff --git a/assets/js/icons/library/list.js b/assets/js/icons/library/list.js
new file mode 100644
index 00000000000..74ccc256b68
--- /dev/null
+++ b/assets/js/icons/library/list.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const list = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M11 7h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20.1 3H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM19 19H5V5h14v14z" />
+	</SVG>
+);
+
+export default list;
diff --git a/assets/js/icons/library/more.js b/assets/js/icons/library/more.js
new file mode 100644
index 00000000000..024876bd329
--- /dev/null
+++ b/assets/js/icons/library/more.js
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const more = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7.07L2.4 12l4.66-7H22v14z" />
+		<circle cx="9" cy="12" r="1.5" />
+		<circle cx="14" cy="12" r="1.5" />
+		<circle cx="19" cy="12" r="1.5" />
+	</SVG>
+);
+
+export default more;
diff --git a/assets/js/icons/library/notice.js b/assets/js/icons/library/notice.js
new file mode 100644
index 00000000000..5d8f7b14610
--- /dev/null
+++ b/assets/js/icons/library/notice.js
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const notice = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+	</SVG>
+);
+
+export default notice;
diff --git a/assets/js/icons/library/radio-selected.js b/assets/js/icons/library/radio-selected.js
new file mode 100644
index 00000000000..10ca5e15e4a
--- /dev/null
+++ b/assets/js/icons/library/radio-selected.js
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const radioSelected = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path
+			fill="#1E8CBE"
+			d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+		/>
+	</SVG>
+);
+
+export default radioSelected;
diff --git a/assets/js/icons/library/radio-unselected.js b/assets/js/icons/library/radio-unselected.js
new file mode 100644
index 00000000000..a30b015e133
--- /dev/null
+++ b/assets/js/icons/library/radio-unselected.js
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const radioUnselected = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path
+			fill="#6C7781"
+			d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+		/>
+	</SVG>
+);
+
+export default radioUnselected;
diff --git a/assets/js/icons/library/review.js b/assets/js/icons/library/review.js
new file mode 100644
index 00000000000..0c98310c524
--- /dev/null
+++ b/assets/js/icons/library/review.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const review = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17l-.59.59-.58.58V4h16v12zm-9.5-2H18v-2h-5.5zm3.86-5.87c.2-.2.2-.51 0-.71l-1.77-1.77c-.2-.2-.51-.2-.71 0L6 11.53V14h2.47l5.89-5.87z" />
+	</SVG>
+);
+
+export default review;
diff --git a/assets/js/icons/library/search.js b/assets/js/icons/library/search.js
new file mode 100644
index 00000000000..927d1ca1b9b
--- /dev/null
+++ b/assets/js/icons/library/search.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const search = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+	</SVG>
+);
+
+export default search;
diff --git a/assets/js/icons/library/server.js b/assets/js/icons/library/server.js
new file mode 100644
index 00000000000..570aa0092fb
--- /dev/null
+++ b/assets/js/icons/library/server.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const server = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z" />
+	</SVG>
+);
+
+export default server;
diff --git a/assets/js/icons/library/star.js b/assets/js/icons/library/star.js
new file mode 100644
index 00000000000..68cb45416a9
--- /dev/null
+++ b/assets/js/icons/library/star.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const star = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" />
+	</SVG>
+);
+
+export default star;
diff --git a/assets/js/icons/library/stonks.js b/assets/js/icons/library/stonks.js
new file mode 100644
index 00000000000..e29ef6a646b
--- /dev/null
+++ b/assets/js/icons/library/stonks.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+// 🤫
+const stonks = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99l1.5 1.5z" />
+	</SVG>
+);
+
+export default stonks;
diff --git a/assets/js/icons/library/tag.js b/assets/js/icons/library/tag.js
new file mode 100644
index 00000000000..86b9c7d0a4a
--- /dev/null
+++ b/assets/js/icons/library/tag.js
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const tag = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM13 20.01L4 11V4h7v-.01l9 9-7 7.02z" />
+		<circle cx="6.5" cy="6.5" r="1.5" />
+		<path d="M8.9 12.55c0 .57.23 1.07.6 1.45l3.5 3.5 3.5-3.5c.37-.37.6-.89.6-1.45 0-1.13-.92-2.05-2.05-2.05-.57 0-1.08.23-1.45.6l-.6.6-.6-.59c-.37-.38-.89-.61-1.45-.61-1.13 0-2.05.92-2.05 2.05z" />
+	</SVG>
+);
+
+export default tag;
diff --git a/assets/js/icons/library/tags.js b/assets/js/icons/library/tags.js
new file mode 100644
index 00000000000..159e173084a
--- /dev/null
+++ b/assets/js/icons/library/tags.js
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const tags = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zm-9.2 3.8L7.87 7.79l7.35-3.04h.01l4.95 11.95-7.35 3.05z" />
+		<circle cx="11" cy="9" r="1" />
+		<path d="M5.88 19.75c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z" />
+	</SVG>
+);
+
+export default tags;
diff --git a/assets/js/icons/library/thumb-up.js b/assets/js/icons/library/thumb-up.js
new file mode 100644
index 00000000000..42efd0b0827
--- /dev/null
+++ b/assets/js/icons/library/thumb-up.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const thumbUp = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path opacity=".87" fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M21 8h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2zm0 4l-3 7H9V9l4.34-4.34L12.23 10H21v2zM1 9h4v12H1z" />
+	</SVG>
+);
+
+export default thumbUp;
diff --git a/assets/js/icons/library/toggle.js b/assets/js/icons/library/toggle.js
new file mode 100644
index 00000000000..5f36b359428
--- /dev/null
+++ b/assets/js/icons/library/toggle.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const toggle = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0z" />
+		<path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+	</SVG>
+);
+
+export default toggle;
diff --git a/assets/js/icons/library/trash.js b/assets/js/icons/library/trash.js
new file mode 100644
index 00000000000..bc4290b717b
--- /dev/null
+++ b/assets/js/icons/library/trash.js
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+// This uses `delete_outline` icon from Material.
+// https://material.io/resources/icons/?icon=delete_outline&style=baseline
+// We are using it as `trash` or `trashcan` or `remove-item`.
+const trash = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z" />
+		<path fill="none" d="M0 0h24v24H0V0z" />
+	</SVG>
+);
+
+export default trash;
diff --git a/assets/js/icons/library/truck.js b/assets/js/icons/library/truck.js
new file mode 100644
index 00000000000..8dc97c4c4b7
--- /dev/null
+++ b/assets/js/icons/library/truck.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const truck = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zm-.5 1.5l1.96 2.5H17V9.5h2.5zM6 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm2.22-3c-.55-.61-1.33-1-2.22-1s-1.67.39-2.22 1H3V6h12v9H8.22zM18 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" />
+	</SVG>
+);
+
+export default truck;
diff --git a/assets/js/icons/library/widgets.js b/assets/js/icons/library/widgets.js
new file mode 100644
index 00000000000..499a5de8a69
--- /dev/null
+++ b/assets/js/icons/library/widgets.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const widgets = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M16.66 4.52l2.83 2.83-2.83 2.83-2.83-2.83 2.83-2.83M9 5v4H5V5h4m10 10v4h-4v-4h4M9 15v4H5v-4h4m7.66-13.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65zM11 3H3v8h8V3zm10 10h-8v8h8v-8zm-10 0H3v8h8v-8z" />
+	</SVG>
+);
+
+export default widgets;
diff --git a/assets/js/icons/library/woo.js b/assets/js/icons/library/woo.js
new file mode 100644
index 00000000000..434c5d6d49a
--- /dev/null
+++ b/assets/js/icons/library/woo.js
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const woo = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 145">
+		<path
+			fill="#96588A"
+			d="M22.76 0h199.1a22.77 22.77 0 0 1 22.8 22.76v75.92a22.77 22.77 0 0 1-22.78 22.78h-71.41l9.77 24-43.13-24H22.76C10.1946 121.449.011 111.2654 0 98.7V22.76C.011 10.1946 10.1946.011 22.76 0z"
+		/>
+		<path
+			fill="#FFF"
+			fillRule="nonzero"
+			d="M12.32 20.63a8.16 8.16 0 0 1 6.25-3.09c5.0733-.36 7.9867 2.0333 8.74 7.18 3.14 20.86 6.4933 38.5633 10.06 53.11l21.92-41.69c2-3.76 4.49-5.76 7.52-6 4.3867-.3067 7.13 2.49 8.23 8.39a186 186 0 0 0 9.47 34.23c2.62-25.38 7.0133-43.7133 13.18-55a7.73 7.73 0 0 1 6.6-4.43 8.8 8.8 0 0 1 6.32 2 7.75 7.75 0 0 1 3.05 5.74 8.52 8.52 0 0 1-1 4.77c-3.9 7.24-7.12 19.28-9.66 36.12-2.48 16.2533-3.3967 28.9633-2.75 38.13a12.25 12.25 0 0 1-1.16 6.56 6.32 6.32 0 0 1-5.33 3.53c-2.6667.18-5.3033-1.0567-7.91-3.71-9.2933-9.54-16.6567-23.7267-22.09-42.56C57.3 76.7167 52.48 86.3333 49.3 92.76c-5.86 11.3333-10.89 17.13-15.09 17.39-2.7333.1933-5.0667-2.0933-7-6.86-5.1-13.0933-10.5833-38.4033-16.45-75.93a8.56 8.56 0 0 1 1.56-6.73zM227.23 36.34a23.17 23.17 0 0 0-16-11.59 26.25 26.25 0 0 0-5.42-.58c-9.5867 0-17.41 5-23.47 15a53 53 0 0 0-7.78 28.16c0 7.7333 1.6167 14.3333 4.85 19.8a23.15 23.15 0 0 0 16 11.59 26.28 26.28 0 0 0 5.42.59c9.68 0 17.5033-5 23.47-15A53.89 53.89 0 0 0 232.08 56c0-7.7333-1.6167-14.2867-4.85-19.66zm-12.61 27.72c-1.3733 6.56-3.9167 11.5-7.63 14.82-2.9267 2.6667-5.6133 3.7433-8.06 3.23-2.4467-.5133-4.4033-2.6667-5.87-6.46a25.68 25.68 0 0 1-1.76-9.09 35.9 35.9 0 0 1 .73-7.34 33 33 0 0 1 5.28-11.88c3.3333-4.8933 6.8067-6.9467 10.42-6.16 2.44.4867 4.3933 2.64 5.86 6.46a25.68 25.68 0 0 1 1.76 9.12 35.73 35.73 0 0 1-.73 7.33v-.03zM164.57 36.34a23.2 23.2 0 0 0-16-11.59 26.42 26.42 0 0 0-5.43-.58c-9.5933 0-17.4167 5-23.47 15a53 53 0 0 0-7.78 28.16c0 7.7333 1.6133 14.3333 4.84 19.8a23.19 23.19 0 0 0 16 11.59 26.44 26.44 0 0 0 5.43.59c9.68 0 17.5033-5 23.47-15A53.88 53.88 0 0 0 169.4 56c0-7.7333-1.6133-14.2867-4.84-19.66h.01zm-12.61 27.72c-1.3667 6.56-3.91 11.5-7.63 14.82-2.93 2.64-5.63 3.72-8.07 3.23-2.44-.49-4.4-2.64-5.86-6.46a25.7 25.7 0 0 1-1.77-9.09 35.9 35.9 0 0 1 .74-7.34 33 33 0 0 1 5.28-11.88c3.3333-4.8933 6.8067-6.9467 10.42-6.16 2.44.4867 4.3933 2.64 5.86 6.46a25.91 25.91 0 0 1 1.76 9.12 35.73 35.73 0 0 1-.73 7.33v-.03z"
+		/>
+	</SVG>
+);
+
+export default woo;
diff --git a/assets/js/index.js b/assets/js/index.js
index d8bad76be01..bfcdddf0c5c 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -3,6 +3,7 @@
  */
 import { getCategories, setCategories } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { Icon, woo } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -11,7 +12,6 @@ import '../css/editor.scss';
 import '../css/style.scss';
 import './filters/block-list-block';
 import './filters/get-block-attributes';
-import { IconWoo } from './components/icons';
 
 setCategories( [
 	...getCategories().filter( ( { slug } ) => slug !== 'woocommerce' ),
@@ -19,6 +19,13 @@ setCategories( [
 	{
 		slug: 'woocommerce',
 		title: __( 'WooCommerce', 'woo-gutenberg-products-block' ),
-		icon: <IconWoo />,
+		icon: (
+			<Icon
+				icon={ woo }
+				width={ Math.floor( 20 * 1.67 ) }
+				height={ 20 }
+				className="woo-icon"
+			/>
+		),
 	},
 ] );
diff --git a/bin/webpack-helpers.js b/bin/webpack-helpers.js
index d35cd79a655..bfd27cab0fe 100644
--- a/bin/webpack-helpers.js
+++ b/bin/webpack-helpers.js
@@ -48,13 +48,9 @@ const getAlias = ( options = {} ) => {
 	let { pathPart } = options;
 	pathPart = pathPart ? `${ pathPart }/` : '';
 	return {
-		'@woocommerce/blocks-registry': path.resolve(
-			__dirname,
-			'../assets/js/blocks-registry'
-		),
-		'@woocommerce/block-settings': path.resolve(
+		'@woocommerce/atomic-components': path.resolve(
 			__dirname,
-			'../assets/js/settings/blocks'
+			`../assets/js/${ pathPart }atomic/components/`
 		),
 		'@woocommerce/base-components': path.resolve(
 			__dirname,
@@ -84,10 +80,15 @@ const getAlias = ( options = {} ) => {
 			__dirname,
 			`../assets/js/${ pathPart }hocs`
 		),
-		'@woocommerce/atomic-components': path.resolve(
+		'@woocommerce/blocks-registry': path.resolve(
 			__dirname,
-			`../assets/js/${ pathPart }atomic/components/`
+			'../assets/js/blocks-registry'
+		),
+		'@woocommerce/block-settings': path.resolve(
+			__dirname,
+			'../assets/js/settings/blocks'
 		),
+		'@woocommerce/icons': path.resolve( __dirname, `../assets/js/icons` ),
 		'@woocommerce/resource-previews': path.resolve(
 			__dirname,
 			`../assets/js/${ pathPart }previews/`

From bba4a113388082bcd7092dd2a199726b8907d3c5 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Fri, 24 Jan 2020 13:53:19 +0100
Subject: [PATCH 02/11] add docs

---
 assets/js/icons/README.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 assets/js/icons/README.md

diff --git a/assets/js/icons/README.md b/assets/js/icons/README.md
new file mode 100644
index 00000000000..a9fead331c5
--- /dev/null
+++ b/assets/js/icons/README.md
@@ -0,0 +1,30 @@
+# Icons
+
+WooCommerce Blocks Icons Library.
+
+## Usage
+
+```js
+import { Icon, bill, woo } from '@woocommerce/icons';
+
+<Icon icon={ bill } />
+
+<Icon icon={ bill } size={ 16 } />
+
+<Icon icon={ woo } width={ 20 } height={ Math.floor( 20 * 1.67 ) } />
+```
+
+## Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`size` | `integer` | `24` | Size of icon in pixels.
+
+
+## Adding Icons
+
+1. Add the Icon file to `./library` folder.
+2. Make sure to use `SVG` primitive from `@wordpress/components` and not a native svg, `SVG` offer more accessability features.
+3. Remove Width and Height since they're handled by Icon.
+4. Remove any hardcoded colors on the svg, if necessity, use `CurrentColor`.
+4. Export the Icon in `./library/index.js`.
\ No newline at end of file

From 10d975e1d8f94245e4d4d3e06c1659a36f4bdbe0 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Fri, 24 Jan 2020 14:09:49 +0100
Subject: [PATCH 03/11] add notes and remove gridicons

---
 assets/js/atomic/blocks/product/summary/index.js |  4 ++--
 assets/js/icons/index.js                         |  1 +
 assets/js/icons/library/notes.js                 | 13 +++++++++++++
 package.json                                     |  1 -
 4 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/icons/library/notes.js

diff --git a/assets/js/atomic/blocks/product/summary/index.js b/assets/js/atomic/blocks/product/summary/index.js
index 105f1d97540..144751fd2ab 100644
--- a/assets/js/atomic/blocks/product/summary/index.js
+++ b/assets/js/atomic/blocks/product/summary/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, notes } from '@woocommerce/icons';
 import { ProductSummary } from '@woocommerce/atomic-components/product';
 
 /**
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="aside" />,
+		src: <Icon icon={ notes } />,
 		foreground: '#96588a',
 	},
 
diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js
index 86b2af4e6fd..bc2010a3aa6 100644
--- a/assets/js/icons/index.js
+++ b/assets/js/icons/index.js
@@ -13,6 +13,7 @@ export { default as image } from './library/image';
 export { default as grid } from './library/grid';
 export { default as list } from './library/list';
 export { default as more } from './library/more';
+export { default as notes } from './library/notes';
 export { default as notice } from './library/notice';
 export { default as tags } from './library/tags';
 export { default as radioSelected } from './library/radio-selected';
diff --git a/assets/js/icons/library/notes.js b/assets/js/icons/library/notes.js
new file mode 100644
index 00000000000..1a7c57496a9
--- /dev/null
+++ b/assets/js/icons/library/notes.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const notes = (
+	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0V0z" />
+		<path d="M21 11.01L3 11v2h18zM3 16h12v2H3zM21 6H3v2.01L21 8z" />
+	</SVG>
+);
+
+export default notes;
diff --git a/package.json b/package.json
index 2c9ecd7ea55..5f8fb3ce0c2 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,6 @@
 		"classnames": "2.2.6",
 		"compare-versions": "3.5.1",
 		"downshift": "4.0.8",
-		"gridicons": "3.3.1",
 		"react-number-format": "4.3.1",
 		"trim-html": "0.1.9",
 		"use-debounce": "3.3.0",

From 539fef2e67d6447303fc5fb3c6e3eba915f1c745 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Mon, 27 Jan 2020 12:59:52 +0100
Subject: [PATCH 04/11] update to folderStarred

---
 assets/js/blocks/featured-category/block.js                 | 6 +++---
 assets/js/blocks/featured-category/index.js                 | 4 ++--
 assets/js/icons/index.js                                    | 2 +-
 .../icons/library/{folder-stared.js => folder-starred.js}   | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)
 rename assets/js/icons/library/{folder-stared.js => folder-starred.js} (88%)

diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js
index 15db530a5c0..6fea34bb82f 100644
--- a/assets/js/blocks/featured-category/block.js
+++ b/assets/js/blocks/featured-category/block.js
@@ -31,7 +31,7 @@ import { Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import PropTypes from 'prop-types';
 import { MIN_HEIGHT } from '@woocommerce/block-settings';
-import { Icon, folderStared } from '@woocommerce/icons';
+import { Icon, FolderStarred } from '@woocommerce/icons';
 import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
 import ErrorPlaceholder from '@woocommerce/block-components/error-placeholder';
 
@@ -190,7 +190,7 @@ const FeaturedCategory = ( {
 
 		return (
 			<Placeholder
-				icon={ <Icon icon={ folderStared } /> }
+				icon={ <Icon icon={ FolderStarred } /> }
 				label={ __(
 					'Featured Category',
 					'woo-gutenberg-products-block'
@@ -337,7 +337,7 @@ const FeaturedCategory = ( {
 	const renderNoCategory = () => (
 		<Placeholder
 			className="wc-block-featured-category"
-			icon={ <Icon icon={ folderStared } /> }
+			icon={ <Icon icon={ FolderStarred } /> }
 			label={ __( 'Featured Category', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (
diff --git a/assets/js/blocks/featured-category/index.js b/assets/js/blocks/featured-category/index.js
index 1507d3b3dbe..7930a793db9 100644
--- a/assets/js/blocks/featured-category/index.js
+++ b/assets/js/blocks/featured-category/index.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
-import { Icon, folderStared } from '@woocommerce/icons';
+import { Icon, FolderStarred } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ import { example } from './example';
 registerBlockType( 'woocommerce/featured-category', {
 	title: __( 'Featured Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ folderStared } />,
+		src: <Icon icon={ FolderStarred } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js
index bc2010a3aa6..ca0aa3ab313 100644
--- a/assets/js/icons/index.js
+++ b/assets/js/icons/index.js
@@ -7,7 +7,7 @@ export { default as comment } from './library/comment';
 export { default as discussion } from './library/discussion';
 export { default as exclamation } from './library/exclamation';
 export { default as external } from './library/external';
-export { default as folderStared } from './library/folder-stared';
+export { default as FolderStarred } from './library/folder-stared';
 export { default as folder } from './library/folder';
 export { default as image } from './library/image';
 export { default as grid } from './library/grid';
diff --git a/assets/js/icons/library/folder-stared.js b/assets/js/icons/library/folder-starred.js
similarity index 88%
rename from assets/js/icons/library/folder-stared.js
rename to assets/js/icons/library/folder-starred.js
index 3e2c2efd39e..7ecaa518cec 100644
--- a/assets/js/icons/library/folder-stared.js
+++ b/assets/js/icons/library/folder-starred.js
@@ -3,11 +3,11 @@
  */
 import { SVG } from '@wordpress/components';
 
-const folderStared = (
+const folderStarred = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
 		<path fill="none" d="M0 0h24v24H0V0z" />
 		<path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10zm-6.92-3.96L12.39 17 15 15.47 17.61 17l-.69-2.96 2.3-1.99-3.03-.26L15 9l-1.19 2.79-3.03.26z" />
 	</SVG>
 );
 
-export default folderStared;
+export default folderStarred;

From b3a487b21e98d09e699268a260bea08370154ad3 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Mon, 27 Jan 2020 13:01:25 +0100
Subject: [PATCH 05/11] typos

---
 assets/js/icons/README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/js/icons/README.md b/assets/js/icons/README.md
index a9fead331c5..48b7bb81a78 100644
--- a/assets/js/icons/README.md
+++ b/assets/js/icons/README.md
@@ -23,8 +23,8 @@ Name | Type | Default | Description
 
 ## Adding Icons
 
-1. Add the Icon file to `./library` folder.
-2. Make sure to use `SVG` primitive from `@wordpress/components` and not a native svg, `SVG` offer more accessability features.
-3. Remove Width and Height since they're handled by Icon.
-4. Remove any hardcoded colors on the svg, if necessity, use `CurrentColor`.
-4. Export the Icon in `./library/index.js`.
\ No newline at end of file
+1. Add the icon file to `./library` folder.
+2. Make sure to use `SVG` primitive from `@wordpress/components` and not a native svg. `SVG` offers more accessibility features.
+3. Remove width and height since they're handled by Icon.
+4. Remove any hardcoded colors on the svg. If necessary,, use `CurrentColor`.
+5. Export the Icon in `./library/index.js`.
\ No newline at end of file

From d52b93286e922df7b620b2b464ca19e7bee70337 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Mon, 27 Jan 2020 13:02:53 +0100
Subject: [PATCH 06/11] reorder imports

---
 assets/js/icons/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js
index ca0aa3ab313..4ce3bb8ef04 100644
--- a/assets/js/icons/index.js
+++ b/assets/js/icons/index.js
@@ -9,13 +9,12 @@ export { default as exclamation } from './library/exclamation';
 export { default as external } from './library/external';
 export { default as FolderStarred } from './library/folder-stared';
 export { default as folder } from './library/folder';
-export { default as image } from './library/image';
 export { default as grid } from './library/grid';
+export { default as image } from './library/image';
 export { default as list } from './library/list';
 export { default as more } from './library/more';
 export { default as notes } from './library/notes';
 export { default as notice } from './library/notice';
-export { default as tags } from './library/tags';
 export { default as radioSelected } from './library/radio-selected';
 export { default as radioUnselected } from './library/radio-unselected';
 export { default as review } from './library/review';
@@ -24,6 +23,7 @@ export { default as server } from './library/server';
 export { default as star } from './library/star';
 export { default as stonks } from './library/stonks';
 export { default as tag } from './library/tag';
+export { default as tags } from './library/tags';
 export { default as thumbUp } from './library/thumb-up';
 export { default as toggle } from './library/toggle';
 export { default as trash } from './library/trash';

From ecc02bb5a10479774689f30008426db854e29ac1 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Mon, 27 Jan 2020 13:06:39 +0100
Subject: [PATCH 07/11] update prop name to srcElement

---
 assets/js/atomic/blocks/product/button/index.js        |  2 +-
 assets/js/atomic/blocks/product/image/index.js         |  2 +-
 assets/js/atomic/blocks/product/price/index.js         |  2 +-
 assets/js/atomic/blocks/product/rating/index.js        |  2 +-
 assets/js/atomic/blocks/product/sale-badge/index.js    |  2 +-
 assets/js/atomic/blocks/product/shared-config.js       |  2 +-
 assets/js/atomic/blocks/product/summary/index.js       |  2 +-
 .../js/base/components/checkout/no-shipping/index.js   |  2 +-
 assets/js/blocks/active-filters/index.js               |  2 +-
 assets/js/blocks/attribute-filter/edit.js              |  6 +++---
 assets/js/blocks/attribute-filter/index.js             |  2 +-
 .../cart-checkout/cart/full-cart/cart-line-item-row.js |  2 +-
 assets/js/blocks/cart-checkout/cart/index.js           |  2 +-
 assets/js/blocks/cart-checkout/checkout/index.js       |  2 +-
 assets/js/blocks/featured-category/block.js            |  4 ++--
 assets/js/blocks/featured-category/index.js            |  2 +-
 assets/js/blocks/featured-product/block.js             |  4 ++--
 assets/js/blocks/featured-product/index.js             |  2 +-
 assets/js/blocks/handpicked-products/block.js          |  2 +-
 assets/js/blocks/handpicked-products/index.js          |  2 +-
 assets/js/blocks/price-filter/edit.js                  |  4 ++--
 assets/js/blocks/price-filter/index.js                 |  2 +-
 assets/js/blocks/product-best-sellers/index.js         |  2 +-
 assets/js/blocks/product-categories/block.js           |  2 +-
 assets/js/blocks/product-categories/index.js           |  2 +-
 assets/js/blocks/product-category/block.js             |  4 ++--
 assets/js/blocks/product-category/index.js             |  2 +-
 assets/js/blocks/product-new/index.js                  |  2 +-
 assets/js/blocks/product-on-sale/block.js              |  2 +-
 assets/js/blocks/product-on-sale/index.js              |  2 +-
 assets/js/blocks/product-search/index.js               |  2 +-
 assets/js/blocks/product-tag/block.js                  |  5 ++++-
 assets/js/blocks/product-tag/index.js                  |  2 +-
 assets/js/blocks/product-top-rated/index.js            |  2 +-
 assets/js/blocks/products-by-attribute/block.js        |  2 +-
 assets/js/blocks/products-by-attribute/index.js        |  2 +-
 assets/js/blocks/products/all-products/edit.js         |  4 ++--
 assets/js/blocks/products/all-products/index.js        |  2 +-
 assets/js/blocks/products/utils.js                     |  2 +-
 assets/js/blocks/reviews/all-reviews/index.js          |  2 +-
 .../reviews/all-reviews/no-reviews-placeholder.js      |  5 ++++-
 assets/js/blocks/reviews/reviews-by-category/edit.js   | 10 ++++++++--
 assets/js/blocks/reviews/reviews-by-category/index.js  |  2 +-
 .../reviews-by-category/no-reviews-placeholder.js      |  5 ++++-
 assets/js/blocks/reviews/reviews-by-product/index.js   |  2 +-
 .../reviews-by-product/no-reviews-placeholder.js       |  5 ++++-
 assets/js/components/error-placeholder/index.js        |  2 +-
 assets/js/components/product-control/index.js          |  4 ++--
 assets/js/hocs/with-feedback-prompt/feedback-prompt.js |  4 ++--
 assets/js/icons/README.md                              |  8 ++++----
 assets/js/icons/icon/index.js                          |  4 ++--
 51 files changed, 83 insertions(+), 65 deletions(-)

diff --git a/assets/js/atomic/blocks/product/button/index.js b/assets/js/atomic/blocks/product/button/index.js
index 486977838a1..19820b099c2 100644
--- a/assets/js/atomic/blocks/product/button/index.js
+++ b/assets/js/atomic/blocks/product/button/index.js
@@ -19,7 +19,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Icon icon={ cart } />,
+		src: <Icon srcElement={ cart } />,
 		foreground: '#96588a',
 	},
 	edit( props ) {
diff --git a/assets/js/atomic/blocks/product/image/index.js b/assets/js/atomic/blocks/product/image/index.js
index b91fbe63840..a7684497651 100644
--- a/assets/js/atomic/blocks/product/image/index.js
+++ b/assets/js/atomic/blocks/product/image/index.js
@@ -23,7 +23,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Icon icon={ image } />,
+		src: <Icon srcElement={ image } />,
 		foreground: '#96588a',
 	},
 	attributes: {
diff --git a/assets/js/atomic/blocks/product/price/index.js b/assets/js/atomic/blocks/product/price/index.js
index b75231796f6..a530068ae2a 100644
--- a/assets/js/atomic/blocks/product/price/index.js
+++ b/assets/js/atomic/blocks/product/price/index.js
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Icon icon={ bill } />,
+		src: <Icon srcElement={ bill } />,
 		foreground: '#96588a',
 	},
 
diff --git a/assets/js/atomic/blocks/product/rating/index.js b/assets/js/atomic/blocks/product/rating/index.js
index 7cc526287f6..6add615e786 100644
--- a/assets/js/atomic/blocks/product/rating/index.js
+++ b/assets/js/atomic/blocks/product/rating/index.js
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Icon icon={ star } />,
+		src: <Icon srcElement={ star } />,
 		foreground: '#96588a',
 	},
 
diff --git a/assets/js/atomic/blocks/product/sale-badge/index.js b/assets/js/atomic/blocks/product/sale-badge/index.js
index d854cac2e92..2dcda6f5c95 100644
--- a/assets/js/atomic/blocks/product/sale-badge/index.js
+++ b/assets/js/atomic/blocks/product/sale-badge/index.js
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Icon icon={ tag } />,
+		src: <Icon srcElement={ tag } />,
 		foreground: '#96588a',
 	},
 	supports: {
diff --git a/assets/js/atomic/blocks/product/shared-config.js b/assets/js/atomic/blocks/product/shared-config.js
index 77da71c1f10..dd572f7e109 100644
--- a/assets/js/atomic/blocks/product/shared-config.js
+++ b/assets/js/atomic/blocks/product/shared-config.js
@@ -12,7 +12,7 @@ export default {
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	icon: {
-		src: <Icon icon={ grid } />,
+		src: <Icon srcElement={ grid } />,
 		foreground: '#96588a',
 	},
 	supports: {
diff --git a/assets/js/atomic/blocks/product/summary/index.js b/assets/js/atomic/blocks/product/summary/index.js
index 144751fd2ab..67bf637d4e0 100644
--- a/assets/js/atomic/blocks/product/summary/index.js
+++ b/assets/js/atomic/blocks/product/summary/index.js
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Icon icon={ notes } />,
+		src: <Icon srcElement={ notes } />,
 		foreground: '#96588a',
 	},
 
diff --git a/assets/js/base/components/checkout/no-shipping/index.js b/assets/js/base/components/checkout/no-shipping/index.js
index e85e5d4ff27..ea723f4853d 100644
--- a/assets/js/base/components/checkout/no-shipping/index.js
+++ b/assets/js/base/components/checkout/no-shipping/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 const NoShipping = () => {
 	return (
 		<Placeholder
-			icon={ <Icon icon={ truck } /> }
+			icon={ <Icon srcElement={ truck } /> }
 			label={ __( 'Shipping options', 'woo-gutenberg-products-block' ) }
 			className="wc-block-checkout__no-shipping"
 		>
diff --git a/assets/js/blocks/active-filters/index.js b/assets/js/blocks/active-filters/index.js
index 234f47f0812..21496a2ce21 100644
--- a/assets/js/blocks/active-filters/index.js
+++ b/assets/js/blocks/active-filters/index.js
@@ -14,7 +14,7 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/active-filters', {
 	title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ toggle } />,
+		src: <Icon srcElement={ toggle } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/attribute-filter/edit.js b/assets/js/blocks/attribute-filter/edit.js
index 6a48b480b20..5cb2fcb9f5b 100644
--- a/assets/js/blocks/attribute-filter/edit.js
+++ b/assets/js/blocks/attribute-filter/edit.js
@@ -220,7 +220,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 	const noAttributesPlaceholder = () => (
 		<Placeholder
 			className="wc-block-attribute-filter"
-			icon={ <Icon icon={ server } /> }
+			icon={ <Icon srcElement={ server } /> }
 			label={ __(
 				'Filter Products by Attribute',
 				'woo-gutenberg-products-block'
@@ -246,7 +246,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 			>
 				{ __( 'Add new attribute', 'woo-gutenberg-products-block' ) +
 					' ' }
-				<Icon icon={ external } />
+				<Icon srcElement={ external } />
 			</Button>
 			<Button
 				className="wc-block-attribute-filter__read_more_button"
@@ -357,7 +357,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 		return (
 			<Placeholder
 				className="wc-block-attribute-filter"
-				icon={ <Icon icon={ server } /> }
+				icon={ <Icon srcElement={ server } /> }
 				label={ __(
 					'Filter Products by Attribute',
 					'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/attribute-filter/index.js b/assets/js/blocks/attribute-filter/index.js
index 94b0bdadf3f..d58137e4ace 100644
--- a/assets/js/blocks/attribute-filter/index.js
+++ b/assets/js/blocks/attribute-filter/index.js
@@ -14,7 +14,7 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/attribute-filter', {
 	title: __( 'Filter Products by Attribute', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ server } />,
+		src: <Icon srcElement={ server } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
index 5b54047b3a4..3d5888a65fe 100644
--- a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
+++ b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
@@ -127,7 +127,7 @@ const CartLineItemRow = ( { lineItem } ) => {
 					{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
 				</button>
 				<button className="wc-block-cart-item__remove-icon">
-					<Icon icon={ trash } />
+					<Icon srcElement={ trash } />
 				</button>
 			</td>
 			<td className="wc-block-cart-item__total">
diff --git a/assets/js/blocks/cart-checkout/cart/index.js b/assets/js/blocks/cart-checkout/cart/index.js
index a95eea63030..7ab8cd6fb55 100644
--- a/assets/js/blocks/cart-checkout/cart/index.js
+++ b/assets/js/blocks/cart-checkout/cart/index.js
@@ -19,7 +19,7 @@ import './style.scss';
 registerBlockType( 'woocommerce/cart', {
 	title: __( 'Cart', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ cart } />,
+		src: <Icon srcElement={ cart } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/cart-checkout/checkout/index.js b/assets/js/blocks/cart-checkout/checkout/index.js
index 383e9644229..3e00a9a6183 100644
--- a/assets/js/blocks/cart-checkout/checkout/index.js
+++ b/assets/js/blocks/cart-checkout/checkout/index.js
@@ -15,7 +15,7 @@ import './editor.scss';
 registerBlockType( 'woocommerce/checkout', {
 	title: __( 'Checkout', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ card } />,
+		src: <Icon srcElement={ card } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js
index 6fea34bb82f..43918456f84 100644
--- a/assets/js/blocks/featured-category/block.js
+++ b/assets/js/blocks/featured-category/block.js
@@ -190,7 +190,7 @@ const FeaturedCategory = ( {
 
 		return (
 			<Placeholder
-				icon={ <Icon icon={ FolderStarred } /> }
+				icon={ <Icon srcElement={ FolderStarred } /> }
 				label={ __(
 					'Featured Category',
 					'woo-gutenberg-products-block'
@@ -337,7 +337,7 @@ const FeaturedCategory = ( {
 	const renderNoCategory = () => (
 		<Placeholder
 			className="wc-block-featured-category"
-			icon={ <Icon icon={ FolderStarred } /> }
+			icon={ <Icon srcElement={ FolderStarred } /> }
 			label={ __( 'Featured Category', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (
diff --git a/assets/js/blocks/featured-category/index.js b/assets/js/blocks/featured-category/index.js
index 7930a793db9..fb93f007450 100644
--- a/assets/js/blocks/featured-category/index.js
+++ b/assets/js/blocks/featured-category/index.js
@@ -21,7 +21,7 @@ import { example } from './example';
 registerBlockType( 'woocommerce/featured-category', {
 	title: __( 'Featured Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ FolderStarred } />,
+		src: <Icon srcElement={ FolderStarred } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js
index 86e03bfe892..ab96306a1f7 100644
--- a/assets/js/blocks/featured-product/block.js
+++ b/assets/js/blocks/featured-product/block.js
@@ -85,7 +85,7 @@ const FeaturedProduct = ( {
 			<Fragment>
 				{ getBlockControls() }
 				<Placeholder
-					icon={ <Icon icon={ star } /> }
+					icon={ <Icon srcElement={ star } /> }
 					label={ __(
 						'Featured Product',
 						'woo-gutenberg-products-block'
@@ -383,7 +383,7 @@ const FeaturedProduct = ( {
 	const renderNoProduct = () => (
 		<Placeholder
 			className="wc-block-featured-product"
-			icon={ <Icon icon={ star } /> }
+			icon={ <Icon srcElement={ star } /> }
 			label={ __( 'Featured Product', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (
diff --git a/assets/js/blocks/featured-product/index.js b/assets/js/blocks/featured-product/index.js
index 3569302194b..fc3191123c2 100644
--- a/assets/js/blocks/featured-product/index.js
+++ b/assets/js/blocks/featured-product/index.js
@@ -21,7 +21,7 @@ import Block from './block';
 registerBlockType( 'woocommerce/featured-product', {
 	title: __( 'Featured Product', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ star } />,
+		src: <Icon srcElement={ star } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/handpicked-products/block.js b/assets/js/blocks/handpicked-products/block.js
index d57c8a2c02b..f339adbb8fb 100644
--- a/assets/js/blocks/handpicked-products/block.js
+++ b/assets/js/blocks/handpicked-products/block.js
@@ -129,7 +129,7 @@ class ProductsBlock extends Component {
 
 		return (
 			<Placeholder
-				icon={ <Icon icon={ widgets } /> }
+				icon={ <Icon srcElement={ widgets } /> }
 				label={ __(
 					'Hand-picked Products',
 					'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/handpicked-products/index.js b/assets/js/blocks/handpicked-products/index.js
index 75454d52bae..1680ef9f729 100644
--- a/assets/js/blocks/handpicked-products/index.js
+++ b/assets/js/blocks/handpicked-products/index.js
@@ -16,7 +16,7 @@ import { deprecatedConvertToShortcode } from '../../utils/deprecations';
 registerBlockType( 'woocommerce/handpicked-products', {
 	title: __( 'Hand-picked Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ widgets } />,
+		src: <Icon srcElement={ widgets } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/price-filter/edit.js b/assets/js/blocks/price-filter/edit.js
index 76ed8fc0c33..8959818d233 100644
--- a/assets/js/blocks/price-filter/edit.js
+++ b/assets/js/blocks/price-filter/edit.js
@@ -116,7 +116,7 @@ export default function( { attributes, setAttributes } ) {
 	const noProductsPlaceholder = () => (
 		<Placeholder
 			className="wc-block-price-slider"
-			icon={ <Icon icon={ bill } /> }
+			icon={ <Icon srcElement={ bill } /> }
 			label={ __(
 				'Filter Products by Price',
 				'woo-gutenberg-products-block'
@@ -140,7 +140,7 @@ export default function( { attributes, setAttributes } ) {
 			>
 				{ __( 'Add new product', 'woo-gutenberg-products-block' ) +
 					' ' }
-				<Icon icon={ external } />
+				<Icon srcElement={ external } />
 			</Button>
 			<Button
 				className="wc-block-price-slider__read_more_button"
diff --git a/assets/js/blocks/price-filter/index.js b/assets/js/blocks/price-filter/index.js
index 69e982c3531..3adec0fae8b 100644
--- a/assets/js/blocks/price-filter/index.js
+++ b/assets/js/blocks/price-filter/index.js
@@ -14,7 +14,7 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/price-filter', {
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ bill } />,
+		src: <Icon srcElement={ bill } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-best-sellers/index.js b/assets/js/blocks/product-best-sellers/index.js
index eafd848c7e8..68f49612b40 100644
--- a/assets/js/blocks/product-best-sellers/index.js
+++ b/assets/js/blocks/product-best-sellers/index.js
@@ -18,7 +18,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-best-sellers', {
 	title: __( 'Best Selling Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ stonks } />,
+		src: <Icon srcElement={ stonks } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-categories/block.js b/assets/js/blocks/product-categories/block.js
index 93b5788f2c8..5bd4ceef496 100644
--- a/assets/js/blocks/product-categories/block.js
+++ b/assets/js/blocks/product-categories/block.js
@@ -11,7 +11,7 @@ import ToggleButtonControl from '@woocommerce/block-components/toggle-button-con
 
 const EmptyPlaceholder = () => (
 	<Placeholder
-		icon={ <Icon icon={ list } /> }
+		icon={ <Icon srcElement={ list } /> }
 		label={ __(
 			'Product Categories List',
 			'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/product-categories/index.js b/assets/js/blocks/product-categories/index.js
index 99be0347259..bcbd1afce05 100644
--- a/assets/js/blocks/product-categories/index.js
+++ b/assets/js/blocks/product-categories/index.js
@@ -15,7 +15,7 @@ import Block from './block.js';
 registerBlockType( 'woocommerce/product-categories', {
 	title: __( 'Product Categories List', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ list } />,
+		src: <Icon srcElement={ list } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-category/block.js b/assets/js/blocks/product-category/block.js
index c7ce37efcbc..842e4c4ab50 100644
--- a/assets/js/blocks/product-category/block.js
+++ b/assets/js/blocks/product-category/block.js
@@ -199,7 +199,7 @@ class ProductByCategoryBlock extends Component {
 
 		return (
 			<Placeholder
-				icon={ <Icon icon={ folder } /> }
+				icon={ <Icon srcElement={ folder } /> }
 				label={ __(
 					'Products by Category',
 					'woo-gutenberg-products-block'
@@ -249,7 +249,7 @@ class ProductByCategoryBlock extends Component {
 						attributes={ attributes }
 						EmptyResponsePlaceholder={ () => (
 							<Placeholder
-								icon={ <Icon icon={ folder } /> }
+								icon={ <Icon srcElement={ folder } /> }
 								label={ __(
 									'Products by Category',
 									'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/product-category/index.js b/assets/js/blocks/product-category/index.js
index 35db6b1c5e9..c5331ebe87d 100644
--- a/assets/js/blocks/product-category/index.js
+++ b/assets/js/blocks/product-category/index.js
@@ -22,7 +22,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-category', {
 	title: __( 'Products by Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ folder } />,
+		src: <Icon srcElement={ folder } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-new/index.js b/assets/js/blocks/product-new/index.js
index 29e63b831eb..e6ec9a6a434 100644
--- a/assets/js/blocks/product-new/index.js
+++ b/assets/js/blocks/product-new/index.js
@@ -18,7 +18,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-new', {
 	title: __( 'Newest Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ exclamation } />,
+		src: <Icon srcElement={ exclamation } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-on-sale/block.js b/assets/js/blocks/product-on-sale/block.js
index fb609199c03..328dfc6f2f2 100644
--- a/assets/js/blocks/product-on-sale/block.js
+++ b/assets/js/blocks/product-on-sale/block.js
@@ -15,7 +15,7 @@ import { Icon, tag } from '@woocommerce/icons';
 
 const EmptyPlaceholder = () => (
 	<Placeholder
-		icon={ <Icon icon={ tag } /> }
+		icon={ <Icon srcElement={ tag } /> }
 		label={ __( 'On Sale Products', 'woo-gutenberg-products-block' ) }
 		className="wc-block-product-on-sale"
 	>
diff --git a/assets/js/blocks/product-on-sale/index.js b/assets/js/blocks/product-on-sale/index.js
index 8d14a613d01..e1d75fcc5a7 100644
--- a/assets/js/blocks/product-on-sale/index.js
+++ b/assets/js/blocks/product-on-sale/index.js
@@ -18,7 +18,7 @@ import sharedAttributes, {
 registerBlockType( 'woocommerce/product-on-sale', {
 	title: __( 'On Sale Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ tag } />,
+		src: <Icon srcElement={ tag } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-search/index.js b/assets/js/blocks/product-search/index.js
index 0b3cbb9eb90..a6e810a2ef0 100644
--- a/assets/js/blocks/product-search/index.js
+++ b/assets/js/blocks/product-search/index.js
@@ -17,7 +17,7 @@ import Block from './block.js';
 registerBlockType( 'woocommerce/product-search', {
 	title: __( 'Product Search', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ search } />,
+		src: <Icon srcElement={ search } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-tag/block.js b/assets/js/blocks/product-tag/block.js
index 7dc12a9b030..4f1bf263aaf 100644
--- a/assets/js/blocks/product-tag/block.js
+++ b/assets/js/blocks/product-tag/block.js
@@ -178,7 +178,10 @@ class ProductsByTagBlock extends Component {
 		return (
 			<Placeholder
 				icon={
-					<Icon icon={ more } className="block-editor-block-icon" />
+					<Icon
+						srcElement={ more }
+						className="block-editor-block-icon"
+					/>
 				}
 				label={ __(
 					'Products by Tag',
diff --git a/assets/js/blocks/product-tag/index.js b/assets/js/blocks/product-tag/index.js
index e6a50296aa5..1eaf77874de 100644
--- a/assets/js/blocks/product-tag/index.js
+++ b/assets/js/blocks/product-tag/index.js
@@ -18,7 +18,7 @@ import Block from './block';
 registerBlockType( 'woocommerce/product-tag', {
 	title: __( 'Products by Tag', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ more } />,
+		src: <Icon srcElement={ more } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/product-top-rated/index.js b/assets/js/blocks/product-top-rated/index.js
index f922c959f88..614f5fdd424 100644
--- a/assets/js/blocks/product-top-rated/index.js
+++ b/assets/js/blocks/product-top-rated/index.js
@@ -20,7 +20,7 @@ const blockTypeName = 'woocommerce/product-top-rated';
 registerBlockType( blockTypeName, {
 	title: __( 'Top Rated Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ thumbUp } />,
+		src: <Icon srcElement={ thumbUp } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/products-by-attribute/block.js b/assets/js/blocks/products-by-attribute/block.js
index b31c2680cb4..ba93255a04f 100644
--- a/assets/js/blocks/products-by-attribute/block.js
+++ b/assets/js/blocks/products-by-attribute/block.js
@@ -118,7 +118,7 @@ class ProductsByAttributeBlock extends Component {
 
 		return (
 			<Placeholder
-				icon={ <Icon icon={ tags } /> }
+				icon={ <Icon srcElement={ tags } /> }
 				label={ __(
 					'Products by Attribute',
 					'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/products-by-attribute/index.js b/assets/js/blocks/products-by-attribute/index.js
index f8121043bbc..b5731a6bf91 100644
--- a/assets/js/blocks/products-by-attribute/index.js
+++ b/assets/js/blocks/products-by-attribute/index.js
@@ -18,7 +18,7 @@ const blockTypeName = 'woocommerce/products-by-attribute';
 registerBlockType( blockTypeName, {
 	title: __( 'Products by Attribute', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ tags } />,
+		src: <Icon srcElement={ tags } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/products/all-products/edit.js b/assets/js/blocks/products/all-products/edit.js
index 9a08df8a798..c472e648eea 100644
--- a/assets/js/blocks/products/all-products/edit.js
+++ b/assets/js/blocks/products/all-products/edit.js
@@ -86,7 +86,7 @@ class Editor extends Component {
 	};
 
 	getIcon = () => {
-		return <Icon icon={ grid } />;
+		return <Icon srcElement={ grid } />;
 	};
 
 	togglePreview = () => {
@@ -232,7 +232,7 @@ class Editor extends Component {
 						</Button>
 						<IconButton
 							className="wc-block-all-products__reset-button"
-							icon={ <Icon icon={ grid } /> }
+							icon={ <Icon srcElement={ grid } /> }
 							label={ __(
 								'Reset layout to default',
 								'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/products/all-products/index.js b/assets/js/blocks/products/all-products/index.js
index b971efcf84e..b100205ea75 100644
--- a/assets/js/blocks/products/all-products/index.js
+++ b/assets/js/blocks/products/all-products/index.js
@@ -17,7 +17,7 @@ import '../../../atomic/blocks/product';
 const blockSettings = {
 	title: __( 'All Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ grid } />,
+		src: <Icon srcElement={ grid } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/products/utils.js b/assets/js/blocks/products/utils.js
index 4ac479e506e..9c1efc2a342 100644
--- a/assets/js/blocks/products/utils.js
+++ b/assets/js/blocks/products/utils.js
@@ -38,7 +38,7 @@ export const renderNoProductsPlaceholder = ( blockTitle, blockIcon ) => (
 			href={ adminUrl + 'post-new.php?post_type=product' }
 		>
 			{ __( 'Add new product', 'woo-gutenberg-products-block' ) + ' ' }
-			<Icon icon={ external } />
+			<Icon srcElement={ external } />
 		</Button>
 		<Button
 			className="wc-block-products__read_more_button"
diff --git a/assets/js/blocks/reviews/all-reviews/index.js b/assets/js/blocks/reviews/all-reviews/index.js
index f83706a37c4..9458b0e1910 100644
--- a/assets/js/blocks/reviews/all-reviews/index.js
+++ b/assets/js/blocks/reviews/all-reviews/index.js
@@ -21,7 +21,7 @@ import { example } from '../example';
 registerBlockType( 'woocommerce/all-reviews', {
 	title: __( 'All Reviews', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ discussion } />,
+		src: <Icon srcElement={ discussion } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js b/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js
index bc7e6174593..0b83eaae9a6 100644
--- a/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js
+++ b/assets/js/blocks/reviews/all-reviews/no-reviews-placeholder.js
@@ -10,7 +10,10 @@ const NoCategoryReviewsPlaceholder = () => {
 		<Placeholder
 			className="wc-block-all-reviews"
 			icon={
-				<Icon icon={ discussion } className="block-editor-block-icon" />
+				<Icon
+					srcElement={ discussion }
+					className="block-editor-block-icon"
+				/>
 			}
 			label={ __( 'All Reviews', 'woo-gutenberg-products-block' ) }
 		>
diff --git a/assets/js/blocks/reviews/reviews-by-category/edit.js b/assets/js/blocks/reviews/reviews-by-category/edit.js
index 8dc70d9eeae..05b5094ae75 100644
--- a/assets/js/blocks/reviews/reviews-by-category/edit.js
+++ b/assets/js/blocks/reviews/reviews-by-category/edit.js
@@ -132,7 +132,10 @@ const ReviewsByCategoryEditor = ( {
 		return (
 			<Placeholder
 				icon={
-					<Icon icon={ review } className="block-editor-block-icon" />
+					<Icon
+						srcElement={ review }
+						className="block-editor-block-icon"
+					/>
 				}
 				label={ __(
 					'Reviews by Category',
@@ -172,7 +175,10 @@ const ReviewsByCategoryEditor = ( {
 				attributes={ attributes }
 				className="wc-block-reviews-by-category"
 				icon={
-					<Icon icon={ review } className="block-editor-block-icon" />
+					<Icon
+						srcElement={ review }
+						className="block-editor-block-icon"
+					/>
 				}
 				name={ __(
 					'Reviews by Category',
diff --git a/assets/js/blocks/reviews/reviews-by-category/index.js b/assets/js/blocks/reviews/reviews-by-category/index.js
index 11b0469c76e..30a9f5604a5 100644
--- a/assets/js/blocks/reviews/reviews-by-category/index.js
+++ b/assets/js/blocks/reviews/reviews-by-category/index.js
@@ -20,7 +20,7 @@ import { example } from '../example';
 registerBlockType( 'woocommerce/reviews-by-category', {
 	title: __( 'Reviews by Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ review } />,
+		src: <Icon srcElement={ review } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js b/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js
index 5057bb206ca..e9bf5607bd5 100644
--- a/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js
+++ b/assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.js
@@ -9,7 +9,10 @@ const NoReviewsPlaceholder = () => {
 		<Placeholder
 			className="wc-block-reviews-by-category"
 			icon={
-				<Icon icon={ review } className="block-editor-block-icon" />
+				<Icon
+					srcElement={ review }
+					className="block-editor-block-icon"
+				/>
 			}
 			label={ __(
 				'Reviews by Category',
diff --git a/assets/js/blocks/reviews/reviews-by-product/index.js b/assets/js/blocks/reviews/reviews-by-product/index.js
index 106f4ca4105..b47d0596675 100644
--- a/assets/js/blocks/reviews/reviews-by-product/index.js
+++ b/assets/js/blocks/reviews/reviews-by-product/index.js
@@ -19,7 +19,7 @@ import { example } from '../example';
 registerBlockType( 'woocommerce/reviews-by-product', {
 	title: __( 'Reviews by Product', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon icon={ comment } />,
+		src: <Icon srcElement={ comment } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
index 9a55ad02e00..f95621d3ffb 100644
--- a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
+++ b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js
@@ -39,7 +39,10 @@ const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => {
 		<Placeholder
 			className="wc-block-reviews-by-product"
 			icon={
-				<Icon icon={ comment } className="block-editor-block-icon" />
+				<Icon
+					srcElement={ comment }
+					className="block-editor-block-icon"
+				/>
 			}
 			label={ __( 'Reviews by Product', 'woo-gutenberg-products-block' ) }
 		>
diff --git a/assets/js/components/error-placeholder/index.js b/assets/js/components/error-placeholder/index.js
index 6ca85f2bbf5..eabbb045894 100644
--- a/assets/js/components/error-placeholder/index.js
+++ b/assets/js/components/error-placeholder/index.js
@@ -16,7 +16,7 @@ import './editor.scss';
 
 const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => (
 	<Placeholder
-		icon={ <Icon icon={ notice } /> }
+		icon={ <Icon srcElement={ notice } /> }
 		label={ __(
 			'Sorry, an error occurred',
 			'woo-gutenberg-products-block'
diff --git a/assets/js/components/product-control/index.js b/assets/js/components/product-control/index.js
index b1f29bbe8e2..ff5c1b03910 100644
--- a/assets/js/components/product-control/index.js
+++ b/assets/js/components/product-control/index.js
@@ -30,9 +30,9 @@ function getHighlightedName( name, search ) {
 
 const getInteractionIcon = ( isSelected = false ) => {
 	return isSelected ? (
-		<Icon icon={ radioSelected } />
+		<Icon srcElement={ radioSelected } />
 	) : (
-		<Icon icon={ radioUnselected } />
+		<Icon srcElement={ radioUnselected } />
 	);
 };
 
diff --git a/assets/js/hocs/with-feedback-prompt/feedback-prompt.js b/assets/js/hocs/with-feedback-prompt/feedback-prompt.js
index 6cb1d1d3690..ca1a7474b49 100644
--- a/assets/js/hocs/with-feedback-prompt/feedback-prompt.js
+++ b/assets/js/hocs/with-feedback-prompt/feedback-prompt.js
@@ -16,7 +16,7 @@ import './style.scss';
 const FeedbackPrompt = ( { text } ) => {
 	return (
 		<div className="wc-block-feedback-prompt">
-			<Icon icon={ comment } />
+			<Icon srcElement={ comment } />
 			<h2 className="wc-block-feedback-prompt__title">
 				{ __( 'Feedback?', 'woo-gutenberg-products-block' ) }
 			</h2>
@@ -32,7 +32,7 @@ const FeedbackPrompt = ( { text } ) => {
 					'Give us your feedback.',
 					'woo-gutenberg-products-block'
 				) }
-				<Icon icon={ external } size={ 16 } />
+				<Icon srcElement={ external } size={ 16 } />
 			</a>
 		</div>
 	);
diff --git a/assets/js/icons/README.md b/assets/js/icons/README.md
index 48b7bb81a78..2b5963d5e2d 100644
--- a/assets/js/icons/README.md
+++ b/assets/js/icons/README.md
@@ -7,11 +7,11 @@ WooCommerce Blocks Icons Library.
 ```js
 import { Icon, bill, woo } from '@woocommerce/icons';
 
-<Icon icon={ bill } />
+<Icon srcElement={ bill } />
 
-<Icon icon={ bill } size={ 16 } />
+<Icon srcElement={ bill } size={ 16 } />
 
-<Icon icon={ woo } width={ 20 } height={ Math.floor( 20 * 1.67 ) } />
+<Icon srcElement={ woo } width={ 20 } height={ Math.floor( 20 * 1.67 ) } />
 ```
 
 ## Props
@@ -26,5 +26,5 @@ Name | Type | Default | Description
 1. Add the icon file to `./library` folder.
 2. Make sure to use `SVG` primitive from `@wordpress/components` and not a native svg. `SVG` offers more accessibility features.
 3. Remove width and height since they're handled by Icon.
-4. Remove any hardcoded colors on the svg. If necessary,, use `CurrentColor`.
+4. Remove any hardcoded colors on the svg. If necessary, use `CurrentColor`.
 5. Export the Icon in `./library/index.js`.
\ No newline at end of file
diff --git a/assets/js/icons/icon/index.js b/assets/js/icons/icon/index.js
index ae8f67d9d02..cc84ecb956a 100644
--- a/assets/js/icons/icon/index.js
+++ b/assets/js/icons/icon/index.js
@@ -3,8 +3,8 @@
  */
 import { cloneElement } from '@wordpress/element';
 
-function Icon( { icon, size = 24, ...props } ) {
-	return cloneElement( icon, {
+function Icon( { srcElement, size = 24, ...props } ) {
+	return cloneElement( srcElement, {
 		width: size,
 		height: size,
 		...props,

From 0509a6c13bd5c25ce9b20ce5a48adc007b0468e0 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Thu, 30 Jan 2020 14:10:42 +0100
Subject: [PATCH 08/11] validate element

---
 assets/js/icons/icon/index.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/js/icons/icon/index.js b/assets/js/icons/icon/index.js
index cc84ecb956a..6ec44640671 100644
--- a/assets/js/icons/icon/index.js
+++ b/assets/js/icons/icon/index.js
@@ -1,14 +1,17 @@
 /**
  * External dependencies
  */
-import { cloneElement } from '@wordpress/element';
+import { cloneElement, isValidElement } from '@wordpress/element';
 
 function Icon( { srcElement, size = 24, ...props } ) {
-	return cloneElement( srcElement, {
-		width: size,
-		height: size,
-		...props,
-	} );
+	return (
+		isValidElement( srcElement ) &&
+		cloneElement( srcElement, {
+			width: size,
+			height: size,
+			...props,
+		} )
+	);
 }
 
 export default Icon;

From 339beec473796fb91e11e760ab57d0dfc8a3b2a5 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Thu, 30 Jan 2020 14:13:42 +0100
Subject: [PATCH 09/11] fix bad import

---
 assets/js/icons/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js
index 4ce3bb8ef04..09b2d5a9e6c 100644
--- a/assets/js/icons/index.js
+++ b/assets/js/icons/index.js
@@ -7,7 +7,7 @@ export { default as comment } from './library/comment';
 export { default as discussion } from './library/discussion';
 export { default as exclamation } from './library/exclamation';
 export { default as external } from './library/external';
-export { default as FolderStarred } from './library/folder-stared';
+export { default as FolderStarred } from './library/folder-starred';
 export { default as folder } from './library/folder';
 export { default as grid } from './library/grid';
 export { default as image } from './library/image';

From 16a17535be6938061530ba4fae74a4bc6395951c Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Fri, 31 Jan 2020 16:15:43 +0100
Subject: [PATCH 10/11] lowecase folderStarred

---
 assets/js/blocks/featured-category/block.js | 6 +++---
 assets/js/blocks/featured-category/index.js | 4 ++--
 assets/js/icons/index.js                    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js
index 43918456f84..11a8dc64ccc 100644
--- a/assets/js/blocks/featured-category/block.js
+++ b/assets/js/blocks/featured-category/block.js
@@ -31,7 +31,7 @@ import { Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import PropTypes from 'prop-types';
 import { MIN_HEIGHT } from '@woocommerce/block-settings';
-import { Icon, FolderStarred } from '@woocommerce/icons';
+import { Icon, folderStarred } from '@woocommerce/icons';
 import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
 import ErrorPlaceholder from '@woocommerce/block-components/error-placeholder';
 
@@ -190,7 +190,7 @@ const FeaturedCategory = ( {
 
 		return (
 			<Placeholder
-				icon={ <Icon srcElement={ FolderStarred } /> }
+				icon={ <Icon srcElement={ folderStarred } /> }
 				label={ __(
 					'Featured Category',
 					'woo-gutenberg-products-block'
@@ -337,7 +337,7 @@ const FeaturedCategory = ( {
 	const renderNoCategory = () => (
 		<Placeholder
 			className="wc-block-featured-category"
-			icon={ <Icon srcElement={ FolderStarred } /> }
+			icon={ <Icon srcElement={ folderStarred } /> }
 			label={ __( 'Featured Category', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (
diff --git a/assets/js/blocks/featured-category/index.js b/assets/js/blocks/featured-category/index.js
index fb93f007450..3c477348128 100644
--- a/assets/js/blocks/featured-category/index.js
+++ b/assets/js/blocks/featured-category/index.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
-import { Icon, FolderStarred } from '@woocommerce/icons';
+import { Icon, folderStarred } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ import { example } from './example';
 registerBlockType( 'woocommerce/featured-category', {
 	title: __( 'Featured Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon srcElement={ FolderStarred } />,
+		src: <Icon srcElement={ folderStarred } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',
diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js
index 09b2d5a9e6c..d049a499ffd 100644
--- a/assets/js/icons/index.js
+++ b/assets/js/icons/index.js
@@ -7,7 +7,7 @@ export { default as comment } from './library/comment';
 export { default as discussion } from './library/discussion';
 export { default as exclamation } from './library/exclamation';
 export { default as external } from './library/external';
-export { default as FolderStarred } from './library/folder-starred';
+export { default as folderStarred } from './library/folder-starred';
 export { default as folder } from './library/folder';
 export { default as grid } from './library/grid';
 export { default as image } from './library/image';

From fd36b80d42d15edfcfdde46e490e98cc6bc75d41 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Fri, 31 Jan 2020 16:42:11 +0100
Subject: [PATCH 11/11] add propTypes

---
 assets/js/icons/icon/index.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/assets/js/icons/icon/index.js b/assets/js/icons/icon/index.js
index 6ec44640671..df780e3f39d 100644
--- a/assets/js/icons/icon/index.js
+++ b/assets/js/icons/icon/index.js
@@ -2,6 +2,8 @@
  * External dependencies
  */
 import { cloneElement, isValidElement } from '@wordpress/element';
+import { SVG } from '@wordpress/components';
+import PropTypes from 'prop-types';
 
 function Icon( { srcElement, size = 24, ...props } ) {
 	return (
@@ -14,4 +16,14 @@ function Icon( { srcElement, size = 24, ...props } ) {
 	);
 }
 
+Icon.PropTypes = {
+	srcElement: PropTypes.oneOfType( [
+		PropTypes.instanceOf( SVG ),
+		// HTMLImageElement is a global interface
+		// eslint-disable-next-line no-undef
+		PropTypes.instanceOf( HTMLImageElement ),
+	] ),
+	size: PropTypes.number,
+};
+
 export default Icon;