How to enlarge social media icon size on Stiletto

Store Design
,

Topic summary

A user seeks to enlarge social media icons on their Shopify store using the Stiletto theme, which lacks built-in customization options for this feature.

Problem: Standard theme editor doesn’t allow icon size modification for the header social media icons.

Proposed Solutions:
Multiple CSS code snippets were suggested for insertion into custom.css or theme.liquid files, targeting different selectors:

  • .header .social-icons li svg with width/height properties
  • Placement recommendations varied (end of file vs. before specific media query)
  • One solution suggested adding code before </body> tag in theme.liquid
  • Another targeted footer icons specifically (.footer .social-icons .icon)

Current Status: The discussion remains unresolved. The original poster tried initial suggestions without success, indicating the correct CSS selector or implementation method hasn’t been identified yet. Contributors continue offering alternative code approaches with varying specificity and !important declarations.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am trying to edit the code to enlarge the size of the linked social media icons on our website -https://rankinsjewellers.co.uk/

We are using the Stiletto template and I seem unable to edit the size of the icons on our homepage. I have reached out to support and it seems like the Stiletto theme doesn’t provide a direct option to modify the header through the theme editor.

Please can I ask for some suggestions/help?

Many thanks.

2 Likes
2

Hello @elleCtaylor ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your custom.css file and paste the following code at the bottom:

.header .social-icons li svg {
    width: 26px !important;
    height: 26px !important; 
}

Regards
Guleria

3

Hi Guleria,

I have given this a go but the icon size has remained the same.

Are there any further ideas on how I can solve this issue?

Thanks,

Elle

4

@elleCtaylor - please add this css to the very end of your custom.css file and check

.header .social-icons li svg {width: 28px; height: 28px;}
5

Still no luck sadly!

6

Use the code in same file but before this line in same file

@media (max-width: 722px){

7

Hi @elleCtaylor

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

Hi @elleCtaylor

You can try to add this code and check again

.header .social-icons li, 
.header .social-icons li .icon, 
.header .social-icons li svg {
    width: 26px;
    height: 26px;
}

Change 26px in the code with your values that fit your request.

9

Hello @elleCtaylor
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

.footer .social-icons .icon {
width: 30px !important;
height: 30px !important;
}

result

75.png
75.png646×421 13.4 KB

If this was helpful, hit the like button and accept the solution.
Thanks