diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index ef55bc6..43be86e 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -1130,7 +1130,11 @@ export function GraphWrapper({
 
 		return (
 			<a href={action} className="action-button" title={tooltip}>
-				<span className={`codicon codicon-${icon} action-button__icon`}></span>
+				<span
+					className={`codicon codicon-${icon} action-button__icon${isBehind ? ' is-behind' : ''}${
+						isAhead ? ' is-ahead' : ''
+					}`}
+				></span>
 				{label}
 				{fetchedText && <span className="action-button__small">(Last fetched {fetchedText})</span>}
 				{(isAhead || isBehind) && (
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index 826771d..7a2264f 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -232,6 +232,18 @@ button:not([disabled]),
 		width: 1.6rem;
 	}
 
+	&__icon {
+		&.is-ahead {
+			color: var(--vscode-gitlens-unpublishedChangesIconColor);
+		}
+		&.is-behind {
+			color: var(--vscode-gitlens-unpulledChangesIconColor);
+		}
+		&.is-ahead.is-behind {
+			color: var(--vscode-gitlens-decorations\.branchDivergedForegroundColor);
+		}
+	}
+
 	&__more,
 	&__more.codicon[class*='codicon-'] {
 		font-size: 1rem;