How can I adjust social media icon size in the Dawn theme?

Technical Q&A
, ,

Topic summary

A user seeks help increasing the size of Facebook and Instagram icons in their Shopify Dawn theme. They’ve attempted previous solutions but struggle with the code implementation.

Proposed Solutions:

Multiple support teams (GemPages, PageFly, and a community member) offer CSS-based fixes:

  • Method 1: Add CSS to theme.css targeting .social-media-links svg with width/height values of 24px-42px
  • Method 2: Target .social-media-links.flex.items-center.px-2 svg with width 32px and height 25px using !important flags

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Open Asset → theme.css file
  3. Paste provided CSS code at the bottom of the file

The user shared their store URL (crazyforcake.com.au) to enable personalized assistance. Support teams included screenshots demonstrating the code placement locations. The discussion remains open pending confirmation of which solution worked.

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

I have looked at multiple answers and really struggle to understand we are wanting to change our facebook and insta logos to a bigger size is says to go to asset and ->/component-list-social.css-> but this isn’t showing up in my coding any help would be greatly appreciated

1 Like
2

Hello @timbowes ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

Crazy for Cake

1 Like
4

@timbowes

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.social-media-links {
    padding: 0px 20px;
}
.social-media-links svg {
    width: 24px;
    height: 24px;
}
5

Hi @timbowes ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

  • Go to Online Store->Theme->Edit code
  • Asset->theme.css
  • Paste the below code at the bottom of the file
.social-media-links.flex.items-center.px-2 svg {

   width: 32px !important;
   height: 25px !important;
}

PageFlyVictor_0-1671074939237.png
PageFlyVictor_0-1671074939237.png873×183 11.5 KB

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

6

Hello @timbowes ,

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1671078610518.png
GemPages_0-1671078610518.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1671078769403.png
GemPages_1-1671078769403.png1918×906 75.5 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team