Hi,
I tried to make the social media icons in the footer of my Dawn theme a bit bigger, but the tutorials that are available for this, only seem to work for the older themes. Is there any way to change the size of these icons?
@Flavourez
Hi,
Welcome to the Shopify community.
kindly Share your Store URL.
The store url is https://flavourez.myshopify.com/
.list-social__item .icon {
height: 9.8rem !important;
width: 3.9rem !important;
}
@Flavourez
Add this code in component-list-social.css file.
Thank you
6 Likes
Thanks a lot, this works like a charm!
1 Like
@Flavourez
Welcome.
.list-social__item .icon {
height: 9.8rem !important;
width: 3.9rem !important;
}
@Flavourez
Add this code in component-list-social.css file.
Thank you
Can this work also for the header icons? (cart and search). I’ve tried and did not manage to!
2 Likes
@Dogismybestfrie
Welcome to the Shopify community!
Thanks for your good question.
Please share your store URL.
So that I will check and let you know the exact solution here.
Very nice!
You wouldn’t happen to have a line of code to make the Facebook Icon Blue and the Instagram Purple would you?
They look rather drab just in black. Thanks for your help!
Scott
@Zworthkey - Hmmm, I am having the same issue as @Dogismybestfrie with Tiktok, any ideas?
I have the same problem, any solution?
Hi @MF41 @halflifecrysis @Dogismybestfrie I’m not a professional coder or Shopify partner – just tinkering with my own store and ran into the same issue with the TikTok icon.
I looked at the SVG code in icon-tiktok.liquid and noticed that it was different from the other icons in that it has “width” and “height” instead of viewBox settings.
After swapping out “width=16” height=“18” for viewBox=“0 0 16 18”, the TikTok icon scaled up along with the rest of the icons.
Was:
I changed mine to:
My store is still in development, but this is what I ended up with:
Hope this helps.
1 Like
On Dawn, this change did not make the Tiktok icon get bigger for me. I still have large everything else (Pintrest, FB and Insta) and a tiny TikTok. Are you on Dawn? Weird that it worked for you.
@ImagePixie Tnx, it is working for me
1 Like
I’m using Dawn and started with the edit to component-list-social.css shown in the accepted solution, although since last night I’ve made further edits and the TikTok icon is still sizing up for me. I changed height and width to 3rem, removed the !important and removed the previous styling (which the !important served to overwrite). Here is what my current component-list-social.css is looking like. Flex-end commented out until I figure out if I want to keep it.
.list-social {
display: flex;
flex-wrap: wrap;
/*justify-content: flex-end;*/
}
@media only screen and (max-width: 749px) {
.list-social {
justify-content: center;
}
}
.list-social__item .icon {
height: 3rem;
width: 3rem;
}
.list-social__link {
align-items: center;
display: flex;
padding-right: 1.3rem;
color: rgb(var(--color-foreground));
}
.list-social__link:hover .icon {
transform: scale(1.07);
}
@ImagePixie This is the way. I was boggled when I was seeing the width and height set manually when I inspected the element, but I couldn’t figure out where to change it. Thank you for that! Now my only problem is that 0 0 16 18 sets my icon slightly larger than the others, and even after reading up on it I’m just mystified by the viewBox attribute because changing the values doesn’t ever do what I expect it to. I have no idea how to nudge it a little smaller… but I’ll take too large over it being a weird tiny speck instead. 
Thanks for this fix!
Perfecto! It worked for me… Thank you very much for your kind support.
Hi, I hope you’re doing well,
I have the same request for some help to make the social icons bigger on mobile and desktop
URL: https://modacol.myshopify.com
Is there a way for you to help me address this issue?