Icons: Fix color overrides for stroke-based icons by t-hamano · Pull Request #82477 · WordPress/gutenberg

t-hamano · 2026-09-05T01:47:40Z

Follow up to Icons: Redraw 35 prominent icons with consistent stroke widths #78808.
Noticed while reviewing CSS Styling: Represent focus with outline for list view component #82129.

What?

This PR makes SVG icons colorable through the color property so that color overrides reach stroke-based icons.

Why?

Since #78808, stroke-based icons render an inline fill: none and paint themselves with stroke="currentColor":

<svg class="my-icon" viewBox="0 0 24 24" style="fill: none" stroke="currentColor">
	<path d="…" />
</svg>

Any styling that colors an icon via fill therefore stops working:

.my-icon {
	fill: #007cba;
}

How?

Replace fill with color where the rule exists to color an icon.
Where a consumer may supply a custom icon that does not use currentColor, keep fill as a fallback and add color alongside it.
Rules that currently target non-stroke icons are updated the same way, to avoid the same regression when those icons are redrawn.
Only @wordpress/block-editor and @wordpress/components get a CHANGELOG entry: they are the packages where an icon is visually fixed. The other packages only receive the preventive change.

Testing Instructions

I have left an inline comment on each change describing where to look.

Screenshots or screencast

Screenshots are attached to the inline comments, next to the change they belong to.

Use of AI Tools

Claude Code was used to locate the affected styles and to draft this change. I reviewed every change and take responsibility for it.

Co-Authored-By: Claude <noreply@anthropic.com>

coderabbitai · 2026-09-05T01:47:45Z

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: c65488af-173e-4a85-8361-f481dcae5cb5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

_{Comment @coderabbitai help to get the list of available commands.}

github-actions · 2026-09-05T01:47:52Z

🤖 PR meta 🤖

📦 Bundle size

Size Change: -52 B (0%)

Total Size: 8 MB

📦 View Changed

Filename	Size	Change
`build/styles/block-editor/content-rtl.css`	5.68 kB	+5 B (+0.09%)
`build/styles/block-editor/content-rtl.min.css`	4.17 kB	+5 B (+0.12%)
`build/styles/block-editor/content.css`	5.69 kB	+5 B (+0.09%)
`build/styles/block-editor/content.min.css`	4.16 kB	+4 B (+0.1%)
`build/styles/block-editor/style-rtl.css`	20.5 kB	+9 B (+0.04%)
`build/styles/block-editor/style-rtl.min.css`	17.2 kB	+1 B (+0.01%)
`build/styles/block-editor/style.css`	20.5 kB	+11 B (+0.05%)
`build/styles/block-editor/style.min.css`	17.2 kB	+3 B (+0.02%)
`build/styles/components/style-rtl.css`	16.2 kB	+15 B (+0.09%)
`build/styles/components/style-rtl.min.css`	13.7 kB	+9 B (+0.07%)
`build/styles/components/style.css`	16.3 kB	+13 B (+0.08%)
`build/styles/components/style.min.css`	13.7 kB	+9 B (+0.07%)
`build/styles/edit-site/style-rtl.css`	21.8 kB	-27 B (-0.12%)
`build/styles/edit-site/style-rtl.min.css`	17.8 kB	-25 B (-0.14%)
`build/styles/edit-site/style.css`	21.8 kB	-27 B (-0.12%)
`build/styles/edit-site/style.min.css`	17.8 kB	-25 B (-0.14%)
`build/styles/editor/style-rtl.css`	31.7 kB	-8 B (-0.03%)
`build/styles/editor/style-rtl.min.css`	27 kB	-9 B (-0.03%)
`build/styles/editor/style.css`	31.7 kB	-10 B (-0.03%)
`build/styles/editor/style.min.css`	27 kB	-10 B (-0.04%)

_{87dbc86 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	`d2f082b`	trunk	% Change
timeToFirstByte	64.4 ms +1.71% -12.58%	65.05 ms +6.69% -16.45%	-1%
largestContentfulPaint	96 ms +6.25% -2.08%	100 ms +2% -8%	-4%
lcpMinusTtfb	33.95 ms +16.49% -8.39%	33.7 ms +20.77% -9.2%	0.74%
wpBeforeTemplate	34.03 ms +3.64% -17.93%	33.8 ms +16.86% -20.44%	0.68%
wpTemplate	24.64 ms +5.88% -7.47%	24.37 ms +3.94% -1.23%	1.11%
wpTotal	59.24 ms +1.98% -12.47%	59.85 ms +6.78% -15.27%	-1.02%
wpMemoryUsage	7.52 MB +0% -0%	7.48 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	`d2f082b`	trunk	% Change
timeToFirstByte	41.4 ms +17.87% -3.14%	43 ms +8.37% -4.53%	-3.72%
largestContentfulPaint	92 ms +4.35% -8.7%	88 ms +6.82% -4.55%	4.55%
lcpMinusTtfb	45.75 ms +12.02% -3.72%	44.1 ms +4.88% -2.04%	3.74%
wpBeforeTemplate	24.36 ms +21.26% -4.27%	24.08 ms +14.53% -3.49%	1.16%
wpTemplate	14.47 ms +5.32% -6.5%	14.25 ms +6.74% -4.49%	1.54%
wpTotal	38.36 ms +18.2% -3.34%	39.84 ms +6.43% -5.35%	-3.71%
wpMemoryUsage	5.51 MB +0% -0%	5.47 MB +0% -0%	0.64%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	`d2f082b`	trunk	% Change
mediaProcessingJpeg	410.07 ms +1.99% -0.71%	412.24 ms +0.83% -0.45%	-0.53%
mediaProcessingAvif	6382 ms +0.1% -0.1%	6440.3 ms +0.35% -0.18%	-0.91%
mediaProcessingJpegToAvif	4552.84 ms +0.12% -0.04%	4578.56 ms +0.15% -0.16%	-0.56%

media-upload

Metric	`d2f082b`	trunk	% Change
jpegUploadProcessing	1460.3 ms +34.26% -3.36%	1430.66 ms +0.35% -0.9%	2.07%
pngUploadProcessing	207.82 ms +5.4% -2.51%	202.25 ms +4.65% -5.54%	2.75%
largeJpegUploadProcessing	1412.52 ms +0.18% -0.4%	1411.02 ms +0.14% -0.31%	0.11%
multipleImageUploadProcessing	1556.63 ms +1.4% -0.62%	1539.91 ms +1.78% -0.76%	1.09%

post-editor

Metric	`d2f082b`	trunk	% Change
serverResponse	443.62 ms +2.98% -9.98%	429.31 ms +5.95% -7.95%	3.33%
firstPaint	190.63 ms +27.05% -10.24%	221.55 ms +27.49% -20.46%	-13.96%
domContentLoaded	1265.58 ms +0.81% -1.67%	1248.41 ms +0.86% -1.1%	1.38%
loaded	1266.86 ms +0.81% -1.69%	1249.49 ms +0.87% -1.09%	1.39%
firstContentfulPaint	417.54 ms +1.64% -6.23%	409.9 ms +5.2% -5.89%	1.86%
firstBlock	3380.72 ms +0.88% -1.01%	3363.87 ms +1.45% -1.48%	0.5%
type	14.09 ms +3.26% -3.97%	13.87 ms +7.21% -3.03%	1.59%
typeWithoutInspector	13.82 ms +12.16% -4.99%	13.68 ms +2.63% -6.36%	1.02%
typeWithTopToolbar	18.55 ms +9.49% -9.97%	17.4 ms +7.13% -6.03%	6.61%
typeContainer	8.83 ms +8.04% -3.74%	8.48 ms +9.91% -6.01%	4.13%
focus	79.59 ms +12.74% -16.71%	71.25 ms +20.94% -7.23%	11.71%
firstFocus	158.98 ms +0% -0%	166.89 ms +0% -0%	-4.74%
selectAll	538.6 ms +6.34% -2.78%	545 ms +4.01% -2.86%	-1.17%
listViewOpen	64.01 ms +12.79% -7.06%	61.84 ms +10.85% -7.71%	3.51%
inserterOpen	22.38 ms +9.96% -4.47%	24.49 ms +5.55% -8.13%	-8.62%
inserterHover	3.43 ms +5.83% -16.91%	3.64 ms +9.34% -10.44%	-5.77%
inserterSearch	8.36 ms +2.87% -1.79%	8.72 ms +9.98% -8.37%	-4.13%
loadPatterns	626.69 ms +2.18% -2.04%	632.88 ms +2.48% -2.73%	-0.98%
wpTotal	432.77 ms +2.86% -10.31%	418.24 ms +6.05% -8.08%	3.47%
wpMemoryUsage	13.09 MB +0% -0%	13.05 MB +0% -0%	0.28%
wpDbQueries	54 +0% -1.85%	54 +0% -0%	0%

site-editor

Metric	`d2f082b`	trunk	% Change
serverResponse	521.16 ms +5.38% -3.97%	522.14 ms +2.42% -4.27%	-0.19%
firstPaint	248.84 ms +12.96% -7.33%	261.15 ms +3.24% -10.15%	-4.71%
domContentLoaded	1425.65 ms +1.72% -1.1%	1424.72 ms +1.48% -1.9%	0.07%
loaded	1426.89 ms +1.73% -1.1%	1425.91 ms +1.48% -1.9%	0.07%
firstContentfulPaint	445.52 ms +4.27% -1.13%	443.71 ms +3.25% -2.1%	0.41%
firstBlock	4549.8 ms +2.41% -0.17%	4548.47 ms +0.5% -0.73%	0.03%
type	15.65 ms +4.03% -5.81%	15.89 ms +9.06% -9.06%	-1.51%
navigate	110.13 ms +7.25% -11.65%	96.34 ms +17.77% -2.36%	14.31%
loadPatterns	1337.46 ms +28.66% -8.52%	1399.21 ms +11.87% -4.61%	-4.41%
loadPages	1135.05 ms +4.15% -6.17%	1115.78 ms +4.43% -5.45%	1.73%
wpTotal	511.71 ms +5.52% -4.1%	512.88 ms +2.47% -4.46%	-0.23%
wpMemoryUsage	12.00 MB +0% -0%	11.97 MB +0% -0%	0.24%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{87dbc86 Run}

t-hamano · 2026-09-05T01:54:48Z

-.edit-site-patterns__pattern-icon {
-	fill: var(--wp-block-synced-color);
-	flex-shrink: 0;
-}


Removed rather than updated to color: this class no longer exists in any source file, so the rule is dead CSS.

Co-Authored-By: Claude <noreply@anthropic.com>

t-hamano · 2026-09-05T02:01:17Z

+				// Keep `fill` as a fallback for custom block icons that do not use `currentColor`.
 				fill: CanvasText;
+				color: CanvasText;


Block icons in the admin UI, in High Contrast mode.

Before After

t-hamano · 2026-09-05T02:01:18Z

+				// Keep `fill` as a fallback for custom block icons that do not use `currentColor`.
 				fill: CanvasText;
+				color: CanvasText;


Block icons in the list view, in High Contrast mode.

Before After

t-hamano · 2026-09-05T02:01:19Z

+			// Keep `fill` as a fallback for custom icons that do not use `currentColor`.
 			fill: CanvasText;
+			color: CanvasText;


Icons rendered inside a Button, in High Contrast mode.

Before After

t-hamano · 2026-09-05T02:01:20Z

+			// Keep `fill` as a fallback for custom icons that do not use `currentColor`.
 			fill: CanvasText;
+			color: CanvasText;


The icon in a placeholder label, in High Contrast mode.

Before After

t-hamano · 2026-09-05T02:01:32Z

+				// Keep `fill` as a fallback for custom block icons that do not use `currentColor`.
 				fill: CanvasText;
+				color: CanvasText;


Block icons in the canvas, in High Contrast mode.

packages/block-editor/src/components/block-icon/content.scss is the canvas copy of packages/block-editor/src/components/block-icon/style.scss. The two files are identical and are changed together.

t-hamano · 2026-09-05T02:01:33Z

 		flex-shrink: 0;
 		margin-right: $grid-unit-15;
-		fill: $gray-900;
+		color: $gray-900;


The lock / unlock icon next to each checkbox in the block lock modal.

lock and unlock are not stroke-based today, so this is a preventive change.

t-hamano · 2026-09-05T02:01:34Z


 		.block-editor-patterns__pattern-icon {
-			fill: var(--wp-block-synced-color);
+			color: var(--wp-block-synced-color);


The icon on a synced pattern in the patterns list.

symbol is not stroke-based today, so this is a preventive change.

t-hamano · 2026-09-05T02:01:35Z


 		&-icon--checked {
-			fill: $gray-300;
+			color: $gray-300;


The viewport icon of a checked viewport in the block visibility modal.

desktop, tablet and mobile are not stroke-based today, so this is a preventive change.

t-hamano · 2026-09-05T02:01:37Z

 	&:hover,
 	&:focus-visible {
-		fill: var(--wpds-color-foreground-interactive-brand);
+		color: var(--wpds-color-foreground-interactive-brand);


The edit icon on a panel field row. This style is currently only available in Storybook.

pencil is not stroke-based today, so this is a preventive change.

t-hamano · 2026-09-05T02:01:38Z

 	pointer-events: none;
 	svg {
-		fill: $gray-600;
+		color: $gray-600;


The layout icon in the document bar, shown in the template-locked rendering mode.

layout is not stroke-based today, so this is a preventive change.

ciampo · 2026-09-05T12:06:37Z

@t-hamano did you intend to close this PR?

t-hamano · 2026-09-05T12:17:43Z

@ciampo While working on this PR, I realized that the @media (forced-colors: active) {} block could be deleted entirely. Therefore, instead of submitting this PR, I have temporarily put it on hold. Currently, there seem to be no issues arising from not rewriting fill to color, but I may reopen this PR after #82477 is merged.

Icons: Color icons through color so overrides reach stroke-based icons

5eeeb59

Co-Authored-By: Claude <noreply@anthropic.com>

github-actions Bot added [Package] Components /packages/components [Package] Editor /packages/editor [Package] Block editor /packages/block-editor [Package] Edit Site /packages/edit-site [Package] DataViews /packages/dataviews labels Sep 5, 2026

t-hamano changed the title ~~Icons: Color icons through color so overrides reach stroke-based icons~~ Icons: Fix color overrides for stroke-based icons Sep 5, 2026

t-hamano commented Sep 5, 2026

View reviewed changes

t-hamano added [Type] Bug An existing feature does not function as intended [Block] Icon Affects the Icon block labels Sep 5, 2026

Add CHANGELOG entries for the packages with a visible icon fix

87dbc86

Co-Authored-By: Claude <noreply@anthropic.com>

t-hamano requested review from ciampo, jasmussen and mirka September 5, 2026 02:00

t-hamano self-assigned this Sep 5, 2026

t-hamano commented Sep 5, 2026

View reviewed changes

t-hamano closed this Sep 5, 2026

t-hamano deleted the fix/stroke-based-icon-color-overrides branch September 5, 2026 07:34

dabowman mentioned this pull request Sep 23, 2026

@wordpress/ui: Icons from @wordpress/icons below 15.0.0 render black inside Button and IconButton #83471

Closed

3 of 6 tasks

Conversation

t-hamano commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Use of AI Tools

Uh oh!

coderabbitai Bot commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 PR meta 🤖

📦 Bundle size

⚡ Performance

Uh oh!

t-hamano Sep 5, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ciampo commented Sep 5, 2026

Uh oh!

t-hamano commented Sep 5, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

t-hamano commented Sep 5, 2026 •

edited

Loading

coderabbitai Bot commented Sep 5, 2026 •

edited

Loading

github-actions Bot commented Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading

t-hamano Sep 5, 2026 •

edited

Loading