How can I make social media icons bigger?

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.

Hey Kate,

Kindly try the following:

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:
.social-icons li .icon{
    font-size: 28px !9mportant;
    margin-top: 10px;
}

You can play around with those values.
28px = size of the icons. If you want it bigger, you can try something like 35px or any other value.
10px = spacing on top of the icons.

Let me know whether it helps you.