How do I change cart and dropwdown menu icons?

Store Design
,

Topic summary

Main issue: A new Shopify user on the Radiant theme is trying to replace the cart and dropdown menu icons and faces display problems with the cart icon.

What’s happening:

  • Replacing icon-empty-cart.svg makes the icon either disappear or appear too large.
  • Only a short SVG without explicit size attributes prevents disappearance, but then the icon shows too large with a black box background.
  • YouTube guides reference icon-empty-cart.liquid, but this theme uses icon-empty-cart.svg, creating confusion about the correct approach.
  • A screenshot (black box visible) and partial SVG code (viewBox 0 0 512 512) were provided.

User goals:

  • Make the cart icon smaller to fit the design.
  • Remove the black background box behind the icon.
  • Get a reliable, step-by-step method to change the menu (dropdown) icon next, avoiding the same issues.

Open questions / needs:

  • How to properly control SVG sizing in Radiant (e.g., via theme CSS or SVG attributes) without making the icon disappear.
  • How to eliminate the black box (likely SVG fill/background) while keeping the icon visible.
  • Whether the .svg vs .liquid file difference changes the workflow for icon customization.

Status: No solution provided yet; guidance requested.

Summarized with AI on December 13. AI used: gpt-5.
1

I’m absolutely new to Shopify. I was trying to figure out how to change them, but eventually I either got the icon disappearing completely, or appearing but too large, with inability to change the size, because only short SVG code with no size indication in it prevents the icon from disappearing, and when the icon appears then it has some black box around it.

Looking at the Youtube guides I noticed that others have icon-empty-cart.liquid while I have icon-empty-cart.svg if that says anything. I’m using Radiant theme.

Screenshot 2024-12-02 at 16.50.15.png
Screenshot 2024-12-02 at 16.50.15.png972×252 11.6 KB

For example right now it finally appeared, but it’s too large and with black box around it.
Here’s the code I currently have in icon-empty-cart and icon-cart files:

2

I want it to be smalle to fit with the design and for the black box in the background of icon to disappear. And I need a working guide on how to change the menu icon next, because to achieve this cart icon I had to redo the code over 50 so I spent over 2h on it..
I guess if I use the same method I will face the same issue.