Enlarging Social Media Icon size in Studio Theme

[MYB_Whitnye]

Hello, everyone!

I am trying to make the icons in the footer of my website larger. I have tried entering code for other themes but they are not compatible with my website theme, Studio. Does anyone have a compatible code?

https://masteryourbalance.com/

password: masteradmin

[mt686]

To make the icons in your footer larger in the Studio theme, try adding this custom CSS:

Steps:1. Go to Online Store > Themes in your Shopify admin.

1. Click Actions > Edit Code on your active theme.

2. Open theme.css or base.css (whichever your theme uses).

3. Add this code at the bottom:

   /* Increase footer icon size */
   .footer .icon {
       font-size: 24px; /* Adjust size as needed */
       width: 30px;
       height: 30px;
   }
   

4. Save and refresh your site.

If this doesn’t work, use Inspect Element (right-click on an icon > Inspect) to find the exact class Shopify uses and adjust the selector accordingly.

---

Try EasyEdits (No-Code Solution)

I’m the developer of EasyEdits, a Shopify app that lets you make quick store edits—no coding needed. It’s free to try, and you keep the edits even if you don’t subscribe! Perfect for tweaking things like icon sizes without touching the code.

[MYB_Whitnye]

The code resized the payment icons, but not the social media ones. I am not sure what you mean by adjusting the selector after inspecting element.

[Dan-From-Ryviu]

Hi @MYB_Whitnye

You can do that by adding this code below to Custom CSS in Online Store > Themes > Customize > Theme settings.

.footer .list-social__item .svg-wrapper { width: 32px; height: 32px; }

[LizHoang]

Hi @MYB_Whitnye

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

span.svg-wrapper {
    height: 30px !important;
    width: 35px !important;;
}

Result:

Best,

Liz

[topnewyork]

Hi @MYB_Whitnye

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[MYB_Whitnye]

Thank you for your reply! The icons did increase in size, but not as much as in your attached photo. I would like to make them larger. This is how they look now (photo below). I tried increasing the px values but the icons stay the same size.

[MYB_Whitnye]

Thank you for your reply! The icons did increase in size, but not as much as in your attached photo. I would like to make them even larger. I tried increasing the px values but the icons stay the same size.

[Dan-From-Ryviu]

Please update the code

.footer .list-social__item .svg-wrapper { 
    width: 32px; 
    height: 32px; 
}
.footer .list-social__item .svg-wrapper .icon {
    height: 3.2rem;
    width: 3.2rem;
}

[MYB_Whitnye]

This worked perfectly, thank you so much! If I ever wanted to resize them in the future, do I just scale the px and rem values?