Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fushar wants to merge 7 commits into
base: trunk
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d9dc326
Icons API: Add wp_get_icon() to render registered icons as inline SVG.
t-hamano May 29, 2026
54df3d4
Tests: Fix inaccurate docblock referencing nonexistent the_wp_icon().
t-hamano May 29, 2026
7bc1bd8
Merge branch 'trunk' into 64847-wp-icon-function
t-hamano Jun 11, 2026
961087d
Merge branch 'trunk' into 64847-wp-icon-function
t-hamano Jun 11, 2026
96bdbe3
Icons: Sync wp_get_icon() with Gutenberg PR 78332.
t-hamano Jun 18, 2026
6ec651a
Admin: replace dashicons in admin bar and sidebar with @wordpress/icons
fushar Jun 23, 2026
16df6aa
Automation: Updating built files with changes.
Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 59 additions & 29 deletions src/wp-admin/css/admin-menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,31 +288,55 @@
background-size: 20px auto;
}

#adminmenu div.wp-menu-image.svg-icon {
display: flex;
align-items: center;
justify-content: center;
}

#adminmenu div.wp-menu-image.svg-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
transition: color .1s ease-in-out;
}

div.wp-menu-image:before {
color: #a7aaad;
color: rgba(240, 246, 252, 0.6);
padding: 7px 0;
transition: all .1s ease-in-out;
}

#adminmenu div.wp-menu-image:before {
#adminmenu div.wp-menu-image:before,
#adminmenu div.wp-menu-image.svg-icon svg {
color: #a7aaad;
color: rgba(240, 246, 252, 0.6);
}

#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
#adminmenu .wp-has-current-submenu div.wp-menu-image.svg-icon svg,
#adminmenu .current div.wp-menu-image:before,
#adminmenu .current div.wp-menu-image.svg-icon svg,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg {
color: #fff;
}

#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li:hover div.wp-menu-image.svg-icon svg,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before {
#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.opensub div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
color: #72aee6;
}

Expand All @@ -323,6 +347,10 @@ div.wp-menu-image:before {
z-index: 25;
}

.folded #adminmenu div.wp-menu-image.svg-icon {
height: 34px;
}

.folded #adminmenu a.menu-top {
height: 34px;
}
Expand Down Expand Up @@ -493,6 +521,9 @@ ul#adminmenu > li.current > a.current:after {
#collapse-button .collapse-button-icon {
width: 36px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}

#collapse-button .collapse-button-label {
Expand All @@ -503,29 +534,25 @@ ul#adminmenu > li.current > a.current:after {
display: none;
}

#collapse-button .collapse-button-icon:after {
content: "\f148";
content: "\f148" / '';
display: block;
#collapse-button .collapse-button-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
position: relative;
top: 7px;
text-align: center;
font: normal 20px/1 dashicons !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: -1px;
}

/* rtl:ignore */
.folded #collapse-button .collapse-button-icon:after,
.rtl #collapse-button .collapse-button-icon:after {
.folded #collapse-button .collapse-button-icon svg,
.rtl #collapse-button .collapse-button-icon svg {
transform: rotate(180deg);
}

.rtl.folded #collapse-button .collapse-button-icon:after {
.rtl.folded #collapse-button .collapse-button-icon svg {
transform: none;
}

#collapse-button .collapse-button-icon:after,
#collapse-button .collapse-button-icon svg,
#collapse-button .collapse-button-label {
transition: all .1s ease-in-out;
}
Expand Down Expand Up @@ -609,6 +636,10 @@ li#wp-admin-bar-menu-toggle {
z-index: 25;
}

.auto-fold #adminmenu div.wp-menu-image.svg-icon {
height: 34px;
}

.auto-fold #adminmenu a.menu-top {
min-height: 34px;
}
Expand Down Expand Up @@ -650,11 +681,11 @@ li#wp-admin-bar-menu-toggle {
}

/* rtl:ignore */
.auto-fold #collapse-button .collapse-button-icon:after {
.auto-fold #collapse-button .collapse-button-icon svg {
transform: rotate(180deg);
}

.rtl.auto-fold #collapse-button .collapse-button-icon:after {
.rtl.auto-fold #collapse-button .collapse-button-icon svg {
transform: none;
}

Expand Down Expand Up @@ -814,26 +845,25 @@ li#wp-admin-bar-menu-toggle {
border: 1px solid transparent;
}

#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
content: "\f228";
display: inline-block;
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
display: flex;
align-items: center;
justify-content: center;
float: left;
font: normal 40px/45px dashicons;
vertical-align: middle;
outline: none;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 44px;
width: 50px;
padding: 0;
border: none;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon svg {
width: 36px;
height: 36px;
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
color: #72aee6;
}
}
Expand Down
24 changes: 21 additions & 3 deletions src/wp-admin/css/colors/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,8 @@ input[type="radio"]:focus {
color: variables.$menu-text;
}

#adminmenu div.wp-menu-image:before {
#adminmenu div.wp-menu-image:before,
#adminmenu div.wp-menu-image.svg-icon svg {
color: variables.$menu-icon;
}

Expand All @@ -272,7 +273,9 @@ input[type="radio"]:focus {
}

#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
#adminmenu li.menu-top:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image.svg-icon svg {
color: variables.$menu-highlight-icon;
}

Expand Down Expand Up @@ -343,13 +346,21 @@ ul#adminmenu > li.current > a.current:after {
}

#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu div.wp-menu-image.svg-icon svg,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.current div.wp-menu-image:before,
#adminmenu li.current div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg,
#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li:hover div.wp-menu-image.svg-icon svg,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before {
#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.opensub div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
color: variables.$menu-current-icon;
}

Expand Down Expand Up @@ -419,6 +430,7 @@ ul#adminmenu > li.current > a.current:after {
color: variables.$menu-submenu-focus-text;
}

#wpadminbar:not(.mobile) li:hover .ab-icon,
#wpadminbar:not(.mobile) li:hover .ab-icon:before,
#wpadminbar:not(.mobile) li:hover .ab-item:before,
#wpadminbar:not(.mobile) li:hover .ab-item:after,
Expand Down Expand Up @@ -459,11 +471,15 @@ ul#adminmenu > li.current > a.current:after {
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar li:hover .ab-icon,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
#wpadminbar li a:focus .ab-icon,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li .ab-item:focus:before,
#wpadminbar li .ab-item:focus .ab-icon,
#wpadminbar li .ab-item:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before,
Expand All @@ -475,11 +491,13 @@ ul#adminmenu > li.current > a.current:after {
#wpadminbar .quicklinks li a:focus .blavatar,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
#wpadminbar .menupop .menupop > .ab-item:hover:before,
#wpadminbar.mobile .quicklinks .hover .ab-icon,
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: variables.$menu-submenu-focus-text;
}

#wpadminbar.mobile .quicklinks .ab-icon,
#wpadminbar.mobile .quicklinks .ab-icon:before,
#wpadminbar.mobile .quicklinks .ab-item:before {
color: variables.$menu-icon;
Expand Down
3 changes: 2 additions & 1 deletion src/wp-admin/includes/options.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function options_general_add_js() {
<script>
jQuery( function($) {
var $siteName = $( '#wp-admin-bar-site-name' ).children( 'a' ).first(),
$siteNameIcon = $siteName.children( '.ab-icon' ),
$siteIconPreview = $('#site-icon-preview-site-title'),
homeURL = ( <?php echo wp_json_encode( get_home_url(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );

Expand All @@ -47,7 +48,7 @@ function options_general_add_js() {
title = title.substring( 0, 40 ) + '\u2026';
}

$siteName.text( title );
$siteName.text( title ).prepend( $siteNameIcon );
$siteIconPreview.text( title );
});

Expand Down
10 changes: 9 additions & 1 deletion src/wp-admin/menu-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,14 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
// 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/' ) ) {

@fushar fushar Jun 23, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

$icon = wp_get_icon( $item[6], array( 'size' => 22 ) );
if ( '' !== $icon ) {
$img = $icon;
$img_class = ' svg-icon';
} else {
$img = '<br />';
}
} elseif ( str_starts_with( $item[6], 'dashicons-' ) ) {
$img = '<br />';
$img_class = ' dashicons-before ' . sanitize_html_class( $item[6] );
Expand Down Expand Up @@ -283,7 +291,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {

echo '<li id="collapse-menu" class="hide-if-no-js">' .
'<button type="button" id="collapse-button" aria-label="' . esc_attr__( 'Collapse Main Menu' ) . '" aria-expanded="true">' .
'<span class="collapse-button-icon" aria-hidden="true"></span>' .
'<span class="collapse-button-icon" aria-hidden="true">' . wp_get_icon( 'core/chevron-left', array( 'size' => 22 ) ) . '</span>' .
'<span class="collapse-button-label">' . __( 'Collapse Menu' ) . '</span>' .
'</button></li>';
}
Expand Down
Loading
Loading