Icons: self declare color

[jasmussen]

What?

Adds fill="currentColor" to the outer <svg> tag of all 330 icons in @wordpress/icons, so every icon self-declares its colour intent at the source.

As commit number two, to keep or delete as we decide, it adds a small normalizeSourceIcons helper to packages/icons/lib/generate-library.cjs that performs this normalisation. The helper exists as a manual maintenance tool, to be invoked on demand when new icons are added.

Why?

Follow-up to review feedback.

Delivered as a separate PR for ease of review. It's a big diff because it touches all icons, but it's largely mechanical, but large.

How?

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">

The script skips any SVGs whose outer already declares fill= as an attribute, or declares fill inside a style attribute (e.g. stroke-based icons that use style="fill: none"). Children are untouched.

To re-run after adding new icons:

node -e "require('./packages/icons/lib/generate-library.cjs').normalizeSourceIcons()"

Testing Instructions

• npm run storybook:dev
• Confirm Storybook renders the icon library identically to trunk.

This PR was co-authored with help of Claude Opus 4.8.

---

✍️ Dev note for WP 7.1

Icon colors should be customized with color

Since @wordpress/icons version 15.0.0, each individual icon in the library now defines how they inherit currentColor internally. By default, every icon renders using the current text color.

If your code tints icons by setting fill, switch to color instead:

/* Before */
.my-icon {
	fill: #3858e9;
}

/* After */
.my-icon {
	color: #3858e9;
}

This is more reliable because icons may use fill, stroke, or a mix of both internally. Going forward, color is the recommended way to tint icons.

[github-actions]

Size Change: +864 B (+0.01%)

Total Size: 7.51 MB

📦 View Changed

Filename	Size	Change
build/modules/boot/index.min.js	52.9 kB	+11 B (+0.02%)
build/modules/content-types/index.min.js	159 kB	+26 B (+0.02%)
build/modules/edit-site-init/index.min.js	1.42 kB	+15 B (+1.07%)
build/modules/workflow/index.min.js	19.9 kB	+11 B (+0.06%)
build/scripts/block-directory/index.min.js	43.5 kB	+12 B (+0.03%)
build/scripts/block-editor/index.min.js	382 kB	+34 B (+0.01%)
build/scripts/block-library/index.min.js	324 kB	+65 B (+0.02%)
build/scripts/commands/index.min.js	21 kB	+10 B (+0.05%)
build/scripts/components/index.min.js	264 kB	+19 B (+0.01%)
build/scripts/core-commands/index.min.js	4.35 kB	+13 B (+0.3%)
build/scripts/customize-widgets/index.min.js	14.6 kB	+14 B (+0.1%)
build/scripts/edit-post/index.min.js	52.9 kB	+19 B (+0.04%)
build/scripts/edit-site/index.min.js	299 kB	+511 B (+0.17%)
build/scripts/edit-widgets/index.min.js	22.2 kB	+15 B (+0.07%)
build/scripts/editor/index.min.js	475 kB	+52 B (+0.01%)
build/scripts/format-library/index.min.js	30.8 kB	+6 B (+0.02%)
build/scripts/media-utils/index.min.js	114 kB	+22 B (+0.02%)
build/scripts/patterns/index.min.js	12.2 kB	+11 B (+0.09%)
build/scripts/plugins/index.min.js	2.93 kB	+12 B (+0.41%)
build/scripts/preferences/index.min.js	3.31 kB	+14 B (+0.42%)
build/scripts/reusable-blocks/index.min.js	3.11 kB	+14 B (+0.45%)
build/scripts/widgets/index.min.js	7.81 kB	+14 B (+0.18%)
build/styles/edit-site/style-rtl.css	22.1 kB	-4 B (-0.02%)
build/styles/edit-site/style-rtl.min.css	18.2 kB	-10 B (-0.05%)
build/styles/edit-site/style.css	22.1 kB	-4 B (-0.02%)
build/styles/edit-site/style.min.css	18.2 kB	-8 B (-0.04%)
build/styles/editor/style-rtl.css	30.7 kB	-5 B (-0.02%)
build/styles/editor/style-rtl.min.css	26.2 kB	-10 B (-0.04%)
build/styles/editor/style.css	30.8 kB	-5 B (-0.02%)
build/styles/editor/style.min.css	26.1 kB	-10 B (-0.04%)

_{compressed-size-action}

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in f7e9eb7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27764668864
📝 Reported issues:

• [Flaky Test] Text blocks sync modifications between users #78855 in /test/e2e/specs/editor/collaboration/collaboration-block-gauntlet.spec.ts

[mirka]

Icon component compatibility

I checked the color behavior for all icons in all three Icon components, and they all consistently render in the currentColor.

Possible breakage scenarios

The one condition that makes this possibly breaking for consumers is when they are setting a non-currentColor fill in on a wrapper element, relying on inheritance. If they're setting it directly on the Icon component, or on svg, they're safe. I've documented this in the changelog.

New guidance for customizing icon colors

The new guidance for setting custom colors on icons is to use color, not fill. This is in anticipation for the changes in #78808, where fill will no longer work consistently.

Addressing the style overrides

There are a good number of places in Gutenberg where fill is set to control the icon color. Among those places:

1. There are likely fill styles that can be removed, now that each icon sets itself to currentColor. This should be addressed separately in a follow up after #78808.
2. I anticipate a handful of regressions that will be triggered by the changes in #78808.
3. I identified only one instance where the svg changes in this PR would cause a possible regression. That instance in DataForm is addressed in this PR.

[mirka]

Color behavior is now a feature of individual icons in @wordpress/icons, so the demonstration is moved to that package's stories.

[mirka]

Based on a scan of the codebase, this is the only place that breaks due to these changes. It isn't a condition that appears in Gutenberg itself, but the regression can manifest when layout is panel-dropdown, and labelPosition is none.

Before	After

(This is possibly not a condition that anyone will ever hit, but we can fix it anyway.)

[ciampo]

I'm honestly also confused by the previous state of the code: the svg had fill: currentColor, but the outer element also specified a hardcoded fill?

[mirka]

Yes, it does look redundant.

[mirka]

I would appreciate a technical review from @WordPress/gutenberg-components.

[ciampo]

I scanned the codebase further and found another potential candidate for regression:

gutenberg/packages/block-editor/src/components/block-manager/style.scss

Lines 48 to 50 in 84dd3ad

	.block-editor-block-icon {
	margin-right: 10px;
	fill: $gray-900;

There are also a few other ancestor `fill` rules that should be carefully assessed as potential regressions:

• gutenberg/packages/dataviews/src/components/dataform-layouts/panel/style.scss

  Lines 51 to 65 in 84dd3ad

  	.dataforms-layouts-panel__field-trigger--edit-always
  	.dataforms-layouts-panel__field-trigger-icon {
  	opacity: 1;
  	fill: currentColor;
  	&:hover,
  	&:focus-visible {
  	fill: var(--wpds-color-foreground-interactive-brand);
  	}
  	}
  	.dataforms-layouts-panel__field-trigger-icon {
  	padding: 0;
  	color: var(--wpds-color-foreground-interactive-brand);
  	flex: 0 0 auto;

• gutenberg/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts

  Lines 35 to 43 in 84dd3ad

  	} ) => css`
  	align-items: center;
  	appearance: none;
  	background: transparent;
  	border: none;
  	border-radius: ${ CONFIG.radiusXSmall };
  	color: ${ COLORS.theme.gray[ 700 ] };
  	fill: currentColor;
  	cursor: pointer;

• gutenberg/packages/components/src/custom-select-control-v2/styles.ts

  Lines 210 to 214 in 84dd3ad

  	export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
  	display: flex;
  	align-items: center;
  	margin-inline-start: ${ space( 2 ) };
  	fill: currentColor;

• gutenberg/packages/editor/src/components/collaborators-presence/avatar/styles.scss

  Lines 156 to 166 in 84dd3ad

  	position: absolute;
  	top: 0;
  	left: 0;
  	width: $button-size-compact;
  	height: $button-size-compact;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	z-index: 1;
  	color: $gray-900;
  	fill: $gray-900;

I also investigated some potential cleanup opportunities (that can be done as follow-ups to keep the PR focused):

`fill: currentColor` cleanup

• gutenberg/packages/global-styles-ui/src/style.scss

  Lines 96 to 98 in 84dd3ad

  	.global-styles-ui-icon-with-current-color {
  	fill: currentColor;
  	}

• gutenberg/packages/global-styles-ui/src/icon-with-current-color.tsx

  Lines 20 to 28 in 84dd3ad

  	...props
  	}: IconWithCurrentColorProps ) {
  	return (
  	<Icon
  	className={ clsx(
  	className,
  	'global-styles-ui-icon-with-current-color'
  	) }
  	{ ...props }

• gutenberg/packages/media-fields/src/media_thumbnail/style.scss

  Lines 47 to 49 in 84dd3ad

  	.dataviews-media-field__media-thumbnail--icon {
  	color: colors.$gray-700;
  	fill: currentColor;

• gutenberg/packages/fields/src/components/create-template-part-modal/style.scss

  Lines 76 to 78 in 84dd3ad

  	.fields-create-template-part-modal__area-radio-icon,
  	.fields-create-template-part-modal__area-radio-checkmark {
  	fill: currentColor;

• gutenberg/packages/dataviews/src/components/dataform-layouts/panel/style.scss

  Lines 51 to 65 in 84dd3ad

  	.dataforms-layouts-panel__field-trigger--edit-always
  	.dataforms-layouts-panel__field-trigger-icon {
  	opacity: 1;
  	fill: currentColor;
  	&:hover,
  	&:focus-visible {
  	fill: var(--wpds-color-foreground-interactive-brand);
  	}
  	}
  	.dataforms-layouts-panel__field-trigger-icon {
  	padding: 0;
  	color: var(--wpds-color-foreground-interactive-brand);
  	flex: 0 0 auto;

• gutenberg/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts

  Lines 35 to 43 in 84dd3ad

  	} ) => css`
  	align-items: center;
  	appearance: none;
  	background: transparent;
  	border: none;
  	border-radius: ${ CONFIG.radiusXSmall };
  	color: ${ COLORS.theme.gray[ 700 ] };
  	fill: currentColor;
  	cursor: pointer;

• gutenberg/packages/components/src/tabs/styles.ts

  Lines 218 to 222 in 84dd3ad

  	min-height: ${ space( 10 ) };
  	&[aria-selected='true'] {
  	fill: currentColor;
  	}

• gutenberg/packages/global-styles-ui/src/style.scss

  Lines 246 to 248 in 84dd3ad

  	.global-styles-ui-sidebar__panel .block-editor-block-icon svg {
  	fill: currentColor;
  	}

`fill` -> `color` cleanup/migration

• gutenberg/packages/block-editor/src/components/block-manager/style.scss

  Lines 48 to 50 in 84dd3ad

  	.block-editor-block-icon {
  	margin-right: 10px;
  	fill: $gray-900;

• gutenberg/packages/dataviews/src/components/dataviews-filters/style.scss

  Lines 127 to 157 in 84dd3ad

  	.dataviews-filters__summary-chip-remove {
  	width: var(--wpds-dimension-size-sm);
  	height: var(--wpds-dimension-size-sm);
  	border-radius: var(--wpds-border-radius-md);
  	border: 0;
  	padding: 0;
  	position: absolute;
  	right: var(--wpds-dimension-padding-xs);
  	top: 50%;
  	transform: translateY(-50%);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	background: transparent;
  	cursor: var(--wpds-cursor-control);
  	svg {
  	fill: var(--wpds-color-foreground-interactive-neutral);
  	}
  	&:hover,
  	&:focus {
  	background: var(--wpds-color-background-interactive-neutral-weak-active);
  	svg {
  	fill: var(--wpds-color-foreground-interactive-neutral-active);
  	}
  	}
  	&.has-values {
  	svg {
  	fill: var(--wpds-color-foreground-interactive-brand);

• gutenberg/packages/dataviews/src/components/dataviews-filters/style.scss

  Lines 302 to 309 in 84dd3ad

  	background: var(--wpds-color-background-interactive-brand-strong);
  	border-color: var(--wpds-color-stroke-interactive-brand);
  	svg {
  	--checkmark-size: var(--checkbox-size);
  	fill: var(--wpds-color-foreground-interactive-neutral-strong);
  	position: absolute;

• gutenberg/packages/edit-site/src/components/sidebar-navigation-item/style.scss

  Lines 15 to 32 in 84dd3ad

  	.edit-site-sidebar-navigation-item__drilldown-indicator {
  	fill: var(--wpds-color-foreground-interactive-neutral-active);
  	}
  	}
  	&[aria-current="true"] {
  	background: var(--wpds-color-background-interactive-neutral-weak-active);
  	color: var(--wpds-color-foreground-interactive-neutral-active);
  	font-weight: $font-weight-medium;
  	}
  	// Make sure the focus style is drawn on top of the current item background.
  	&:focus-visible {
  	transform: translateZ(0);
  	}
  	.edit-site-sidebar-navigation-item__drilldown-indicator {
  	fill: var(--wpds-color-foreground-interactive-neutral-weak);

• gutenberg/packages/edit-site/src/components/site-hub/style.scss

  Lines 83 to 89 in 84dd3ad

  	.edit-site-site-hub_toggle-command-center {
  	color: var(--wpds-color-foreground-interactive-neutral);
  	&:hover,
  	&:active {
  	svg {
  	fill: var(--wpds-color-foreground-interactive-neutral-active);

• gutenberg/packages/block-editor/src/components/block-variation-picker/content.scss

  Lines 18 to 31 in 84dd3ad

  	svg {
  	fill: $gray-600 !important;
  	}
  	.components-button {
  	padding: 4px;
  	}
  	.components-button:hover {
  	background: none !important; // !important to simplify the selector.
  	}
  	.components-button:hover svg {
  	fill: var(--wp-admin-theme-color) !important;

• gutenberg/packages/edit-site/src/components/add-new-template/style.scss

  Lines 111 to 116 in 84dd3ad

  	.edit-site-add-new-template__template-button,
  	.edit-site-add-new-template__custom-template-button {
  	svg {
  	fill: var(--wp-admin-theme-color);
  	}

• gutenberg/routes/template-list/add-new-template/style.scss

  Lines 111 to 116 in 84dd3ad

  	.template-list-add-new-template__template-button,
  	.template-list-add-new-template__custom-template-button {
  	svg {
  	fill: var(--wp-admin-theme-color);
  	}

[ciampo]

I'm honestly also confused by the previous state of the code: the svg had fill: currentColor, but the outer element also specified a hardcoded fill?

[mirka]

gutenberg/packages/block-editor/src/components/block-manager/style.scss

I looked at this one too and I think it is safe to leave as-is. The rule targets the .block-editor-block-icon wrapper, so fill="currentColor" on the nested source SVG means the icon now follows inherited color instead.

In this block manager context, that inherited color appears to be the same normal UI text color as $gray-900, so I don’t expect a visual regression here. I’d rather not change the wrapper rule in this PR, since BlockIcon can also render custom/third-party block icons where inherited fill may still be useful.

There are also a few other ancestor fill rules that should be carefully assessed as potential regressions

Considered 👍

[mirka]

Thanks for the review @ciampo! I think we're good now? I also added a dev note.

[manzoorwanijk]

Can we please add "@storybook/react-vite": "^10.4.3" to devDependencies in packages/icons/package.json?

[ciampo]

#79506

[aduth]

@manzoorwanijk Is this not caught by one of your recent linting improvements for dependencies?

Digging into this a bit, I see we disable import/no-extraneous-dependencies for a bunch of files, including Storybook files like this one. I'm not sure the full context behind that, but my instinct is that feels wrong, and we could be catching these issues that way.

[manzoorwanijk]

Is this not caught by one of your recent linting improvements for dependencies?

This is a dev only import, not part of the bundle. That tool catches the missing dependencies in published bundles.

These types of issues will be caught automatically once we adopt #76195.

[manzoorwanijk]

I wish Node 24 upgrade would not block such things and we adopt #72143 to unblock the new npm features, but that will probably remain a wish forever 😄

[aduth]

I still think those ESLint overrides are misguided and should be improved, and that would also help identify these issues.

I did a bit of digging and found that it stems back to #16969, with a comment "disabled [...] files for now [...] but we should revisit it really soon" but never happened, and likely expanded from there to exclude more files, maybe compounded by previous issues from #72136, and general apathy toward strict testing for "development" files.