Streamline Theme - Changing color of the cart icon

Topic summary

A user seeks to change the cart icon color in Shopify’s Streamline theme. They also mention having code that makes menu items bigger, which unintentionally enlarges the cart icon as well.

Solution provided:

  • Add CSS code to theme.css file (Online Store → Theme → Edit code → Assets → theme.css)
  • Target the cart icon SVG element with background color and border-radius properties
  • Additional code provided to change the cart icon color when items are present

Current status:
The initial solution partially worked, but the user wants to modify the background color (specifically the green portion) rather than just the icon itself. The conversation remains ongoing as they seek refinement of the CSS solution.

Note: The posts contain reversed/mirrored text, but the technical guidance involves standard CSS modifications to the theme files.

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

Streamline Theme - How can you change the color of the cart icon. Also I have this code to make my menu items bigger but it is also making the icon with the cart bigger if anyone has a fix:

@media (min-width: 750px){
.header-item *{
font-size: 28px !important;
}

website - provengrit.us

Hello @ProvenGrit

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

svg.icon.icon-cart {
    background: red;
    border-radius: 40px;
}

Hi, thanks for the response. it looks like this now

Hello @ProvenGrit

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.cart-has-items .site-nav__link--cart.site-nav__link--cart {
    color: red !important;
}

Thanks so much for helping. I want the background (the green part) to change color. Is that something that you can do?