How do I change the mini cart icon to my own SVG in the theme header? I guess CSS isn't the best practice so thinking of other options.

is it this one in view.xml?

        <image id="mini_cart_product_thumbnail" type="thumbnail">

2 Answers 2


You can set icon of minicart by css. Here i do paste code of one of my project.

.minicart {
    background: url(../images/minicart.png) no-repeat 0 0;

so your minicart image must be under below path.


And you need to include css for the same theme as below.


Below code is just to set product thumbnail image height and width in minicart popup

<image id="mini_cart_product_thumbnail" type="thumbnail">



::First let me clear that you can't edit magento core themes directly from /app/design/magento!!!::

::If you want to change it your self then, you've to create your own one and make changes as required!!::

::Now let's go to the point!::

::first => Create custom.css file at /app/design/vendor/theme/Magento_Theme/web/css/::

::second => create default.xml file at /app/design/vendor/theme/Magento_Theme/layout/::

::Now put the file contents like below::



.minicart-wrapper .action.showcart:before{





    <css src="Magento_Theme::css/custom.css"/>

//make sure to copy the default structure for xml file.

//I have not pasted that here because i am a noob to stackexchange!!

:::Last Step :::

move your new minicart image to the /app/design/vendor/theme/Magento_Theme/web/images/minicart.img extension

::Finally run below commands::

::Make sure to remove /pub/static/frontend::

::bin/magento setup:upgrade::

::bin/magento setup:di:compile::

::bin/magento setup:static-content:deploy -f::

::bin/magento indexer:reindex::

::bin/magento cache:flush::

::chmod -R 777 ../magento root directory name::

::Thank You::

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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