A user is attempting to increase the Instagram icon size in their Shopify Dawn theme but standard CSS solutions targeting .list-social__item .icon are not working.
Problem Details:
!important declarations in component-list-social.css failedProposed Solutions:
.list-social__item .icon svg{}.list-social__link .svg-wrapper{width: 32px; height: 32px;}Current Status:
Hello,
I am trying to increase the size of the Instagram icon on my shop, however I am not able to do that. I had a look to previous suggested solutions but they are not working (i.e. applying !important height and width values to “.list-social__item .icon” inside component-list-social.css). Does anyone have any suggestion?
Thanks in advance!
Hi @Streetage
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.
@Streetage can you please provide your website link? did you try css for svg icon? like .list-social__item .icon svg{}
The page URL containing Instagram icon is needed here, please share in this topic to proceed. Thanks!
Hello @Streetage
You can try it out by adding the following CSS at the very end of your theme’s main stylesheet (usually assets/base.css or assets/theme.css), not inside component-list-social.css :
/* Footer social icons – force SVG size */
.header .list-social__link svg,
.footer .list-social__link svg {
width: 28px !important;
height: 28px !important;
}
I hope this will help you. Thank you.
Hello guys,
thank you for your replies. Site is www.streetage.it and pwd is Shopify1!
@eFoli-Marvic unfortunately your solution is not working, no change occurs
Hey! This is a common challenge with some Shopify themes because social icons are often SVGs inside specific wrappers, which makes them tricky to resize with standard CSS.
If you want, I can guide you through the steps to properly target the icons so they scale cleanly on both mobile and desktop. It’s a bit technical, but I’ve helped merchants solve this quickly without breaking the layout.
please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css
.list-social__link .svg-wrapper{width: 32px; height: 32px;}
=============
To build shopify pages use [PAGEFLY]](PageFly | The Best Shopify Solution For Page Building And Customizing)**)
(post deleted by author)
@suyash1 Your solution is working, thank you! However I cannot increase it more than 32px x 32px, is there any size limit…?
Hi @Streetage
Your .svg-wrapper class is limiting the icon’s size. Modify its properties, and the icon will appear larger. I’ve tested it, and it works.
.svg-wrapper {
display: inline-flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
}
See the screenshot:
@Streetage yes 2 css are involved to increase the size, please add css below and check, adjust numbers as per your need
.footer__list-social .list-social__item .icon.icon-instagram {width: 50px !important; height: 50px important;}
.list-social__link .svg-wrapper {width: 50px; height: 50px;}
Hi @Streetage
After checking the Instagram icon on your website, I have manually created an CSS code below for your reference. You can add it at the bottom of theme.liquid file or theme.css file to make it work:
<style>
.icon icon-instagram {
transform: scale(1.5) !important;
}
</style>
If it works normally, your Instagram icon will display like this:
If you want to increase or reduce the size of the Instagram icon, just edit the value of transform into scale(1.6) or scale(1.4). Then the size of Instagram icon will be changed accordingly.
Hi guys,
thank you all for your kind support. The reason why the size increase was not exceeding the 32px limit was because I was wrongly applying it on the base.css of the theme. To fix it I had to:
.svg-wrapper {
display: inline-flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
}
.list-social__item .icon.icon-instagram {
width: 80px !important;
height: 80px !important;
}
svg.icon.icon-instagram {
width: 80px !important;
height: 80px !important;
}
This way the icon increases properly . Thank you all for your help!
