How can I alter the header icons in the Dawn theme?

Topic summary

Customizing Dawn theme header icons by replacing the default search and cart with custom icons. Goal is to swap to a style seen on another site, using the store’s theme files.

Proposed approach:

  • Edit header.liquid and replace the existing icon code (likely SVGs) with custom assets.
  • Upload new icon images to the Assets folder and reference them with image tags.
  • A video tutorial link was shared to guide the process.

Follow-up issues:

  • After swapping, the new icon rendered too large; guidance on reducing size was requested. No CSS or size parameters were provided in the thread.
  • Another participant reported a “massive” search button and asked to move the search to the right, seeking sizing and positioning help.

Latest status and outcomes:

  • It appears the original poster later resolved the sizing, but no steps or code were shared.
  • Other participants asked for the solution, indicating demand for a documented fix.

Notes:

  • Screenshots and a video are central to understanding desired icon style and the oversizing issue.
  • No definitive, step-by-step resolution for icon sizing or search placement is posted; the discussion remains open on those points.
Summarized with AI on January 21. AI used: gpt-5.

I want to change my Header Icons [ Search Bar + Basket Icon]

from this


to this

![Screenshot 2022-01-26 at 00.06.41.png|328x120](upload://uMbS695yQ7onDaVAqFC3vRDFtTw.png) [what I want]

url: https://pure-date.myshopify.com/

pw: triwhi

1 Like

Hi @Riz_bangee

You can do this with some custom stuff.

Go to header.liqiuid file
Find these icons and replace them with new one

@Dbuglabpvtltd @pSalm Hi

So if i want to change my current header icon from


to this

[ source: https://chenille-boutique.co.uk/ ]

How can I do this?

This is my website

url: https://pure-date.myshopify.com/

pw: triwhi

Hi @Riz_bangee

Go to header file and find these icons and replace with new one.
You can upload icons images in assets and call them using image tag


2 Likes

@Riz_bangee

Please check the following URL for help.

https://www.youtube.com/watch?v=_aTnR-u8B68

1 Like

@dmwwebartisan Your video was helpful - But now my icon is too big. How do i Reduce the size

1 Like

Hi @dmwwebartisan and @Riz_bangee Have you figured out how to change the size now?

I have an issue where my search button has decided to go massive! Grateful for any help please!! Really want the search button on the right!

Hi,

I can see that you mange to fix the problem. Can you tell me how? I have the same problem now that I want to fix myself. Thanks :slightly_smiling_face: