---
title: "WordPress 7.2 Replaces Dashicons With SVG Admin Icons"
url: https://nexterwp.com/blog/wordpress-7-2-svg-admin-icons/
date: 2026-11-09
modified: 2026-11-09
lang: en
author: "Aditya Sharma"
description: "WordPress 7.2 swaps Dashicons font glyphs for inline SVG icons in the admin bar and menu. See what breaks in color schemes and admin themes, and how to fix it."
image: https://nexterwp.com/wp-content/uploads/2026/11/wordpress-7-2-svg-admin-icons-featured-1024x538.webp
word_count: 2436
---

# WordPress 7.2 Replaces Dashicons With SVG Admin Icons

## Key Takeaways

- WordPress 7.2 replaces Dashicons font glyphs in the admin bar and sidebar menu with inline SVG icons from the @wordpress/icons package, while the $menu global, the REST API, and menu_icon values keep the same dashicons-* data.
- WordPress 7.2 changes twelve core top-level menu icons, including Dashboard, Posts, Media, Links, Pages, Comments, Appearance, Plugins, Users, Tools, Settings, and Sites in network admin.
- Admin color schemes and icon-hiding CSS need updates because ::before no longer reaches the icon; the post shows paired selectors that target both div.wp-menu-image and .ab-icon so the same code works on 7.2 and earlier versions.
- WP_Admin_Bar::add_node() now accepts an icon argument, and core admin bar nodes no longer rely on an empty in the title except for wp-logo.
- add_menu_page() and register_post_type() now accept a namespaced icon name such as core-admin/pin, while wp_is_valid_icon_name() checks only the collection/icon-name format and WP_DEBUG triggers a _doing_it_wrong() notice for unregistered names.

If you open the WordPress 7.2 beta, the first thing you may notice is that the admin menu and the admin bar look slightly different. The icons are sharper, they scale cleanly, and they are no longer a font. WordPress 7.2 replaces the Dashicons font glyphs in the admin bar and sidebar menu with inline SVG icons taken from the `@wordpress/icons` package. For most sites nothing breaks. For plugins, themes and custom admin color schemes, a few CSS and PHP habits need a small update.

This guide explains exactly what changed, which code stops working, how to fix it, and how to register your own SVG menu icons in a way that still works on older WordPress versions. Every technical detail comes from the official [SVG icons in the admin bar and menu in WordPress 7.2](https://make.wordpress.org/core/2026/11/05/svg-icons-in-the-admin-bar-and-menu-in-wordpress-7-2/) developer note, published on November 5, 2026, and the earlier announcement on [replacing Dashicons in the admin bar and menu](https://make.wordpress.org/core/2026/09/04/replacing-dashicons-in-the-admin-bar-and-menu/). Remember that 7.2 is still in beta, so details can shift before the final release.

Table of Contents

## What Changed In WordPress 7.2

Until now, every core icon in the admin sidebar and the admin bar was a Dashicons font glyph drawn by a CSS `::before` rule. That is why so much third party code colors, hides or swaps icons by targeting `::before`. In 7.2 the same icons are rendered as inline `<svg>` elements. The twelve Dashicons used by core’s top-level menu items are affected: Dashboard, Posts, Media, Links, Pages, Comments, Appearance, Plugins, Users, Tools, Settings and, in the network admin, Sites. The arrow of the Collapse Menu button changes too.

![Table comparing admin icon markup before and after WordPress 7.2](https://nexterwp.com/wp-content/uploads/2026/11/wordpress-7-2-admin-icons-before-after.webp)The admin icon change at a glance: the data stays the same, but the thing drawn on screen is now an element, not a pseudo-element.

Here is the simple way to remember it. The data did not change, the drawing did. A post type’s `menu_icon` is still `dashicons-admin-post`. The global `$menu` array and the REST API still return the same `dashicons-*` values. What changed is the markup that WordPress prints. A sidebar item such as Posts used to render a `div.wp-menu-image` with Dashicons classes and a CSS content rule. Now it renders the same wrapper with an inline SVG inside.

## Who Needs To Act

The core team’s guidance is reassuring. Registering menu pages and admin bar nodes, with or without Dashicons, works as before. You only need to update your code if you do one of these things:

- You ship an **admin color scheme** that colors icons through `::before`.
- You ship an **admin theme or white-label plugin** that hides, replaces or restyles core icons.
- You read or modify the **title of a core admin bar node** in PHP and look for the old empty icon span.
- You target a menu item through its **Dashicon class**, for example `.dashicons-admin-post`.

If none of that applies to you, you can skip ahead to the new API for registering SVG icons. Agencies that white-label the dashboard for clients should read the next sections carefully, because custom admin styling is the most common place where this kind of change shows up first.

## Fix 1: Admin Color Schemes

Every CSS rule that colors a core icon through `::before` no longer reaches the icon, because the icon is now an SVG element. To avoid a sudden visual break, WordPress applies best-effort fallbacks. In the sidebar menu, icons use the icon colors you pass to `wp_admin_css_color()`, falling back to the menu text color. In the admin bar, a stylesheet generated with SASS from core’s `_admin.scss` already colors the `.ab-icon` element, so those icons keep their colors. Anything else gets core’s default colors, which may not match your design.

The complete fix is to color the element as well as the pseudo-element. The SVG inherits its color from the element, so one extra selector is enough. Here is the pattern from the developer note:

`/* 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; }`

Notice that the “After” version keeps the old `::before` selector. That is what makes it safe on 7.1 and earlier, where the glyph is still drawn by the pseudo-element. Repeat the change for hover, focus, current and open states, and for the `.mobile` rules, because the examples only show a few selectors.

![Checklist of plugin CSS fixes for the 7.2 SVG admin icons](https://nexterwp.com/wp-content/uploads/2026/11/wordpress-7-2-admin-icons-plugin-checklist.webp)Six things to search for in your plugin or theme, with the fix for each one.

## Fix 2: Hiding Or Replacing A Core Icon

Hiding an icon with `display: none` on `::before` no longer works, because the icon is now an element. Hide the element too. The note gives these paired selectors:

`/* After (works on 7.2 and earlier versions) */
#adminmenu #menu-comments div.wp-menu-image::before,
#adminmenu #menu-comments div.wp-menu-image svg { display: none; }
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon { display: none; }
#wpadminbar #wp-admin-bar-edit > .ab-item::before,
#wpadminbar #wp-admin-bar-edit > .ab-item .ab-icon { display: none; }`

Replacing a core icon with an image is the second pattern. Old styles often put a background image on the glyph and made the glyph itself transparent. That relied on the core `content` to create the box. Now you must create the box yourself by setting `content` and a size:

`#adminmenu #menu-posts div.wp-menu-image::before {
content: "";
background: url(logo.png) center / 20px 20px no-repeat;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(logo.png) center / contain no-repeat;
}`

A third case affects six admin bar nodes: `edit`, `customize`, `site-editor`, `my-sites`, `site-name` and `my-account`. Their icon used to be drawn on `.ab-item::before`. It is now a separate `.ab-icon` element, so a `content` value set on `.ab-item::before` no longer replaces it. Your glyph is hidden and core’s icon shows instead. Set the same `content` on `.ab-item .ab-icon::before` as well to take its place.

***Also Read:** [WordPress 7.2 Guide](https://nexterwp.com/blog/wordpress-7-2/) for the rest of what is coming in this release.*

## Fix 3: Admin Bar Node Titles In PHP

This one affects code, not CSS. Core admin bar nodes used to contain an empty `<span aria-hidden="true"></span>` inside the title to draw the icon. In 7.2, those nodes no longer have the empty span. They set the icon with a new `icon` argument instead. The one exception is `wp-logo`, whose title contains the logo icon itself as an SVG.

| Node | Title before 7.2 | Title in 7.2 |
| ---- | ---------------- | ------------ |
| `new-content` | `<span aria-hidden="true"></span><span>New</span>` | `<span>New</span>` |
| `wp-logo` | Empty `ab-icon` span plus the screen reader text | `ab-icon svg-icon` span holding the `<svg>`, plus the screen reader text |

Any code that calls `$wp_admin_bar->get_node()` and searches the title for the empty span will stop finding it. If you rebuild a core node’s title with string replacement, test it on the beta now.

## Fix 4: Search, Site Icon, Collapse Button And Dashicon Classes

Three smaller icons also moved from pseudo-elements to elements: the front end search icon, the default My Sites site icon and the Collapse Menu arrow. Style the new element next to the old selector:

`#wpadminbar #adminbarsearch::before,
#wpadminbar #adminbarsearch .ab-icon { color: red; }
#wpadminbar .quicklinks li div.blavatar::before,
#wpadminbar .quicklinks li div.blavatar svg { color: red; }
#collapse-button .collapse-button-icon::after,
#collapse-button .collapse-button-icon svg { color: red; }`

Finally, selectors that target a menu item through its Dashicon class, such as `#adminmenu .dashicons-admin-post`, need a different anchor. Use the item’s id or its `menu-icon-*` class, for example `.menu-icon-post`. There is one behavior difference to keep in mind. The old Dashicon class matched every menu item that used that Dashicon, while an id or a `menu-icon-*` class matches only one item.

## What Keeps Working

The core team kept the most common customizations alive on purpose. This is the compatibility list from the developer note, grouped by area:

- **Menu data.** The `$menu` global, the REST API and `get_post_type_object( 'post' )->menu_icon` keep the same `dashicons-*` values.
- **Plugin menu icons.** If a plugin passes a Dashicon that has a matching `core-admin` SVG icon, the SVG is rendered instead. That includes post types with no `menu_icon`, which default to `dashicons-admin-post`.
- **Other icon types.** Any other Dashicon, an image URL, a base64 SVG or the `none` value renders exactly as before.
- **Pseudo-element overrides.** A `::before` with `content` on `div.wp-menu-image` still replaces the icon, and the SVG is not shown. On core admin bar nodes, a `::before` with `content` on `.ab-icon` still replaces the icon.
- **Third party admin bar nodes.** They render exactly as before.

## The New API: Register SVG Icons For Your Own Menus

The more interesting change for developers is that you can now use SVG icons for your own sidebar items and admin bar nodes by passing the name of a registered icon. Use an icon from core’s `core-admin` collection. Once an icon is added to that collection, its name will not change and it will not be removed. You can browse the collection in the [icon library on Storybook](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).

One rule matters here: do not use the `core` collection for admin icons. It is meant for the front end, content and the Icon block, and some plugins or themes might unregister `core` icons. If you need something else, register your own collection with `wp_register_icon_collection()` and `wp_register_icon()` and use it the same way.

### Icon Names As Menu Icons

`add_menu_page()` and the `menu_icon` argument of `register_post_type()` now accept a namespaced icon name, in addition to the Dashicon, URL, base64 SVG and `none` values:

`add_menu_page(
__( 'Notes', 'my-plugin' ),
__( 'Notes', 'my-plugin' ),
'manage_options',
'my-plugin-notes',
'my_plugin_render_notes',
'core-admin/pin' // Now allowed: a registered icon name.
);`

### The Icon Argument For Admin Bar Nodes

`WP_Admin_Bar::add_node()` now accepts an `icon` argument. The icon renders before the title:

`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
);`

In both cases, a name that is not registered renders no icon. With `WP_DEBUG` enabled it also triggers a `_doing_it_wrong()` notice. A new helper, `wp_is_valid_icon_name()`, returns whether a value has the form `collection/icon-name`. It only checks the format, not whether the icon is registered.

## Supporting WordPress 7.1 And Earlier

Most plugins support more than one WordPress version, so the compatibility advice is the most practical part of the note. The right approach depends on whether your Dashicon already has an official replacement. You can check the mapping in the `'dashicons'` key of the [icon library manifest](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/assets/icon-library-manifest.php).

![Matrix for supporting WordPress 7.2 and older versions with core-admin icons](https://nexterwp.com/wp-content/uploads/2026/11/wordpress-7-2-admin-icons-version-support.webp)Which approach to use, depending on whether your icon has a core-admin match.

### If There Is No Official Replacement, Or You Want Your Own SVG

Pass the icon name explicitly. Older versions do not understand icon names in `add_menu_page()` or `register_post_type()`, so gate the value with `function_exists( 'wp_is_valid_icon_name' )`. Admin bar nodes are easier: the new `icon` argument is ignored in earlier versions, and an empty span in the title is hidden in 7.2, so you can pass both the old Dashicon and the new icon:

`add_menu_page(
...,
function_exists( 'wp_is_valid_icon_name' ) ? 'core-admin/receipt' : 'dashicons-text'
);
$wp_admin_bar->add_node(
array(
...
'title' => '<span aria-hidden="true"></span> My Node',
'icon' => 'core-admin/receipt',
)
);`

### If There Is An Official Replacement In 7.2

Admin menu icons are replaced automatically with the SVG version in 7.2. For admin bar nodes, you still pass the mapped icon name yourself, next to the old span:

`add_menu_page( ..., 'dashicons-cart' );
$wp_admin_bar->add_node(
array(
...
'title' => '<span aria-hidden="true"></span> My Node',
'icon' => 'core-admin/cart',
)
);`

### If A Replacement Arrives After 7.2

WordPress may add more icons to `core-admin` later. To use a newer one without breaking older sites, check the registry first. The note’s example walks from the newest candidate to the oldest, then falls back to the Dashicon:

`$icon = 'dashicons-text'; // for < 7.2
if ( function_exists( 'wp_is_valid_icon_name' ) ) {
$registry = WP_Icons_Registry::get_instance();
if ( $registry->is_registered( 'core-admin/invoice' ) ) {
$icon = 'core-admin/invoice'; // newer than 7.2, as an example
} elseif ( $registry->is_registered( 'core-admin/receipt' ) ) {
$icon = 'core-admin/receipt'; // 7.2
}
}
add_menu_page( ..., $icon );`

## A Practical Test Plan For Plugin And Theme Authors

- **Install the 7.2 beta on a staging site** and open the dashboard, the post editor and the front end with the admin bar showing.
- **Search your code** for `wp-menu-image`, `ab-icon`, `.ab-item::before`, `dashicons-admin-` and `adminbarsearch`.
- **Check every admin color scheme** you ship, in normal, hover, focus, current and open states, and on a narrow screen to cover the mobile rules.
- **Test icon overrides** that hide or replace a core icon, in both the sidebar and the admin bar.
- **Test PHP that edits admin bar node titles** and confirm it does not rely on the empty span.
- **Run with `WP_DEBUG` on** to catch an unregistered icon name through the `_doing_it_wrong()` notice.
- **Re-test on the oldest WordPress version you support** to confirm the paired selectors and version gates behave.

Because the paired selectors in this guide keep the old rule beside the new one, a single stylesheet can serve both generations of WordPress. That is the main reason the core team phrased every fix as “works on 7.2 and earlier versions”.

## Why This Change Matters

Inline SVG icons scale cleanly at any size and zoom level, inherit color from the surrounding text, and avoid loading an icon font just to draw a few glyphs. They also fit the direction of the wider editor tooling, where the same icon package is used across the block editor. This is a plumbing change more than a visual redesign, which is why the compatibility layer is so generous. Still, anything that reaches into the admin with CSS is exactly the kind of code that depends on markup details, and markup details are what changed.

If your plugin adds its own dashboard styling, now is also a good moment to check how it behaves with other changes arriving in 7.2. Our [WordPress 7.2 guide](https://nexterwp.com/blog/wordpress-7-2/) covers the release as a whole, and the [random post URL guide](https://nexterwp.com/blog/wordpress-7-2-random-post-url/) covers another developer-facing change from the same beta.

## What This Doesn’t Cover

This guide does not include screenshots of the 7.2 beta admin, because the images here are reference tables built from the developer note, not captures of a running site. It does not test third party color schemes or admin themes, and it does not list every icon in the `core-admin` collection, which can grow before release. For the final list, use the Storybook icon library and the manifest file linked above.

#### Suggested Reading

- [WordPress 7.2 Guide](https://nexterwp.com/blog/wordpress-7-2/)
- [WordPress 7.2 Random Post URL Explained](https://nexterwp.com/blog/wordpress-7-2-random-post-url/)
- [Block Themes vs Classic Themes](https://nexterwp.com/blog/wordpress-fse-block-themes-vs-classic-themes/)
- [How To Fix WordPress Block Patterns](https://nexterwp.com/blog/how-to-fix-wordpress-block-patterns/)

#### Stay updated with Helpful WordPress Tips, Insider Insights, and Exclusive Updates – Subscribe now to keep up with Everything Happening on WordPress!

Subscribe

## Frequently Asked Questions

**Q: How do I use Dashicons in WordPress now that WordPress 7.2 switched to SVG icons?**
A: Dashicons still work as the icon value in WordPress, but WordPress 7.2 renders core admin icons as inline SVG instead of a font glyph. That means the old dashicons-* values still exist in $menu, the REST API, and register_post_type(), but the markup on screen changed. For custom menus, the new path is to use a registered icon name like core-admin/pin when you want SVG output. The practical gotcha is CSS that targeted ::before, because that no longer reaches the icon itself.

**Q: Why did my admin color scheme stop coloring WordPress admin icons after the 7.2 beta?**
A: The usual break is CSS that only colors ::before. In WordPress 7.2, core menu and admin bar icons are SVG elements, so the color has to hit the element too. The safe pattern is to keep the old selector and add the new one beside it, like targeting both div.wp-menu-image and div.wp-menu-image::before. That keeps one stylesheet working on 7.2 and earlier, which matters if you support older sites or ship a white-label dashboard.

**Q: What breaks if I hide or replace a core Dashicon with CSS in WordPress 7.2?**
A: Anything that only hides ::before stops working, because the icon is no longer just a pseudo-element. The fix is to hide both the old pseudo-element and the new SVG element. The same idea applies when replacing an icon with an image: you now need to create the box yourself with content and sizing, instead of relying on the font glyph box. This is most important for sidebar items and admin bar nodes that were styled by icon shape alone.

**Q: How do I update admin bar node titles in PHP for WordPress 7.2?**
A: Code that searches an admin bar node title for an empty  will fail on 7.2, because core moved those icons to a separate icon argument instead of embedding them in the title string. The notable exception is wp-logo, which still carries its logo icon differently from other nodes. If your plugin rebuilds titles with string replacement, that logic needs a version-aware check or it will miss nodes like new-content and site-name.

**Q: What is the best way to support both WordPress 7.1 and 7.2 with custom menu icons?**
A: The safest pattern is to keep the old Dashicon fallback and add the new icon name only when WordPress understands it. For menu pages and post types, gate namespaced icons with function_exists( 'wp_is_valid_icon_name' ). For admin bar nodes, pass both: an old dashicon in the title markup for older versions and a new icon value in the icon argument for 7.2. That avoids breaking older installs while still getting SVG output where it exists.

**Q: Can I register my own SVG icon for a WordPress admin menu item?**
A: WordPress 7.2 adds support for registered icon names on add_menu_page() and register_post_type(), so custom menus can use SVG icons from a collection instead of only Dashicons or image URLs. Core’s own collection is called core-admin, and once an icon is added there its name will not change or be removed. If you need your own set, register a collection with wp_register_icon_collection() and wp_register_icon().