diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 03f6bfbdd566d..5847a66f8b243 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -1,3 +1,5 @@
+@import "./functions";
+
 /**
  * Colors
  */
@@ -24,3 +26,8 @@ $light-gray-placeholder: rgba($white, 0.65);
 $alert-yellow: #f0b849;
 $alert-red: #cc1818;
 $alert-green: #4ab866;
+
+:root {
+	--wp-block-synced-color: #7a00df;
+	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
+}
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 6362b1b4ca2c7..afda93d5ece7a 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -17,6 +22,7 @@ function BlockCard( {
 	blockType,
 	parentBlockClientId,
 	handleBackButton,
+	isSynced,
 } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
@@ -30,7 +36,11 @@ function BlockCard( {
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 
 	return (
-		<div className="block-editor-block-card">
+		<div
+			className={ classnames( 'block-editor-block-card', {
+				'is-synced': isSynced,
+			} ) }
+		>
 			{ isOffCanvasNavigationEditorEnabled && parentBlockClientId && (
 				<Button
 					onClick={ handleBackButton }
diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
index 07bd4d1ef1d8e..1b2156c19fa79 100644
--- a/packages/block-editor/src/components/block-card/style.scss
+++ b/packages/block-editor/src/components/block-card/style.scss
@@ -28,3 +28,7 @@
 	width: $button-size-small;
 	height: $button-size-small;
 }
+
+.block-editor-block-card.is-synced .block-editor-block-icon {
+	color: var(--wp-block-synced-color);
+}
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 7795bef2525f0..17fd28ae07279 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -19,10 +19,16 @@
 	}
 
 	&:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
 
+	&.is-reusable:hover:not(.is-dragging-blocks)::before,
+	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
+		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
+	}
+
 	&.is-selected:not(.is-dragging-blocks)::before {
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index b2160b3db4b6b..6727851e1647b 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -9,7 +9,12 @@ import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockType,
+	hasBlockSupport,
+	isReusableBlock,
+	isTemplatePart,
+} from '@wordpress/blocks';
 import { ToolbarGroup } from '@wordpress/components';
 
 /**
@@ -109,11 +114,13 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	const shouldShowVisualToolbar = isValid && isVisual;
 	const isMultiToolbar = blockClientIds.length > 1;
+	const isSynced =
+		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
-	const classes = classnames(
-		'block-editor-block-toolbar',
-		shouldShowMovers && 'is-showing-movers'
-	);
+	const classes = classnames( 'block-editor-block-toolbar', {
+		'is-showing-movers': shouldShowMovers,
+		'is-synced': isSynced,
+	} );
 
 	return (
 		<div className={ classes }>
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 00d8d0da47f34..41faa1a46eaed 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -39,6 +39,16 @@
 		border-right: $border-width solid $gray-300;
 	}
 
+	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+		color: var(--wp-block-synced-color);
+	}
+
+	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+		&:disabled .block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
+		}
+	}
+
 	> :last-child,
 	> :last-child .components-toolbar-group,
 	> :last-child .components-toolbar {
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index d24df56df241f..2c7e73ffc0f68 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -10,6 +10,8 @@ import { useMemo, useRef, memo } from '@wordpress/element';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	isReusableBlock,
+	isTemplatePart,
 } from '@wordpress/blocks';
 import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER, isAppleOS } from '@wordpress/keycodes';
@@ -47,6 +49,8 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
+	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable && ! item.disabled }
@@ -55,7 +59,13 @@ function InserterListItem( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className="block-editor-block-types-list__list-item"
+					className={ classnames(
+						'block-editor-block-types-list__list-item',
+
+						{
+							'is-synced': isSynced,
+						}
+					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						isDragging.current = true;
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index b3078adb519f1..67e49db0d6c4d 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -3,6 +3,11 @@
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
+	&.is-synced {
+		.block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
+		}
+	}
 }
 
 .components-button.block-editor-block-types-list__item {
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index f8e19cc6ac335..c79f463b5ed26 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -54,6 +54,7 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
+	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -205,8 +206,10 @@ function ListViewBlock( {
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected': isBranchSelected,
+		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
+		'is-synced': blockInformation.isSynced,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index d2ba24065a328..1ee073445ee44 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -14,6 +14,7 @@ import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
 
 /**
  * Given a block, returns the total number of blocks in that subtree. This is used to help determine
@@ -92,8 +93,12 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		isSyncedBranch = false,
 	} = props;
 
+	const parentBlockInformation = useBlockDisplayInformation( parentId );
+	const syncedBranch = isSyncedBranch || !! parentBlockInformation?.isSynced;
+
 	const canParentExpand = useSelect(
 		( select ) => {
 			if ( ! parentId ) {
@@ -179,6 +184,7 @@ function ListViewBranch( props ) {
 								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 						{ ! showBlock && (
@@ -199,6 +205,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 					</AsyncModeProvider>
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 9782dc7027bc7..9c30798830dae 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -19,6 +19,12 @@
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
+	&.is-selected.is-synced td {
+		background: var(--wp-block-synced-color);
+	}
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
+		color: var(--wp-block-synced-color);
+	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
 		color: $white;
@@ -37,6 +43,13 @@
 				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
+		&::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+		}
+	}
 	&.is-selected .block-editor-list-view-block__menu:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
@@ -58,11 +71,11 @@
 	&.is-last-selected td:last-child {
 		border-bottom-right-radius: $radius-block-ui;
 	}
-	&.is-branch-selected:not(.is-selected) {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+	&.is-synced-branch:not(.is-selected) {
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {
 		border-top-left-radius: $radius-block-ui;
@@ -142,6 +155,7 @@
 			}
 		}
 	}
+
 	// Fix focus styling width when one row has fewer cells.
 	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
 		right: 0;
diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js
index cb8e7a2122f5e..e9b1e8865a05c 100644
--- a/packages/block-editor/src/components/use-block-display-information/index.js
+++ b/packages/block-editor/src/components/use-block-display-information/index.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import {
+	store as blocksStore,
+	isReusableBlock,
+	isTemplatePart,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,10 +20,11 @@ import { store as blockEditorStore } from '../../store';
  *
  * @typedef {Object} WPBlockDisplayInformation
  *
- * @property {string} title       Human-readable block type label.
- * @property {WPIcon} icon        Block type icon.
- * @property {string} description A detailed block type description.
- * @property {string} anchor      HTML anchor.
+ * @property {boolean} isSynced    True if is a reusable block or template part
+ * @property {string}  title       Human-readable block type label.
+ * @property {WPIcon}  icon        Block type icon.
+ * @property {string}  description A detailed block type description.
+ * @property {string}  anchor      HTML anchor.
  */
 
 /**
@@ -50,7 +55,10 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
+			const isSynced =
+				isReusableBlock( blockType ) || isTemplatePart( blockType );
 			const blockTypeInfo = {
+				isSynced,
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
@@ -59,6 +67,7 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! match ) return blockTypeInfo;
 
 			return {
+				isSynced,
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
index b3eb1a67e9945..c49675392a525 100644
--- a/packages/block-library/src/block/editor.scss
+++ b/packages/block-library/src/block/editor.scss
@@ -14,3 +14,20 @@
 		display: none;
 	}
 }
+
+.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
+	&.is-highlighted,
+	&.is-selected {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index c17d37a6078e2..a847ecec01f94 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -5,8 +5,8 @@
 	// and height are used instead of max-(width/height).
 	.components-modal__frame {
 		@include break-small() {
-			width: calc(100% - #{ $grid-unit-20 * 2 });
-			height: calc(100% - #{ $header-height * 2 });
+			width: calc(100% - #{$grid-unit-20 * 2});
+			height: calc(100% - #{$header-height * 2});
 		}
 		@include break-medium() {
 			width: $break-medium - $grid-unit-20 * 2;
@@ -24,3 +24,21 @@
 	padding: $grid-unit-20 0;
 	z-index: z-index(".block-library-template-part__selection-search");
 }
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
+	&.is-highlighted,
+	&.is-selected {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
+}
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index f8f5ac996173b..6c34fea8d95a8 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -618,7 +618,7 @@ export function isReusableBlock( blockOrType ) {
  * @return {boolean} Whether the given block is a template part.
  */
 export function isTemplatePart( blockOrType ) {
-	return blockOrType.name === 'core/template-part';
+	return blockOrType?.name === 'core/template-part';
 }
 
 /**
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 2bf1ba13a36a1..b829e19f01342 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -20,7 +20,11 @@ import {
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+	BlockIcon,
+} from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -52,10 +56,13 @@ function useSecondaryText() {
 		[]
 	);
 
+	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
+
 	if ( activeEntityBlockId ) {
 		return {
 			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
 			isActive: true,
+			icon: blockInformation?.icon,
 		};
 	}
 
@@ -90,9 +97,10 @@ export default function DocumentActions() {
 				templateType: postType,
 			};
 		}, [] );
+
 	const entityLabel =
 		templateType === 'wp_template_part' ? 'template part' : 'template';
-	const { label } = useSecondaryText();
+	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -150,13 +158,10 @@ export default function DocumentActions() {
 					</VisuallyHidden>
 					{ decodeEntities( entityTitle ) }
 				</Text>
-
-				<Text
-					size="body"
-					className="edit-site-document-actions__secondary-item"
-				>
-					{ label ?? '' }
-				</Text>
+				<div className="edit-site-document-actions__secondary-item">
+					<BlockIcon icon={ icon } showColors />
+					<Text size="body">{ label ?? '' }</Text>
+				</div>
 
 				<Dropdown
 					popoverProps={ popoverProps }
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index b83a65938b19a..9129a025d5261 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -44,6 +44,8 @@
 	}
 
 	.edit-site-document-actions__secondary-item {
+		display: flex;
+		align-items: center;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -51,9 +53,13 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
-		background: $gray-200;
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		border-radius: 2px;
 		@include reduce-motion(transition);
+
+		.block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
+		}
 	}
 
 	&.has-secondary-label {
diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
index 531d4d2487d12..ee840be7c43db 100644
--- a/packages/edit-site/src/components/template-details/style.scss
+++ b/packages/edit-site/src/components/template-details/style.scss
@@ -20,6 +20,10 @@
 	.edit-site-template-details__template-areas-item {
 		position: relative;
 
+		.components-menu-items__item-icon {
+			color: var(--wp-block-synced-color);
+		}
+
 		.edit-site-template-details__template-areas-item-more {
 			position: absolute;
 			right: 0;