WordPress 7.2 removes the Dashicons font from the admin menu and admin bar. The icons become inline SVGs from @wordpress/icons, as described in the November 5 dev note.
Most plugins will not be affected. Custom admin color schemes, admin themes, and any CSS that styled, hid or replaced a core icon through ::before will be. After the update, those icons show the wrong color, or reappear after you hid them.
As of 2026-11-06, 7.2 is still in beta. Beta 4 came out on November 3, and the final release is scheduled for December 8, 2026. You have about a month to fix your CSS.
See what changed in the menu markup
Before 7.2, a menu icon was an empty div with a Dashicon class, and a pseudo-element drew the glyph:
<div class='wp-menu-image dashicons-before dashicons-admin-post' aria-hidden='true'><br /></div>
.dashicons-admin-post::before { content: "\f109"; }In 7.2, the same div contains an SVG and carries an svg-icon class:
<div class='wp-menu-image dashicons-before svg-icon' aria-hidden='true'><svg ...>...</svg></div>The SVG is drawn in currentColor, so it takes its color from div.wp-menu-image. A color set only on ::before now colors an empty pseudo-element.
All twelve core top-level items switch to SVG: Dashboard, Posts, Media, Links, Pages, Comments, Appearance, Plugins, Users, Tools, Settings, and Sites in network admin. So does the Collapse Menu arrow, along with several admin bar icons, including edit, customize, site-name, my-account, new-content, comments and updates.
Step 1. Find the CSS that will break
Search your plugin, theme or color scheme for pseudo-element rules on the icon containers:
grep -rnE "wp-menu-image::?before|ab-item::?before|ab-icon::?before|collapse-button-icon::?after|blavatar::?before" wp-content/plugins/my-pluginReview every line it prints. If it prints nothing, your code does not style core icons this way.
Step 2. Color the element, not only the pseudo-element
The dev note gives this fix for color schemes. Keep the ::before selector for older versions and add the element itself next to it:
/* Before */
#adminmenu div.wp-menu-image::before { color: #c3c4c7; }
#wpadminbar li:hover .ab-icon::before { color: #72aee6; }
#wpadminbar #wp-admin-bar-site-name > .ab-item::before { color: #c3c4c7; }
/* After (works on 7.2 and earlier versions) */
#adminmenu div.wp-menu-image,
#adminmenu div.wp-menu-image::before { color: #c3c4c7; }
#wpadminbar li:hover .ab-icon,
#wpadminbar li:hover .ab-icon::before { color: #72aee6; }
#wpadminbar #wp-admin-bar-site-name > .ab-item .ab-icon,
#wpadminbar #wp-admin-bar-site-name > .ab-item::before { color: #c3c4c7; }If you register your scheme with wp_admin_css_color(), core already colors the sidebar SVGs with the colors you passed, and falls back to the menu text color. You only need rules like the ones above for selectors you wrote yourself, such as hover and current states.
Step 3. Hide or replace a core icon the new way
Hiding the glyph through ::before no longer hides anything. Hide the SVG instead:
#adminmenu #menu-comments div.wp-menu-image svg { display: none; }Swapping in your own image still works through the pseudo-element on div.wp-menu-image, because a ::before with content still replaces the icon there. Set the content and the size yourself:
#adminmenu #menu-comments div.wp-menu-image::before {
content: "";
background: url(logo.png) center / 20px 20px no-repeat;
}For the search icon, the default site icon in My Sites, and the Collapse Menu button, target .ab-icon, div.blavatar svg and .collapse-button-icon svg instead of their pseudo-elements.
Step 4. Target menu items by id, not by Dashicon class
Selectors like .dashicons-admin-post::before stop matching once the class is gone. They were fragile anyway, since they matched every menu item that used that icon. Use the item id or its menu-icon-* class:
#adminmenu .menu-icon-post div.wp-menu-image,
#adminmenu .menu-icon-post div.wp-menu-image::before { color: #72aee6; }If your admin CSS lives in a snippet instead of a plugin file, my guide to adding custom CSS covers the ways to load it.
Use the new core-admin icons in your own plugin
You do not need to change how you register menus. add_menu_page() still accepts dashicons-*, an image URL, a base64 SVG or none, and all of them render as before. If your Dashicon has a matching SVG in core, 7.2 uses that SVG automatically.
To choose an SVG yourself, pass a namespaced icon name such as core-admin/pin. 7.2 accepts these in add_menu_page() and in the menu_icon argument of register_post_type(). For older versions, check for the new helper function first:
add_menu_page(
__( 'Receipts', 'my-plugin' ),
__( 'Receipts', 'my-plugin' ),
'manage_options',
'my-plugin-receipts',
'my_plugin_render_receipts',
function_exists( 'wp_is_valid_icon_name' ) ? 'core-admin/receipt' : 'dashicons-text'
);Admin bar nodes get a new icon argument, which renders before the title. Here is the example from the dev note:
add_action(
'admin_bar_menu',
function ( WP_Admin_Bar $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'my-plugin-notes',
'icon' => 'core-admin/pin',
'title' => __( 'Notes', 'my-plugin' ),
'href' => admin_url( 'admin.php?page=my-plugin-notes' ),
)
);
},
100
);To support older versions too, also keep the old empty span in the title, for example <span class="ab-icon dashicons-text" aria-hidden="true"></span> My Node. 7.2 hides that span, and older versions draw the Dashicon from it.
💡 wp_is_valid_icon_name() only checks that a name has the collection/icon-name format, not that the icon exists. A name that is not registered renders no icon at all; with WP_DEBUG on, you also get a _doing_it_wrong() notice. Use the core-admin collection for admin icons, because core is meant for front-end content and blocks.
What you can leave alone
Menu data stays the same. get_post_type_object( 'post' )->menu_icon still returns dashicons-admin-post, and the $menu global and the REST API still contain the dashicons-* values. Code that reads them keeps working.
Admin bar nodes added by plugins render as before. What does break is code that searches the titles of core nodes such as new-content for the empty <span class="ab-icon">, because that span no longer exists.
Test all of this on a staging copy running the 7.2 beta before December 8. While you are there, check the other 7.2 changes, such as the new /random/ redirect and the removal of load-scripts.php.
TL;DR: In WordPress 7.2, admin menu and admin bar icons are SVGs inside the old containers instead of ::before glyphs. Color div.wp-menu-image and .ab-icon along with their pseudo-elements, hide the svg when you want an icon gone, and target menu items by id. If you want the new icons, use core-admin/* names behind a function_exists( 'wp_is_valid_icon_name' ) check.
