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.

@KatesShop

Thanks for update

yes can you please add this code also

ul.social-icons {
margin-top: 15px;
}
1 Like