Back to Top

Magento 2 : Change default icon in menu for custom module.

Updated 16 July 2021

By default, Magento 2 adds custom icon(“hexagonal icon“) when you add a custom menu to a custom module.


But to make more visibility and attractive everyone wants to add module icon along with custom menu like all the core Magento 2 menus. Then one question arises,

“How to change default icon in the main menu of the module ?”

So this article will demonstrate how to change default icon in the main menu.

Hence these steps will help you to change icon,

Searching for an experienced
Magento Company ?
Find out More

Step 1:

First of all create font icon of your .svg icon with help of,

Step 2:

Paste all font files(obtained by inside below path,


Step 3:

First of all create less file inside below path,


Step 4:

Now place below code inside “_module.less” file,

@webkulmodulename-icons-admin__font-name-path: '@{baseDir}Webkul_ModuleName/fonts/modulename';
@webkulmodulename-icons-admin__font-name : 'ModuleName';
  @font-path: @webkulmodulename-icons-admin__font-name-path,
  @font-weight: normal,
  @font-style: normal
.admin__menu .item-menuid.parent.level-0 > a:before {
  font-family: @webkulmodulename-icons-admin__font-name;
  content: "\0041";

Basically, there have three parts of “_module.less” code,

@webkulmodulename-icons-admin__font-name-path: '@{baseDir}Webkul_ModuleName/fonts/modulename'; @webkulmodulename-icons-admin__font-name : 'ModuleName';
  • webkulmodulename is the module name.
  • Webkul_ModuleName is module directory.
.lib-font-face(   @family-name:@webkulmodulename-icons-admin__font-name,   @font-path: @webkulmodulename-icons-admin__font-name-path,   @font-weight: normal,   @font-style: normal );
  • You can modify modify the style of font inside this code.
  • webkulmodulename is the module name.
.admin__menu .item-menuid.parent.level-0 > a:before {   font-family: @webkulmodulename-icons-admin__font-name;   content: "\0041"; }
  • item-menuid :  here menuid is coming from “app/code/Webkul/ModuleName/etc/adminhtml/menu.xml
<menu> <add id="Webkul_ModuleName::menuid" title="Custom Module" module="Webkul_ModuleName" sortOrder="10" resource="Webkul_ModuleName::moduleid"/> <add id="Webkul_ModuleName::childmenuid" title="Menu" module="Webkul_ModuleName" sortOrder="1" parent="Webkul_ModuleName::moduleid" resource="Webkul_ModuleName::menuid"/> </menu>

Step 5:

Now next question is which directories need to clear?
As per Magento 2 guidelines,

If there have new/any changes inside less/template files hence we need to clear “var/view_preprocessed“. All prepossessed files are listed here.

We also need to clear all backend public files.

So it  takes following commands to deploy these changes,

rm -rf var/view_preprocessed/*
rm -rf pub/static/adminhtml/*
php bin/magento setup:static-content:deploy

So run these commands on your Magento server (make sure you run these commands from the user who have ownership of magento directory)

Once you have successfully run these commands then as a result changes will be reflected at Magento.


Now last but not the least, Refresh the page admin, Finally you can see the default icon is successfully changed.

Even more you can also check less file of your custom module inside magento publish directory.

We would love the hear your thoughts, suggestions, and questions in the comments below !!

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


  • Santi
  • use this link
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content