Increase icons size

Store Design
, ,

Topic summary

A Shopify store owner seeks CSS code to enlarge shipping/feature icons without increasing spacing to the text below.

Multiple solutions provided:

  • Solution 1 (dws_pvt_ltd): Modify t4s-shipping.css by editing .t4s-shipping-list .t4s-shipping-icon-img class, setting fixed width/height (180px) and removing/commenting out variable-based sizing.

  • Solution 2 (niraj_patel): Add custom CSS in theme.liquid before </body> tag, targeting .t4s-ship-img with background-size adjustments.

  • Solution 3 (Huptech-Web): Insert code in custom.css file, modifying .t4s-shipping-item .t4s-shipping-icon with adjustable width/height (12rem suggested) and optional transform: scale(1.8) for additional sizing.

  • Solution 4 (BSSCommerce-HDL): Add CSS in theme.liquid above </head> tag with similar class targeting.

Status: Multiple working solutions offered with screenshots demonstrating results. Discussion appears resolved with contributors requesting feedback through likes/accepted solution marking.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi, can anyone help me with the code to increase the icons size without increasing the space to the text bellow ?

Thank you !!

https://aaba5d-52.myshopify.com/

Daniel19901_0-1721737480023.png
Daniel19901_0-1721737480023.png1416Ă—381 53.4 KB

2

@Daniel19901

Hello! Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file, open “t4s-shipping.css”
  5. Add the following code at the CSS “.t4s-shipping-list .t4s-shipping-icon-img” of the class.
.t4s-shipping-list .t4s-shipping-icon-img {
    width: var(--size-icon); /* remove or comment this CSS */
    height: var(--size-icon); /* remove or comment this CSS */
    width: 180px; /* add this CSS */
    height: 180px; /* add this CSS */
}

See the screenshot below.

dws_pvt_ltd_0-1721737997200.png
dws_pvt_ltd_0-1721737997200.png1808Ă—952 135 KB

Feel free to reach out if you have any questions or need assistance.

Best regards,

DWS.

3

Hello @Daniel19901

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.t4s-ship-img { background-size: auto !important; }

techlyser_web_0-1721668819908.png
techlyser_web_0-1721668819908.png1363Ă—271 41.1 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

Hello @Daniel19901 , You can effortlessly obtain the design according to your specifications by simply viewing and entering the code provided in the custom.css file or your custom CSS file.

Additionally, a screenshot is also available for reference.

.t4s-shipping-item .t4s-shipping-icon {
    width: 12rem ; /* adjust the width as per your requiurement*/
    height: 12rem; /* adjust the height as per your requiurement*/
    margin: 0 auto;
    background-size: cover;
}

or follow this code:-

.t4s-shipping-item .t4s-shipping-icon {
 transform: scale(1.8)
}

icon-size.png
icon-size.png1327Ă—578 82.4 KB

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

5

Hi @Daniel19901 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1721738215082.png
BSSCommerceHDL_0-1721738215082.png1911Ă—689 90.6 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like