How can I make social media icons bigger?

Store Design

Topic summary

Main issue: Social media icons in Shopify themes (starting with Supply) are too small and positioned below the footer; users want them larger.

Key actions and solutions (theme-specific CSS added via Online Store > Themes > Edit code):

  • Supply: Increase .social-icons li .icon font-size; add spacing with ul.social-icons { margin-top: 15px; } to prevent icons bumping into the line above.
  • Shella: Edit typography.scss.css; set .social-media .icon width/min-width (e.g., 20px). Facebook icon adjusted separately with smaller width.
  • Generic/share buttons: In stylesheet.css, set .share-icons–icon width/height (e.g., 50px).
  • Theme with footer block: In theme-d.css, target .footer__social-media .social-media .icon (e.g., 30px) and override .icon-social-facebook with !important if needed.
  • Another theme: In component-list-social.css, set .footer__list-social .icon width/height (e.g., 36px). Result confirmed by user and screenshot.
  • Another case: In theme.scss.liquid, adjust .site-footer .social-icons li .icon font-size/line-height (e.g., 30px).

Outcomes:

  • Multiple users reported success after adding the CSS and spacing fixes.
  • Several follow-ups requested store URLs/passwords before providing code.
  • Some cases remain pending (e.g., Flow theme request awaiting URL); one store showed no visible issue.

Status: Partially resolved; ongoing for stores pending details.

Summarized with AI on December 13. AI used: gpt-5.
41

@amazezones

oh sorry for late can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-d.css ->paste below code at the bottom of the file.
.footer__social-media .social-media .icon {
    width: 30px;
    min-width: 30px;
}
.footer__social-media .social-media .icon-social-facebook {
    width: 15px !important;
    min-width: 15px !important;
}

@KFORREST

sorry for that issue can you send store url

1 Like
42

It’s not live yet but here it is…

https://creativedesignsbykari.myshopify.com/

1 Like
43

@KFORREST

thanks but your store password protect

44

It is not live yet. Can I email you?–

Kari Forrest

1 Like
45

yes, please

46

The store is live now but the issue still exists. Thanks in advance for a solution.

https://creativedesignsbykari.myshopify.com/

47

Dear Brother, I also tried this but not working. screenshot also attached.

Screenshot_41.png
Screenshot_41.png1566×704 48 KB

48

@KetanKumar

do you have one for the Dawn theme?

Thanks!

49

My theme is Taste.

1 Like
50

@twista @JaclynCameron @KFORREST

can you please send store url

51

Yes here is the store url: https://twista.pk/

1 Like
52

@twista

thanks for url can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-list-social.css ->paste below code at the bottom of the file.
.footer__list-social .icon {
    width: 36px;
    height: 36px;
}
1 Like
53

As above, provided on June 4th. https://creativedesignsbykari.com/

54

pasted but did not worked. icon size is still same, no option appeared to edit in the theme setting as well.

1 Like
55

@twista

i can see icon size bigger

KetanKumar_0-1658770148676.png
KetanKumar_0-1658770148676.png1920×1080 166 KB

@KFORREST

thanks but i can’t see social media icon

1 Like
56

oh yes, now i can increase it more, thanks a lot brother. :slightly_smiling_face:

1 Like
57

@twista

no rush its my pleasure to help us

1 Like
58

I had commented it out because it was too small. Could you provide the file name and code/required code location for the Supply theme and I’ll implement. Thanks.

1 Like
59

@KFORREST

can you enable social icon at footer

60

Done.

1 Like