How to Configure a Custom Icon in the Magento 2 Backend Programmatically?

There are 2 options for how you can change the default luma icons in the Magento 2 admin panel:

  • By using the background;
  • By using the icon font.

Let’s consider how to do the Magento 2 change of favicon closely.

Changing icons using the background

This way is more flexible because you can use any picture that your designer has made. So you don’t need to create, upload, and add icon fonts.

To use this method, you will need 2 images: for the icon and the icon hover. You need to convert the png icon for Magento 2 to the base64 format via an online converter, for example,

Next, you need to enter this style in LESS or CSS file:

#menu-menuamasty-base-menu > a:before {
 content: '';
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA
Eg3VjE3WiIgZmlsbD0iIzU3NTc1NyIvPjwvc3ZnPg==) no-repeat center;
background-size: contain;
#menu-menuamasty-base-menu > a:hover:before,
#menu-menuamasty-base-menu._show > a:before {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAg
ggZD0iTTcgMTdIMFYyNEg3VjE3WiIgZmlsbD0iIzU3NTc1NyIvPjwvc3ZnPg==) no-repeat center;
background-size: contain;

Changing icons using the fonts in Magento 2

The 2nd way you can change icons is by creating an magento 2 icon font. This option is less convenient, and we don’t recommend using it because you will need to generate fonts on a third-party website and enable a new font. But if you are still sure you need to use the custom icon font, you will find a step-by-step guide on how to do it below.

Step 1. First of all, you need to generate the font icon. For this, you can use an online app like

Step 2. When you have created a new font, extract the files, and put them into the Amasty/Icon/view/adminhtml/web/fonts folder.

Step 3. Go to app/code/Amasty/Icon/view/adminhtml/web/css/source/ and create LESS files. Copy the code form the style.css file in the font folder and enter it in the _module.less file.


@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ly34e0');
src: url('fonts/icomoon.eot?ly34e0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ly34e0') format('truetype'),
url('fonts/icomoon.woff?ly34e0') format('woff'),
url('fonts/icomoon.svg?ly34e0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;


@font-face {
 font-family: 'amasty-icon';
src: url('../../fonts/icomoon.eot?ly34e0');
src: url('../../fonts/icomoon.eot?ly34e0#iefix') format('embedded-opentype'),
url('../../fonts/icomoon.ttf?ly34e0') format('truetype'),
url('../../fonts/icomoon.woff?ly34e0') format('woff'),
url('../../fonts/icomoon.svg?ly34e0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
.admin__menu .item-amastyicon.level-0 > a:before {
font-family: 'amasty-icon';
content: '\e900';

Don’t forget to change all the font and content URLs. They should have the right path.

item-amastyicon is coming from the app/code/Amasty/Icon/etc/adminhtml/menu.xml file:

<?xml version="1.0"?>
<config xmlns:xsi=""
<add id="Amasty_Icon::amastyicon"

To get the code of the element that you want to change, open the ChromeDevTools and find the needed selector: ‘.admin__menu .item-amastyicon.level-0 > a:before’.

Step 4. Run the following commands to change the icon:

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

Step 5. Log in to your admin panel and check the result.

By using these 2 ways, you can change any icons in Magento 2 backend. And to speed up your admins’ workflow, check out our Extended Product Grid with Editor and Extended Order Grid extensions. Both of them allow you to add custom columns and remove the unnecessary, change their order with the drag-and-drop, save a custom view of the grid for quick access and limit the access rights for separate admin users.

How can we help you?

Didn’t you find the answer to your question? We are always happy to help you out.