How to Change Default Custom Extension Menu Icon in Magento 2 Admin

Dhiren Vasoya

6 years ago

Magento Custom Development is all about customizing the Magento the way you love that allows us to reduce repetitive tasks or add functionality to its core that helps save time and efforts by serving excellent shopping experience to your shoppers. Whether it is frontend or backend, Magento supports seamless customization & integrations to fulfill every business needs. Magento backend is one of the powerful panels that allows you to have full control over all the stuff whether it’s visual or functional. But several times while custom development, the company or developers want to put their own logo in the menu of custom module or extension as part of marketing that helps them to represent their business identity.
Till date, if you have used any of our Magento 2 Extensions or another brand Extension inside your Magento 2 store, you have definitely seen that tiny logo at the top of Magento 2 menu. So, if you are a developer and wants to add your own custom logo at the top of Magento 2 menu here is the quick guide to change Default Custom Extension Menu Icon in Magento 2 Admin.
To add an icon to our Magento 2 menu, first we need to create the “menu.xml” file at below path.
app\code\Vendor\Extension\etc\menu.xml

<pre class="lang:default decode:true">
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Vendor_Extension::menu_id"
             title="Menu Title"
             module="Vendor_Extension"
             sortOrder="10"
             resource="Vendor_Extension::menu_id"/>
    </menu>
</config>
</pre>

Now we need to create “adminhtml.css” file to set our custom style and link for icon and replace “icon.png” link with your icon URL.
app\code\Vendor\Extension\view\adminhtml\web\css\adminhtml.css

<pre class="lang:default decode:true">
.admin__menu .level-0.item-menu_id > a:before {
    content: url('../images/icon.png');
}
li#menu-vendor_extension-menu_id > a > span {
    display: none;
}
</pre>

In last step, we have to link our CSS file by creating “default.xml” file at following path.
app\code\Vendor\Extension\view\adminhtml\layout\default.xml

<pre class="lang:default decode:true">
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Extension::css/adminhtml.css"/>
    </head>
</page>
</pre>

That’s it. Simply clear cache and you are done with adding your custom icon at the top of Magento 2 menu.

That’s it for today, Let us know if you are facing an issue while implementing using this code by commenting below.

Happy Coding!