0

I want to add my company logo to my custom module configuration tab in admin.

Here is code of tab:

<tab id="mytab" translate="label" sortOrder="110">
    <label>My Label Here</label>
</tab>
1

You can set your logo url to tab label like this:

<tab id="mytab" translate="label" sortOrder="110">
    <label><![CDATA[<img src="http://logos-download.com/wp-content/uploads/2016/09/Magento_logo.png" width="100px"/>]]></label>
</tab>

Output:

enter image description here

2
  • How can I give the local media URL?
    – Butterfly
    Dec 31 '18 at 7:07
  • This doesn't work in Magento 2.3.3 onwards
    – MagePsycho
    Oct 27 '19 at 7:46
1

Alternatively add the image via css.

system.xml:

<tab id="mytab" translate="label" sortOrder="1000">
        <label>My Label Here</label>
        <class>my-tab</class>
 </tab>

your adminhtml.css

.config-nav .my-tab .admin__page-nav-title::before {
    content: '';
    background-image: url("../images/your_logo.png");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 0 0;
    height: 30px;
    position: absolute;
    width: 30px;
    top: 11px;
}

.config-nav .my-tab .admin__page-nav-title strong {
    margin-left: 40px;
}
2
  • How i can add this css in adminhtml by custom Module? Sep 1 '20 at 6:21
  • In Magento 2.4.1, you need to specify the class attribute in the tab node, like: <tab id="mytab" translate="label" sortOrder="1000" class="my-tab"><label>My Label Here.net</label></tab>
    – Ferrmolina
    Oct 19 '20 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.