diff --git a/client/blocks/plan-thank-you-card/index.jsx b/client/blocks/plan-thank-you-card/index.jsx
index 2bafbf208f8a7..d1bd71c424a98 100644
--- a/client/blocks/plan-thank-you-card/index.jsx
+++ b/client/blocks/plan-thank-you-card/index.jsx
@@ -11,13 +11,13 @@ import formatCurrency from '@automattic/format-currency';
 /**
  * Internal dependencies
  */
+import { ProductIcon } from '@automattic/components';
 import getRawSite from 'state/selectors/get-raw-site';
 import { getCurrentPlan } from 'state/sites/plans/selectors';
 import QuerySites from 'components/data/query-sites';
 import QuerySitePlans from 'components/data/query-site-plans';
 import { getPlan, getPlanClass } from 'lib/plans';
 import ThankYouCard from 'components/thank-you-card';
-import PlanIcon from 'components/plans/plan-icon';
 
 /**
  * Style dependencies
@@ -60,7 +60,7 @@ class PlanThankYouCard extends Component {
 			return null;
 		}
 
-		return <PlanIcon plan={ plan.productSlug } />;
+		return <ProductIcon slug={ plan.productSlug } />;
 	}
 
 	renderAction() {
diff --git a/client/blocks/upgrade-nudge-expanded/index.jsx b/client/blocks/upgrade-nudge-expanded/index.jsx
index b9f648c612ffb..4807a7f53000e 100644
--- a/client/blocks/upgrade-nudge-expanded/index.jsx
+++ b/client/blocks/upgrade-nudge-expanded/index.jsx
@@ -13,7 +13,7 @@ import formatCurrency from '@automattic/format-currency';
 /**
  * Internal dependencies
  */
-import { Card } from '@automattic/components';
+import { Card, ProductIcon } from '@automattic/components';
 import QueryPlans from 'components/data/query-plans';
 import PlanCompareCard from 'my-sites/plan-compare-card';
 import PlanCompareCardItem from 'my-sites/plan-compare-card/item';
@@ -26,7 +26,6 @@ import { PLAN_PERSONAL } from 'lib/plans/constants';
 import { getSitePlan, getSiteSlug } from 'state/sites/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { recordTracksEvent } from 'state/analytics/actions';
-import PlanIcon from 'components/plans/plan-icon';
 
 /**
  * Style dependencies
@@ -98,10 +97,12 @@ class UpgradeNudgeExpanded extends Component {
 					{ this.props.title && (
 						<div className="upgrade-nudge-expanded__title">
 							<div className="upgrade-nudge-expanded__title-plan">
-								<PlanIcon
-									plan={ this.props.plan.product_slug }
-									className="upgrade-nudge-expanded__title-plan-icon"
-								/>
+								{ this.props.plan.product_slug && (
+									<ProductIcon
+										slug={ this.props.plan.product_slug }
+										className="upgrade-nudge-expanded__title-plan-icon"
+									/>
+								) }
 							</div>
 							<p className="upgrade-nudge-expanded__title-message">{ this.props.title }</p>
 						</div>
diff --git a/client/components/banner/index.jsx b/client/components/banner/index.jsx
index 60189b746807b..ddac17c13e293 100644
--- a/client/components/banner/index.jsx
+++ b/client/components/banner/index.jsx
@@ -26,9 +26,8 @@ import { addQueryArgs } from 'lib/url';
 import { recordTracksEvent } from 'state/analytics/actions';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
 import canCurrentUser from 'state/selectors/can-current-user';
-import { Button, Card } from '@automattic/components';
+import { Button, Card, ProductIcon } from '@automattic/components';
 import DismissibleCard from 'blocks/dismissible-card';
-import PlanIcon from 'components/plans/plan-icon';
 import PlanPrice from 'my-sites/plan-price';
 import TrackComponentView from 'lib/analytics/track-component-view';
 
@@ -143,7 +142,7 @@ export class Banner extends Component {
 		if ( plan && ! icon ) {
 			return (
 				<div className="banner__icon-plan">
-					<PlanIcon plan={ plan } />
+					<ProductIcon slug={ plan } />
 				</div>
 			);
 		}
diff --git a/client/components/banner/style.scss b/client/components/banner/style.scss
index e7b668da60149..593c825c8ac48 100644
--- a/client/components/banner/style.scss
+++ b/client/components/banner/style.scss
@@ -143,7 +143,7 @@
 	margin-right: 16px;
 	flex-shrink: 0;
 
-	.plan-icon {
+	.product-icon {
 		height: 32px;
 		width: 32px;
 	}
diff --git a/client/components/plans/plan-icon/README.md b/client/components/plans/plan-icon/README.md
deleted file mode 100644
index 27f3958a813f2..0000000000000
--- a/client/components/plans/plan-icon/README.md
+++ /dev/null
@@ -1,44 +0,0 @@
-PlanIcon Component
-=============
-
-PlanIcon component is a React component to display plans icons in SVG format. We have four different plans icons:
-- Free
-- Personal
-- Premium
-- Business
-
-Jetpack plans also use these plans icons.
-
-## Usage
-
-```jsx
-import PlanIcon from 'components/plans/plan-icon';
-import { PLAN_FREE, PLAN_BUSINESS } from 'lib/plans/constants';
-
-export default function MyComponent() {
-    return (
-        <div className="my-component">
-            <PlanIcon plan={ PLAN_FREE } />
-            <PlanIcon plan={ PLAN_BUSINESS } />
-        </div>
-    );
-}
-
-```
-
-## Props
-
-### plan
-
-Plan constant from `lib/plans/constants`. Can be one of:
-
-- PLAN_FREE,
-- PLAN_PREMIUM,
-- PLAN_BUSINESS,
-- PLAN_JETPACK_FREE,
-- PLAN_JETPACK_BUSINESS,
-- PLAN_JETPACK_BUSINESS_MONTHLY,
-- PLAN_JETPACK_PREMIUM,
-- PLAN_JETPACK_PREMIUM_MONTHLY,
-- PLAN_PERSONAL
-
diff --git a/client/components/plans/plan-icon/index.jsx b/client/components/plans/plan-icon/index.jsx
deleted file mode 100644
index 1c63339e07097..0000000000000
--- a/client/components/plans/plan-icon/index.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import classNames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import { GROUP_JETPACK } from 'lib/plans/constants';
-import { PLANS_LIST } from 'lib/plans/plans-list';
-import {
-	planMatches,
-	isBloggerPlan,
-	isPersonalPlan,
-	isPremiumPlan,
-	isBusinessPlan,
-	isEcommercePlan,
-	getPlanClass,
-} from 'lib/plans';
-
-/**
- * Style dependencies
- */
-import './style.scss';
-
-export default class PlanIcon extends Component {
-	getIcon( planName ) {
-		const { plan, className } = this.props;
-		const planClass = getPlanClass( plan );
-		const isJetpack = planMatches( plan, { group: GROUP_JETPACK } );
-
-		/* eslint-disable jsx-a11y/alt-text */
-		return (
-			<img
-				src={ `/calypso/images/plans/${ isJetpack ? 'jetpack' : 'wpcom' }/plan-${ planName }.svg` }
-				className={ classNames( 'plan-icon', `plan-icon__${ planName }`, planClass, className ) }
-			/>
-		);
-		/* eslint-enable jsx-a11y/alt-text */
-	}
-
-	render() {
-		const { plan } = this.props;
-
-		if ( isBloggerPlan( plan ) ) {
-			return this.getIcon( 'blogger' );
-		}
-
-		if ( isPersonalPlan( plan ) ) {
-			return this.getIcon( 'personal' );
-		}
-
-		if ( isPremiumPlan( plan ) ) {
-			return this.getIcon( 'premium' );
-		}
-
-		if ( isBusinessPlan( plan ) ) {
-			return this.getIcon( 'business' );
-		}
-
-		if ( isEcommercePlan( plan ) ) {
-			return this.getIcon( 'ecommerce' );
-		}
-
-		return this.getIcon( 'free' );
-	}
-}
-
-PlanIcon.propTypes = {
-	classNames: PropTypes.string,
-	plan: PropTypes.oneOf( Object.keys( PLANS_LIST ) ).isRequired,
-};
diff --git a/client/components/plans/plan-icon/style.scss b/client/components/plans/plan-icon/style.scss
deleted file mode 100644
index d21613a819edc..0000000000000
--- a/client/components/plans/plan-icon/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.plan-icon {
-	width: inherit;
-	height: inherit;
-	background-repeat: no-repeat;
-}
diff --git a/client/components/plans/plan-icon/test/test.jsx b/client/components/plans/plan-icon/test/test.jsx
deleted file mode 100644
index e2010d52561bb..0000000000000
--- a/client/components/plans/plan-icon/test/test.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-jest.mock( 'lib/abtest', () => ( {
-	abtest: () => '',
-} ) );
-
-jest.mock( 'i18n-calypso', () => ( {
-	localize: Comp => props => (
-		<Comp
-			{ ...props }
-			translate={ function( x ) {
-				return x;
-			} }
-		/>
-	),
-	numberFormat: x => x,
-	translate: x => x,
-} ) );
-
-/**
- * External dependencies
- */
-import { assert } from 'chai';
-import { shallow } from 'enzyme';
-import React from 'react';
-import {
-	PLAN_FREE,
-	PLAN_BUSINESS,
-	PLAN_BUSINESS_2_YEARS,
-	PLAN_PREMIUM,
-	PLAN_PREMIUM_2_YEARS,
-	PLAN_PERSONAL,
-	PLAN_PERSONAL_2_YEARS,
-	PLAN_JETPACK_FREE,
-	PLAN_JETPACK_PERSONAL,
-	PLAN_JETPACK_PERSONAL_MONTHLY,
-	PLAN_JETPACK_PREMIUM,
-	PLAN_JETPACK_PREMIUM_MONTHLY,
-	PLAN_JETPACK_BUSINESS,
-	PLAN_JETPACK_BUSINESS_MONTHLY,
-} from 'lib/plans/constants';
-
-/**
- * Internal dependencies
- */
-import PlanIcon from '../index';
-
-const props = {
-	plan: PLAN_FREE,
-};
-
-describe( 'PlanIcon basic tests', () => {
-	test( 'should not blow up and have proper CSS class', () => {
-		const comp = shallow( <PlanIcon { ...props } /> );
-		assert.lengthOf( comp.find( '.plan-icon' ), 1 );
-	} );
-} );
-
-describe( 'PlanIcon should have a class name corresponding to appropriate plan', () => {
-	[
-		PLAN_PERSONAL,
-		PLAN_PERSONAL_2_YEARS,
-		PLAN_JETPACK_PERSONAL,
-		PLAN_JETPACK_PERSONAL_MONTHLY,
-	].forEach( plan => {
-		test( 'Personal', () => {
-			const comp = shallow( <PlanIcon { ...props } plan={ plan } /> );
-			assert.lengthOf( comp.find( '.plan-icon__personal' ), 1 );
-		} );
-	} );
-
-	[
-		PLAN_PREMIUM,
-		PLAN_PREMIUM_2_YEARS,
-		PLAN_JETPACK_PREMIUM,
-		PLAN_JETPACK_PREMIUM_MONTHLY,
-	].forEach( plan => {
-		test( 'Premium', () => {
-			const comp = shallow( <PlanIcon { ...props } plan={ plan } /> );
-			assert.lengthOf( comp.find( '.plan-icon__premium' ), 1 );
-		} );
-	} );
-
-	[
-		PLAN_BUSINESS,
-		PLAN_BUSINESS_2_YEARS,
-		PLAN_JETPACK_BUSINESS,
-		PLAN_JETPACK_BUSINESS_MONTHLY,
-	].forEach( plan => {
-		test( 'Business', () => {
-			const comp = shallow( <PlanIcon { ...props } plan={ plan } /> );
-			assert.lengthOf( comp.find( '.plan-icon__business' ), 1 );
-		} );
-	} );
-
-	[ PLAN_FREE, PLAN_JETPACK_FREE ].forEach( plan => {
-		test( 'Free', () => {
-			const comp = shallow( <PlanIcon { ...props } plan={ plan } /> );
-			assert.lengthOf( comp.find( '.plan-icon__free' ), 1 );
-		} );
-	} );
-} );
diff --git a/client/components/product-icon/README.md b/client/components/product-icon/README.md
deleted file mode 100644
index 54f81eba59047..0000000000000
--- a/client/components/product-icon/README.md
+++ /dev/null
@@ -1,67 +0,0 @@
-ProductIcon Component
-=============
-
-ProductIcon component is a React component to display plan or product icons in SVG format.
-
-We have the following different plans icons:
-- Free
-- Personal
-- Premium
-- Business (Professional)
-- Ecommerce
-
-Jetpack plans also use these plans icons.
-
-There are also the following product icons:
-- Jetpack Backup
-
-## Usage
-
-```jsx
-import ProductIcon from 'components/product-icon';
-import { PLAN_FREE, PLAN_BUSINESS } from 'lib/plans/constants';
-import { PRODUCT_JETPACK_BACKUP_DAILY } from 'lib/products-values/constants';
-
-export default function MyComponent() {
-    return (
-        <div className="my-component">
-            <ProductIcon product={ PLAN_FREE } />
-            <ProductIcon product={ PLAN_BUSINESS } />
-            <ProductIcon product={ PRODUCT_JETPACK_BACKUP_DAILY } />
-        </div>
-    );
-}
-
-```
-
-## Props
-
-### `product`
-
-Plan constant from `lib/plans/constants` or product constant from `lib/products-values/constants`. Can be one of:
-
-- PLAN_FREE,
-- PLAN_BUSINESS,
-- PLAN_BUSINESS_2_YEARS,
-- PLAN_PREMIUM,
-- PLAN_PREMIUM_2_YEARS,
-- PLAN_PERSONAL,
-- PLAN_PERSONAL_2_YEARS,
-- PLAN_ECOMMERCE,
-- PLAN_ECOMMERCE_2_YEARS,
-- PLAN_JETPACK_FREE,
-- PLAN_JETPACK_PERSONAL,
-- PLAN_JETPACK_PERSONAL_MONTHLY,
-- PLAN_JETPACK_PREMIUM,
-- PLAN_JETPACK_PREMIUM_MONTHLY,
-- PLAN_JETPACK_BUSINESS,
-- PLAN_JETPACK_BUSINESS_MONTHLY,
-- PRODUCT_JETPACK_BACKUP_DAILY,
-- PRODUCT_JETPACK_BACKUP_DAILY_MONTHLY,
-- PRODUCT_JETPACK_BACKUP_REALTIME,
-- PRODUCT_JETPACK_BACKUP_REALTIME_MONTHLY
-
-### `className`
-
-Additional class name to be added to the icon element.
-
diff --git a/client/components/product-icon/docs/example.jsx b/client/components/product-icon/docs/example.jsx
deleted file mode 100644
index 8807f1ea719a2..0000000000000
--- a/client/components/product-icon/docs/example.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * External dependencies
- */
-import React, { Fragment } from 'react';
-
-/**
- * Internal dependencies
- */
-import ProductIcon from '../index';
-import {
-	PLAN_FREE,
-	PLAN_PERSONAL,
-	PLAN_PREMIUM,
-	PLAN_BUSINESS,
-	PLAN_ECOMMERCE,
-	PLAN_JETPACK_FREE,
-	PLAN_JETPACK_PERSONAL,
-	PLAN_JETPACK_PREMIUM,
-	PLAN_JETPACK_BUSINESS,
-} from 'lib/plans/constants';
-import {
-	PRODUCT_JETPACK_BACKUP_DAILY,
-	PRODUCT_JETPACK_BACKUP_REALTIME,
-} from 'lib/products-values/constants';
-
-function ProductIconExample() {
-	const wrapperStyle = {
-		display: 'flex',
-		flexFlow: 'row wrap',
-	};
-	const iconStyle = {
-		width: 64,
-		height: 64,
-		margin: '8px 8px 8px 0',
-	};
-
-	return (
-		<Fragment>
-			<h3>Plan Icons</h3>
-			<div style={ wrapperStyle }>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_FREE } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_PERSONAL } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_PREMIUM } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_BUSINESS } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_ECOMMERCE } />
-				</div>
-			</div>
-
-			<hr />
-
-			<h3>Jetpack Plan Icons</h3>
-			<div style={ wrapperStyle }>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_JETPACK_FREE } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_JETPACK_PERSONAL } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_JETPACK_PREMIUM } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PLAN_JETPACK_BUSINESS } />
-				</div>
-			</div>
-
-			<hr />
-
-			<h3>Jetpack Products</h3>
-			<div style={ wrapperStyle }>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PRODUCT_JETPACK_BACKUP_DAILY } />
-				</div>
-				<div style={ iconStyle }>
-					<ProductIcon product={ PRODUCT_JETPACK_BACKUP_REALTIME } />
-				</div>
-			</div>
-		</Fragment>
-	);
-}
-
-ProductIconExample.displayName = 'ProductIcon';
-
-export default ProductIconExample;
diff --git a/client/components/product-icon/index.jsx b/client/components/product-icon/index.jsx
deleted file mode 100644
index 8cbf24436b475..0000000000000
--- a/client/components/product-icon/index.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import classNames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import {
-	isBloggerPlan,
-	isPersonalPlan,
-	isPremiumPlan,
-	isBusinessPlan,
-	isEcommercePlan,
-	getPlansSlugs,
-	getPlanClass,
-} from 'lib/plans';
-import {
-	getProductClass,
-	getProductsSlugs,
-	isJetpackBackupSlug,
-	isJetpackPlanSlug,
-} from 'lib/products-values';
-
-/**
- * Style dependencies
- */
-import './style.scss';
-
-export default class ProductIcon extends Component {
-	getPlanIcon( iconName ) {
-		const { product, className } = this.props;
-
-		const planClass = getPlanClass( product );
-		const plansPath = isJetpackPlanSlug( product ) ? 'jetpack' : 'wpcom';
-
-		/* eslint-disable jsx-a11y/alt-text */
-		return (
-			<img
-				src={ `/calypso/images/plans/${ plansPath }/plan-${ iconName }.svg` }
-				className={ classNames(
-					'product-icon',
-					`product-icon__${ iconName }`,
-					planClass,
-					className
-				) }
-			/>
-		);
-		/* eslint-enable jsx-a11y/alt-text */
-	}
-
-	getProductIcon( iconName ) {
-		const { product, className } = this.props;
-
-		const productClass = getProductClass( product );
-
-		/* eslint-disable jsx-a11y/alt-text */
-		return (
-			<img
-				src={ `/calypso/images/products/jetpack/product-${ iconName }.svg` }
-				className={ classNames(
-					'product-icon',
-					`product-icon__${ iconName }`,
-					productClass,
-					className
-				) }
-			/>
-		);
-		/* eslint-enable jsx-a11y/alt-text */
-	}
-
-	render() {
-		const { product } = this.props;
-
-		if ( isJetpackBackupSlug( product ) ) {
-			return this.getProductIcon( 'backup' );
-		}
-
-		if ( isBloggerPlan( product ) ) {
-			return this.getPlanIcon( 'blogger' );
-		}
-
-		if ( isPersonalPlan( product ) ) {
-			return this.getPlanIcon( 'personal' );
-		}
-
-		if ( isPremiumPlan( product ) ) {
-			return this.getPlanIcon( 'premium' );
-		}
-
-		if ( isBusinessPlan( product ) ) {
-			return this.getPlanIcon( 'business' );
-		}
-
-		if ( isEcommercePlan( product ) ) {
-			return this.getPlanIcon( 'ecommerce' );
-		}
-
-		return this.getPlanIcon( 'free' );
-	}
-}
-
-ProductIcon.propTypes = {
-	classNames: PropTypes.string,
-	product: PropTypes.oneOf( [ ...getPlansSlugs(), ...getProductsSlugs() ] ).isRequired,
-};
diff --git a/client/components/product-icon/style.scss b/client/components/product-icon/style.scss
deleted file mode 100644
index 93987a86afe26..0000000000000
--- a/client/components/product-icon/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.product-icon {
-	width: inherit;
-	height: inherit;
-	background-repeat: no-repeat;
-}
diff --git a/client/components/product-icon/test/test.jsx b/client/components/product-icon/test/test.jsx
deleted file mode 100644
index c2d27336c0a3a..0000000000000
--- a/client/components/product-icon/test/test.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import ProductIcon from '../index';
-import {
-	PLAN_FREE,
-	PLAN_BUSINESS,
-	PLAN_BUSINESS_2_YEARS,
-	PLAN_PREMIUM,
-	PLAN_PREMIUM_2_YEARS,
-	PLAN_PERSONAL,
-	PLAN_PERSONAL_2_YEARS,
-	PLAN_ECOMMERCE,
-	PLAN_ECOMMERCE_2_YEARS,
-	PLAN_JETPACK_FREE,
-	PLAN_JETPACK_PERSONAL,
-	PLAN_JETPACK_PERSONAL_MONTHLY,
-	PLAN_JETPACK_PREMIUM,
-	PLAN_JETPACK_PREMIUM_MONTHLY,
-	PLAN_JETPACK_BUSINESS,
-	PLAN_JETPACK_BUSINESS_MONTHLY,
-} from 'lib/plans/constants';
-import { JETPACK_BACKUP_PRODUCTS } from 'lib/products-values/constants';
-
-describe( 'ProductIcon basic tests', () => {
-	test( 'should not blow up and have proper CSS class', () => {
-		const comp = shallow( <ProductIcon product={ PLAN_FREE } /> );
-		expect( comp.find( '.product-icon' ) ).toHaveLength( 1 );
-	} );
-} );
-
-describe( 'ProductIcon should have a class name corresponding to appropriate plan', () => {
-	[
-		PLAN_PERSONAL,
-		PLAN_PERSONAL_2_YEARS,
-		PLAN_JETPACK_PERSONAL,
-		PLAN_JETPACK_PERSONAL_MONTHLY,
-	].forEach( product => {
-		test( 'Personal', () => {
-			const comp = shallow( <ProductIcon product={ product } /> );
-			expect( comp.find( '.product-icon__personal' ) ).toHaveLength( 1 );
-		} );
-	} );
-
-	[
-		PLAN_PREMIUM,
-		PLAN_PREMIUM_2_YEARS,
-		PLAN_JETPACK_PREMIUM,
-		PLAN_JETPACK_PREMIUM_MONTHLY,
-	].forEach( product => {
-		test( 'Premium', () => {
-			const comp = shallow( <ProductIcon product={ product } /> );
-			expect( comp.find( '.product-icon__premium' ) ).toHaveLength( 1 );
-		} );
-	} );
-
-	[
-		PLAN_BUSINESS,
-		PLAN_BUSINESS_2_YEARS,
-		PLAN_JETPACK_BUSINESS,
-		PLAN_JETPACK_BUSINESS_MONTHLY,
-	].forEach( product => {
-		test( 'Business', () => {
-			const comp = shallow( <ProductIcon product={ product } /> );
-			expect( comp.find( '.product-icon__business' ) ).toHaveLength( 1 );
-		} );
-	} );
-
-	[ PLAN_ECOMMERCE, PLAN_ECOMMERCE_2_YEARS ].forEach( product => {
-		test( 'Ecommerce', () => {
-			const comp = shallow( <ProductIcon product={ product } /> );
-			expect( comp.find( '.product-icon__ecommerce' ) ).toHaveLength( 1 );
-		} );
-	} );
-
-	[ PLAN_FREE, PLAN_JETPACK_FREE ].forEach( product => {
-		test( 'Free', () => {
-			const comp = shallow( <ProductIcon product={ product } /> );
-			expect( comp.find( '.product-icon__free' ) ).toHaveLength( 1 );
-		} );
-	} );
-} );
-
-describe( 'ProductIcon should have a class name corresponding to appropriate product', () => {
-	JETPACK_BACKUP_PRODUCTS.forEach( product => {
-		test( 'Jetpack Backup', () => {
-			const comp = shallow( <ProductIcon product={ product } /> );
-			expect( comp.find( '.product-icon__backup' ) ).toHaveLength( 1 );
-		} );
-	} );
-} );
diff --git a/client/lib/products-values/index.js b/client/lib/products-values/index.js
index 94a2980683ccd..02058ec24af56 100644
--- a/client/lib/products-values/index.js
+++ b/client/lib/products-values/index.js
@@ -8,10 +8,10 @@ import { assign, difference, get, includes, isEmpty, pick } from 'lodash';
  */
 import { isGSuiteOrExtraLicenseProductSlug } from 'lib/gsuite';
 import {
-	JETPACK_BACKUP_PRODUCTS,
-	JETPACK_PRODUCTS_LIST,
 	getJetpackProductsDisplayNames,
 	getJetpackProductsTaglines,
+	JETPACK_BACKUP_PRODUCTS,
+	JETPACK_PRODUCTS_LIST,
 } from './constants';
 import { PRODUCTS_LIST } from './products-list';
 import {
diff --git a/client/me/purchases/manage-purchase/index.jsx b/client/me/purchases/manage-purchase/index.jsx
index 548b2801dc817..bcab8b327beb6 100644
--- a/client/me/purchases/manage-purchase/index.jsx
+++ b/client/me/purchases/manage-purchase/index.jsx
@@ -16,7 +16,7 @@ import AsyncLoad from 'components/async-load';
 import { abtest } from 'lib/abtest';
 import analytics from 'lib/analytics';
 import { applyTestFiltersToPlansList } from 'lib/plans';
-import { Button, Card, CompactCard } from '@automattic/components';
+import { Button, Card, CompactCard, ProductIcon } from '@automattic/components';
 import config from 'config';
 import {
 	cardProcessorSupportsUpdates,
@@ -62,7 +62,6 @@ import { getSite, isRequestingSites } from 'state/sites/selectors';
 import { JETPACK_BACKUP_PRODUCTS } from 'lib/products-values/constants';
 import { JETPACK_PLANS } from 'lib/plans/constants';
 import Main from 'components/main';
-import PlanIcon from 'components/plans/plan-icon';
 import PlanPrice from 'my-sites/plan-price';
 import ProductLink from 'me/purchases/product-link';
 import PurchaseMeta from './purchase-meta';
@@ -345,10 +344,10 @@ class ManagePurchase extends Component {
 
 	renderPlanIcon() {
 		const { purchase } = this.props;
-		if ( isPlan( purchase ) ) {
+		if ( isPlan( purchase ) || isJetpackBackup( purchase ) ) {
 			return (
 				<div className="manage-purchase__plan-icon">
-					<PlanIcon plan={ purchase.productSlug } />
+					<ProductIcon slug={ purchase.productSlug } />
 				</div>
 			);
 		}
@@ -369,14 +368,6 @@ class ManagePurchase extends Component {
 			);
 		}
 
-		if ( isJetpackBackup( purchase ) ) {
-			return (
-				<div className="manage-purchase__plan-icon">
-					<Gridicon icon="cloud-upload" size={ 48 } />
-				</div>
-			);
-		}
-
 		return null;
 	}
 
diff --git a/client/me/purchases/manage-purchase/style.scss b/client/me/purchases/manage-purchase/style.scss
index 3380ed3d810ce..a69f21f93ba5d 100644
--- a/client/me/purchases/manage-purchase/style.scss
+++ b/client/me/purchases/manage-purchase/style.scss
@@ -138,10 +138,6 @@
 	.gridicons-themes {
 		border-radius: 8px;
 	}
-
-	.gridicons-cloud-upload {
-		background: var( --studio-jetpack-green-30 );
-	}
 }
 
 .manage-purchase__title {
diff --git a/client/me/purchases/purchase-item/index.jsx b/client/me/purchases/purchase-item/index.jsx
index acc1cc41e8862..b168093be5177 100644
--- a/client/me/purchases/purchase-item/index.jsx
+++ b/client/me/purchases/purchase-item/index.jsx
@@ -9,7 +9,7 @@ import { localize } from 'i18n-calypso';
 /**
  * Internal dependencies
  */
-import { CompactCard } from '@automattic/components';
+import { CompactCard, ProductIcon } from '@automattic/components';
 import {
 	getDisplayName,
 	isExpired,
@@ -33,12 +33,11 @@ import {
 	isConciergeSession,
 } from 'lib/products-values';
 import Notice from 'components/notice';
-import PlanIcon from 'components/plans/plan-icon';
 import Gridicon from 'components/gridicon';
 import { withLocalizedMoment } from 'components/localized-moment';
 import { managePurchase } from '../paths';
 import TrackComponentView from 'lib/analytics/track-component-view';
-import { getPlanTermLabel } from 'lib/plans';
+import { getPlanClass, getPlanTermLabel } from 'lib/plans';
 
 /**
  * Style dependencies
@@ -159,10 +158,13 @@ class PurchaseItem extends Component {
 			return null;
 		}
 
-		if ( isPlan( purchase ) ) {
+		if ( isPlan( purchase ) || isJetpackBackup( purchase ) ) {
 			return (
 				<div className="purchase-item__plan-icon">
-					<PlanIcon plan={ purchase.productSlug } />
+					<ProductIcon
+						slug={ purchase.productSlug }
+						className={ getPlanClass( purchase.productSlug ) }
+					/>
 				</div>
 			);
 		}
@@ -174,8 +176,6 @@ class PurchaseItem extends Component {
 			icon = 'themes';
 		} else if ( isGoogleApps( purchase ) ) {
 			icon = 'mail';
-		} else if ( isJetpackBackup( purchase ) ) {
-			icon = 'cloud-upload';
 		}
 
 		if ( ! icon ) {
diff --git a/client/me/purchases/purchase-item/style.scss b/client/me/purchases/purchase-item/style.scss
index 1afe6979218b5..e2b6ed61d2fac 100644
--- a/client/me/purchases/purchase-item/style.scss
+++ b/client/me/purchases/purchase-item/style.scss
@@ -59,8 +59,7 @@
 		background: var( --color-neutral );
 		fill: var( --color-text-inverted );
 	}
-	
-	.gridicons-cloud-upload,
+
 	.gridicons-domains {
 		border-radius: 50%;
 	}
diff --git a/client/my-sites/plan-features/header.jsx b/client/my-sites/plan-features/header.jsx
index 085c6ee16d8c1..6871bf13e55a7 100644
--- a/client/my-sites/plan-features/header.jsx
+++ b/client/my-sites/plan-features/header.jsx
@@ -12,13 +12,13 @@ import formatCurrency from '@automattic/format-currency';
 /**
  * Internal Dependencies
  **/
+import { ProductIcon } from '@automattic/components';
 import { localize } from 'i18n-calypso';
 import InfoPopover from 'components/info-popover';
 import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer';
 import PlanPrice from 'my-sites/plan-price';
 import PlanIntervalDiscount from 'my-sites/plan-interval-discount';
 import PlanPill from 'components/plans/plan-pill';
-import PlanIcon from 'components/plans/plan-icon';
 import { TYPE_FREE } from 'lib/plans/constants';
 import { PLANS_LIST } from 'lib/plans/plans-list';
 import { getYearlyPlanByMonthly, planMatches, getPlanClass } from 'lib/plans';
@@ -59,7 +59,7 @@ export class PlanFeaturesHeader extends Component {
 		return (
 			<header className={ headerClasses }>
 				<div className="plan-features__header-figure">
-					<PlanIcon plan={ planType } />
+					<ProductIcon slug={ planType } />
 				</div>
 				<div className="plan-features__header-text">
 					<h4 className="plan-features__header-title">{ title }</h4>
@@ -138,7 +138,7 @@ export class PlanFeaturesHeader extends Component {
 					{ bestValue && <PlanPill>{ translate( 'Best Value' ) }</PlanPill> }
 				</header>
 				<div className="plan-features__graphic">
-					<PlanIcon plan={ planType } />
+					<ProductIcon slug={ planType } />
 				</div>
 				<div className="plan-features__pricing">
 					{ this.getPlanFeaturesPrices() } { this.getBillingTimeframe() }
diff --git a/client/my-sites/plans/current-plan/my-plan-card/index.jsx b/client/my-sites/plans/current-plan/my-plan-card/index.jsx
index 2dde3faea6b02..c62fa9472ab32 100644
--- a/client/my-sites/plans/current-plan/my-plan-card/index.jsx
+++ b/client/my-sites/plans/current-plan/my-plan-card/index.jsx
@@ -8,8 +8,7 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import { Card } from '@automattic/components';
-import ProductIcon from 'components/product-icon';
+import { Card, ProductIcon } from '@automattic/components';
 
 /**
  * Style dependencies
@@ -27,7 +26,7 @@ const MyPlanCard = ( { action, isError, isPlaceholder, details, product, tagline
 		<Card className={ cardClassNames } compact>
 			<div className="my-plan-card__primary">
 				<div className="my-plan-card__icon">
-					{ ! isPlaceholder && product && <ProductIcon product={ product } /> }
+					{ ! isPlaceholder && product && <ProductIcon slug={ product } /> }
 				</div>
 				<div className="my-plan-card__header">
 					{ title && <h2 className="my-plan-card__title">{ title }</h2> }