Admin: replace dashicons in admin bar and sidebar with @wordpress/icons by fushar · Pull Request #12270 · WordPress/wordpress-develop

fushar · 2026-06-23T03:00:07Z

Trac ticket: https://core.trac.wordpress.org/ticket/65089

Warning

This PR is stacked on top of #12010. Please only review my commit: 6ec651a

Also, some icons were not already public, so they need to be made public, maybe as separate Gutenberg PR. See related: WordPress/gutenberg#79102.

This PR replaces the dashicons usage in admin bar and menu (sidebar) with @wordpress/icons, via the newly-introduced wp_get_icon() function, which outputs an inline SVG to be rendered.

New icon mapping

Admin bar

Item	Old dashicon	New wp/icons	Public?
WordPress logo	`dashicons-wordpress`	`core/wordpress`	❌
Sidebar menu toggle (mobile)	`dashicons-menu-alt`	`core/menu`
My Sites	`dashicons-admin-multisite`	`core/grid`	❌
Site Name — frontend	`dashicons-dashboard`	`core/dashboard`	❌
Site Name — wp-admin	`dashicons-admin-home`	`core/home`
Edit Site Customize	`dashicons-admin-appearance` `dashicons-admin-customizer`	`core/brush`	❌
Edit (post/page/etc.)	`dashicons-edit`	`core/pencil`
+ New	`dashicons-plus`	`core/plus`
Comments	`dashicons-admin-comments`	`core/comment`
Updates	`dashicons-update`	`core/update`	❌
Search Command Palette	`dashicons-search`	`core/search`
My Account (no-avatar fallback)	`dashicons-admin-users`	`core/people`

Admin menu (left sidebar)

For simplicity, only showing new items not present in the admin bar above.

Menu item	Old dashicon	New wp/icons	Public?
Posts	`dashicons-admin-post`	`core/post`	❌
Media	`dashicons-admin-media`	`core/media`	❌
Links	`dashicons-admin-links`	`core/link`	❌
Pages	`dashicons-admin-page`	`core/page`	❌
Plugins	`dashicons-admin-plugins`	`core/plugins`	❌
Tools	`dashicons-admin-tools`	`core/tool`	❌
Settings	`dashicons-admin-settings`	`core/settings`
Collapse menu button	`dashicons-admin-collapse`	`core/chevron-left`

Open questions

I'm not sure about My Sites icon. The closest thing that I think fits is the core/grid icon (see screenshot below). Open to alternatives.
The search/magnifier icon is facing the opposite direction from the old dashicon. Should we do something about it? My vote is to do nothing; if we want to reverse the direction, we should update the icon instead.

Screenshots

WP Admin

Before	After

WP Admin - Multisite

Before	After

Frontend

Before

After

Mobile

Before

After

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: code generation, with my supervision.

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

Introduce a procedural wrapper around `WP_Icons_Registry` so themes and plugins can render any registered core icon as an inline SVG from PHP, mirroring the React `<Icon>` component. This bridges the gap for PHP contexts that otherwise depend on the deprecated dashicons font. `wp_get_icon()` looks up the icon content via the registry and uses `WP_HTML_Tag_Processor` to apply configurable `size` and `class` attributes, plus accessibility handling: a `label` produces `role="img"` and `aria-label`, while its absence marks the icon `aria-hidden="true"`. The function lives in a new `icons.php`, following the established registry-class-plus-procedural-API pairing used by connectors.php and abilities.php. Props ... Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

The test file only covers wp_get_icon(); the_wp_icon() does not exist. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Align wp_get_icon() with the latest changes from the Gutenberg side (WordPress/gutenberg#78332): - Only set width/height when size is numeric, using absint(), so passing null leaves the SVG's intrinsic dimensions untouched. - Drop the fixed 'wp-icon' class and split the class argument on whitespace to support multiple space-separated class names. - Toggle accessibility attributes both ways: when a label is given, set role/aria-label and remove aria-hidden/focusable; otherwise set aria-hidden/focusable and remove role/aria-label. Update the unit tests accordingly. Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-06-23T03:00:15Z

Hi there! 👋

Thank you for your contribution to WordPress! 💖

It looks like this is your first pull request to wordpress-develop. Here are a few things to be aware of that may help you out!

No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description.

Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making.

More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook.

Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook.

If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook.

The Developer Hub also documents the various coding standards that are followed:

Thank you,
The WordPress Project

github-actions · 2026-06-23T03:07:15Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

github-actions · 2026-06-23T09:40:38Z

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @1178653+wordpress-develop-pr-bot[bot]@users.noreply.github.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

Core Committers: Use this line as a base for the props when committing in SVN:

Props wildworks, fushar, jeffpaul, tyxla.

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

fushar · 2026-06-23T09:47:04Z

cc-ing (maybe) interested parties :) @t-hamano @jasmussen @tyxla @scruffian @lucasmendes-design

fushar · 2026-06-23T09:50:28Z

 				// The value is base64-encoded data, so esc_attr() is used here instead of esc_url().
 				$img_style = ' style="background-image:url(\'' . esc_attr( $item[6] ) . '\')"';
 				$img_class = ' svg';
+			} elseif ( str_starts_with( $item[6], 'core/' ) ) {


I am not 100% sure if this condition is sufficient to output the SVG icon from the registry. Open to alternatives 😬

jeffpaul · 2026-06-23T20:14:14Z

These all appear to be solid like-for-like replacements, though I feel least supportive of the Sites icon replacement on multisite. Perhaps a new icon could/should be generated there or review other icons for something besides a 2x2 table sort of icon? Of the existing icons, the one that feels like what I'd recommend otherwise is one that looks like a "two child node branched to the right" (sorry GitHub is giving me problems trying to upload a screenshot from my cell connection).

fushar · 2026-06-24T10:07:30Z

@jeffpaul Thanks for checking!

I feel least supportive of the Sites icon replacement on multisite.

Yep, as noted in the PR description, I'm not sure about this as well.

Of the existing icons, the one that feels like what I'd recommend otherwise is one that looks like a "two child node branched to the right"

You mean core/blockMeta? Indeed this looks more fitting. 😄

But my worry is that the icon slug is not related to "site" at all. I would expect there is something like core/sites icon. Perhaps it's better if we create a new such icon. cc: @jasmussen, @lucasmendes-design (I know you're all on vacation, feel free to respond when you're back.) @fcoveram

Another idea is to use this icon, to represent a "site switcher":

tyxla · 2026-06-24T14:27:54Z

A few things from my end as I'm looking at this work:

This is exciting and a much-awaited overhaul of icons, love it!
It has the potential to have an impact on many plugins, plugin infrastructures and products that rely on the current icon set - something to be mindful about
I don't see enough feedback from @WordPress/gutenberg-design on this, and I believe this is a hard requirement
I believe it's a bit late in the 7.1 cycle for this to move forward, but it makes sense to get it to the finish line on time for landing early in the 7.2 cycle. It's paramount to give plugins and extenders enough time for testing and adopting the necessary changes.
An angle that doesn't seem explored is trying this out as a Gutenberg experiment - not only to allow for safe iteration, but also as yet another way to get useful feedback.

jeffpaul · 2026-06-24T14:48:59Z

@fushar yes the blockMeta was the icon I was trying to reference, though I'm not quite as concerned with the slug for it (not certain that the slug is referenced or rendered anywhere in the UI and if not then there's no end user confusion that could happen). I'm not much in favor of the chevronUpDown option for Sites, in that case would just stick with the 2x2 table-looking icon I suppose but in any case would like a better one for that icon if possible (and if as @tyxla notes this is too late for 7.1 then we've got some time to iterate on the Sites icon).

t-hamano and others added 5 commits May 29, 2026 15:43

Tests: Fix inaccurate docblock referencing nonexistent the_wp_icon().

54df3d4

The test file only covers wp_get_icon(); the_wp_icon() does not exist. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Merge branch 'trunk' into 64847-wp-icon-function

7bc1bd8

Merge branch 'trunk' into 64847-wp-icon-function

961087d

fushar force-pushed the admin-wp-icons branch 4 times, most recently from 95e9293 to 9272a78 Compare June 23, 2026 07:51

Admin: replace dashicons in admin bar and sidebar with @wordpress/icons

6ec651a

fushar force-pushed the admin-wp-icons branch 2 times, most recently from ec0faf9 to 6ec651a Compare June 23, 2026 09:35

Automation: Updating built files with changes.

16df6aa

fushar marked this pull request as ready for review June 23, 2026 09:40

fushar commented Jun 23, 2026

View reviewed changes

fushar mentioned this pull request Jun 23, 2026

Icons: publicize required icons for admin bar and menu WordPress/gutenberg#79451

Open

fushar mentioned this pull request Jun 24, 2026

WordPress 7.1: An omnipresent, consistent admin bar WordPress/gutenberg#79036

Open

12 tasks

t-hamano mentioned this pull request Jun 25, 2026

Icons: Add APIs for collection and icon registration WordPress/gutenberg#77260

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Admin: replace dashicons in admin bar and sidebar with @wordpress/icons#12270

Admin: replace dashicons in admin bar and sidebar with @wordpress/icons#12270
fushar wants to merge 7 commits into
WordPress:trunkfrom
fushar:admin-wp-icons

fushar commented Jun 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

fushar commented Jun 23, 2026

Uh oh!

fushar Jun 23, 2026

Uh oh!

jeffpaul commented Jun 23, 2026

Uh oh!

fushar commented Jun 24, 2026 •

edited

Loading

Uh oh!

tyxla commented Jun 24, 2026

Uh oh!

jeffpaul commented Jun 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

fushar commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New icon mapping

Admin bar

Admin menu (left sidebar)

Open questions

Screenshots

WP Admin

WP Admin - Multisite

Frontend

Mobile

Use of AI Tools

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

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

Uh oh!

Unlinked Accounts

Uh oh!

fushar commented Jun 23, 2026

Uh oh!

fushar Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

jeffpaul commented Jun 23, 2026

Uh oh!

fushar commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tyxla commented Jun 24, 2026

Uh oh!

jeffpaul commented Jun 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fushar commented Jun 23, 2026 •

edited

Loading

github-actions Bot commented Jun 23, 2026 •

edited

Loading

fushar commented Jun 24, 2026 •

edited

Loading