How to make social media icons bigger in Trade theme?

Store Design
,

Topic summary

Goal: enlarge social media icons in the Trade theme’s footer. Previous CSS used for the Dawn theme didn’t apply, and no store link was provided (development store).

Solution: edit the file assets/component-list-social.css. Increase the dimensions for .list-social__item .icon (e.g., from 2.2rem to 3.2rem) and set .list-social__item .svg-wrapper (e.g., 40px by 40px) to control the icon’s container space.

Notes: the svg-wrapper defines the available space around the icon, while the icon class sets the SVG’s size; both should be adjusted together to achieve the desired visual scale. Save the file and test changes.

Outcome: the proposed CSS changes worked for the requester. Status: resolved; no outstanding issues.

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

I’m trying to make the social media icons at the bottom of the page larger in the Trade theme. I’ve done it before in Dawn but that code isn’t working, nor are any of the other code suggestions I’ve tried from this board related to other themes. Can anyone help me related specifically to the Trade theme? Thank you!

PS It’s a development store so I don’t have a link, sorry.

2

Hi @Hughmanity

To make social icons bigger, try to edit your theme, and find assets/component-list-social.css file, replace code

.list-social__item .icon {
  height: 2.2rem;
  width: 2.2rem;
}

with

.list-social__item .svg-wrapper {
    width: 40px;
    height: 40px;
}

.list-social__item .icon {
  height: 3.2rem;
  width: 3.2rem;
}

and adjust both pairs. Class svg-wrapper controls the space and limits icon class size. Save file and test.

1 Like
3

That worked, thank you!

1 Like