Replacing Icons in the Dashboard

by

Yes, you can replace existing icons by overwriting them via CSS.

Make sure to check if the existing icon is set via img or background-image and add some CSS to overwrite it with one of the available icons. You can find all available icons and the appropriate selector at the Dashicons Website.

To replace the icon of the Yoast SEO Plugin you can add this snippet to your functions.php:

<?php
add_action( 'admin_head', 'replace_yoast_admin_menu_icon' );
function replace_yoast_admin_menu_icon() {
?>

<style type="text/css">
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image img {
  display: none;
}
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image:before {
  content: '\f108';
}
</style>

<?php } ?>

Further Reading: There is also a nice in depth tutorial from Shea Bunge about Replacing WordPress Admin Menu Icons.

UPDATE: There will be a white icon in the future 🙂

UPDATE 2: Implemented with v1.6.1

Leave a Comment