Make svg icons in header smaller

86 0 12

Hi guys, how can I make all of the svg icons in the header smaller? Any help would be greatly appreciated!



Replies 4 (4)

Shopify Partner
56 0 10

Hi Flammagreg, 


I assume you are talking about the magnifying glass and other symbols next to it (correct me if I am wrong). 




If you look at the attached image, you will see that there are class names on the svgs that dictate its width and height. You will need to go into the code and change or remove these current classes and update it with what you really want. This will involve using the code editor Shopify provides or your own code editor if you have the skills. 


Hope this helps! 

Dom Tripodi | Sanico Software
I am a Software Engineer and Shopify Expert based in Adelaide, Australia. I build ecommerce websites with Shopify for local and international businesses. If you want to take your Shopify store to the next level, send me a message. Check out Sanico Software here.

Shopify Partner
4272 969 1620


Hi @flammagreg 


This is Richard from PageFly - Shopify Page Builder App


Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

header .header__icon svg.icon {
    width: 20px;
    height: 20px;
header .header__icon--cart .icon {
    width: 36px;
    height: 36px;


Your store looks very nice, warm and elegant, but in my opinion, you should consider to add a heading banner + CTA button on your main banner


The banner is very significant in hero material. It is the first thing customers see when they visit your website. Let's get consumers to know exactly what you're having in 5 seconds first.

Hope this can help you solve the issue 


Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

Shopify Expert
139 26 15

Hi @flammagreg 

Is this a title you want to change?





To change the title, please follow these steps.

Step 1: Go to Admin -> Online Store -> Themes -> Edit Code






Step 2: Find the base.css file and paste the following code at the bottom of the file. Then save the file


.header__heading-logo-wrapper img {
    width: 50px;


You can change the width to fit the website

This is the result after the change




I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution. Have a nice day sir!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Shopify Expert
1082 130 136



I am San from MS Web Designer.


Go to Themes > Edit code > Theme.liquid > at the bottom place this code before </body>


.header__icon .icon{vertical-align: unset !important;}
.header__icon--cart .icon{width: 25px !important; height: 25px !important;}
.header__icon .icon.icon-account,
.header__icon .icon-search,
.header__icon .icon.icon-hamburger{width: 14px !important; height: 14px !important;}


Do let me know in case of any concerns.




If it’s helpful to you, please mark it as a solution.  

Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin