The cart icon in the Squarespace 7.1 header uses SVG with the .icon--cart or .header-actions-action--cart selector. Change its color by targeting the SVG fill.
The cart count badge (the number bubble) has its own selector for background and text color, so you can style it independently from the icon.
/* Cart icon color */
.header-actions-action--cart .icon--cart svg {
fill: #ffffff !important;
}
/* Cart count badge */
.header-actions-action--cart .icon-cart-quantity {
background-color: #e63946 !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700;
}
/* Cart icon hover */
.header-actions-action--cart:hover .icon--cart svg {
fill: #e63946 !important;
}Style your cart icon with our Cart Styler toolTry it free →
