How to increase social media icon size (Refresh theme)

Store Design
,

Topic summary

A user needed to increase the size of social media icons in the footer of Shopify’s Refresh theme.

Initial Solution Attempt:

  • First suggestion was to add CSS targeting .svg-wrapper with width/height values in assets/theme.css
  • This file didn’t exist in the theme; correction made to use assets/base.css instead
  • Initial code only increased spacing/margins around icons, not the icons themselves

Working Solution:
Add the following CSS to assets/base.css:

.footer__list-social .svg-wrapper svg {
    width: 35px!important; 
    height: 35px!important;
}
.footer__list-social .svg-wrapper {
    width: inherit!important;
    height: inherit!important;
}

Resolution:
The issue was resolved successfully. The key was targeting both the SVG element itself and its wrapper container, adjusting pixel values as needed for desired icon size.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

How can I increase the size of social media icons in the footer in the Refresh theme?

URL: sheetandprompt.myshopify.com

Thanks!

1 Like
2

Hello @iveray

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.

.svg-wrapper {
width: 30px;
height: 30px;
}

devcoders_0-1739089465364.png
devcoders_0-1739089465364.png1254Ă—372 18.9 KB

3

@devcoders Thanks for the quick reply! There isn’t a “theme.css” file under the assets folder.

1 Like
4

Hello @iveray

Please add css assets/base.css

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.

5

@devcoders When I entered 100px (to test the functionality), it looks like the size of the icons themselves remain the same, but the margins around each icon increase to 100px. I tried 1000px as well, which makes the issue a lot more obvious.

How can I increase the size of the icons themselves?

Screenshot 2025-02-09 at 4.43.33 PM.png
Screenshot 2025-02-09 at 4.43.33 PM.png1272Ă—402 1.08 KB

1 Like
6

Hello @iveray

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.

.footer__list-social .svg-wrapper svg {
    width: 35px!important;
    height: 35px!important;
}
.footer__list-social .svg-wrapper {
    width: inherit!important;
    height: inherit!important;
}

devcoders_0-1739091285807.png
devcoders_0-1739091285807.png1269Ă—217 10.6 KB

1 Like
7

This worked. Thanks!

Note to other users reading this: @devcoders meant assets/base.css, not assets/theme.css.

1 Like
8

Hello @iveray

You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!