Still no help with resizing social media icons after the Studio Theme 15.3
update.
Topic summary
A user is struggling to resize social media icons in their Shopify store after updating to Studio Theme version 15.3. The previous CSS targeting methods no longer work due to theme structure changes.
Root Cause Identified:
The updated theme introduced a new .svg-wrapper class that controls icon sizing, replacing the old direct SVG targeting approach. The default size is set to 20px.
Solution Provided:
Target the .svg-wrapper class instead of the SVG element directly using custom CSS:
.svg-wrapper {
width: 30px !important;
height: 30px !important;
}
A responsive version was also shared to handle different mobile sizes using media queries.
Implementation:
The code can be added either to the custom CSS box in the footer section or directly in the theme’s base.css/theme.css file.
Resolution:
The user successfully implemented the solution by combining width and height properties within the .svg-wrapper class, avoiding code repetition. The issue appears resolved.
1 Like
In order to paste the code from Custom Css to theme file then the best place is base.css or theme.css file.
Here are the steps you can follow.
Go to Shopify Admin > Online Store > Edit Code > base.css or theme.css file.
Go to end of this file and paste the custom css code.
I don’t know how to do that, unfortunately.
Hello @chrisc1987
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
2 Likes
Please, follow the instructions from https://community.shopify.com/c/shopify-design/how-can-i-share-an-unpublished-theme-preview-link/td-p/1693109 and finally share a preview link to the actual theme you’re having problems with.
The button may look different for you:
Hey @chrisc1987 ,
You are right that in the new updated version you are not able to resize the icons with the same css that in used in the old theme. This is because in the updated theme there is new class added name by .svg-wrapper that control the size of the Social Icons.
So, now instead of targeting the icon svg class you need to target the .svg-wrapper.
Currently I see that there is 20px width and height is set to the Social Icons.
Here it is:
So, when we change it then the size of the icons increase at one time. So in order to change it’s size you have to paste the following code at the end of existing one.
.svg-wrapper {
width: 30px !important;
height: 30px !important;
}
You can increase the number from 30px to any number based on your requirements.
If you want to have a different icon sizes on Mobile then you can paste the following whole code instead of the previous one.
.svg-wrapper {
width: 30px !important;
height: 30px !important;
}
@media only screen and (max-width: 767px){
.svg-wrapper {
width: 20px !important;
height: 20px !important;
}
}
The above code also cover the mobile devices with different size.
I hope this help a lot. If this was really helpful then mark my reply as Solution and Like it.
Thanks
Hi @TheScriptFlow ,
Thank you for your reply. Can I use the custom CSS box in the footer section to input these codes, or will it need to be in the code editor?
You can absolutely use the custom css box to put the coding that I provide you.
Okay, so the first code does work, but as you stated, it only targets the WRAPPER SIZE and not the actual icon itself inside the wrapper. But I may have figured it out slightly with some other help, finally. This it what I have now and it seems good, no yellow underlines.
You did it perfectly. Instead of repeating the same class you add the width and height in the SVG wrapper class.
Now I hope your issue is fixed. If you need other assistance I will be more than happy.
- If my reply was helpful, mark it as a solution and hit the like button! And Wait Don’t forget to Buy me a Coffee 
1 Like