Shopify themes, liquid, logos, and UX
Hello friends! Quick question, how can i change the icons in the red circle
Im talking about changing the icons to one like these
And making them slightly bigger.
Hi @Czaban
Thank you for reaching out to the Shopify community.
In order to change the cart icon go to your theme code editor and search for file named icon-cart.liquid and icon-cart-empty.liquid in Snippets folder. There remove the svg code and add the the svg code of icons of your choice in both the files . Example -
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" class="icon icon-cart-empty" width="24.000000pt" height="24.000000pt" viewBox="0 0 24.000000 24.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,24.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
<path d="M10 211 c0 -5 6 -11 14 -14 23 -9 41 -79 27 -106 -11 -21 -10 -21 64 -21 43 0 75 4 75 10 0 6 -27 10 -62 10 -70 0 -70 17 1 22 41 3 45 6 62 45 l18 43 -79 0 c-47 0 -80 4 -80 10 0 6 -9 10 -20 10 -11 0 -20 -4 -20 -9z"/>
<path d="M54 49 c-10 -17 13 -36 27 -22 12 12 4 33 -11 33 -5 0 -12 -5 -16 -11z"/>
<path d="M154 49 c-10 -17 13 -36 27 -22 12 12 4 33 -11 33 -5 0 -12 -5 -16 -11z"/>
</g>
</svg>
To adjust the height and width you can go base.css file in assets folder and search for class .header__icon--cart .icon and change the height and width accordingly.
Similarly for account icon you can go to icon-account.liquid file and change the svg code there.
Example-
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" class="icon icon-account" width="24.000000pt" height="24.000000pt" viewBox="0 0 24.000000 24.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,24.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
<path d="M90 195 c-15 -18 -10 -45 13 -59 34 -22 73 27 47 59 -16 19 -44 19 -60 0z"/>
<path d="M58 84 c-16 -8 -28 -23 -28 -34 0 -18 7 -20 90 -20 83 0 90 2 90 20 0 42 -97 64 -152 34z"/>
</g>
</svg>
Please give it a try and let me know if this was helpful.
Thanks
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025