Read More
Read More
Menu Close

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

    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 ?
    Read 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 !!

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


  • Santi
    Great tutorial, had found others that didn’t work properly

    Thanks for sharing your knowledge!

  • use this link
    Hello There. I found your blog using msn. This is a really well written article. I will make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll certainly return.

  • Back to Top

    Table of Content