I want to change icon search in theme dawn

Shopify Discussion

Topic summary

Goal: replace the search icon in the Shopify Dawn theme header (mobile and desktop).

Solution provided:

  • Access Online Store > Themes > Edit code, then open header.liquid (header section/template).
  • Find the search icon SVG (look for class “icon-search”).
  • Replace the existing SVG markup with the SVG of the desired icon (SVG = Scalable Vector Graphics, a vector icon format).
  • Save changes.

Additional guidance:

  • One reply included a screenshot indicating where to change the icon within header.liquid.
  • Recommended to preview changes and test on a duplicated theme before publishing to ensure layout and responsiveness remain intact.
  • If unsure or needing deeper customization, consider a Shopify Expert/developer.

Outcome:

  • The original poster confirmed the steps worked perfectly and expressed thanks.

Status: resolved; no further questions or disagreements. Key artifacts: a screenshot illustrating the edit location in header.liquid.

Summarized with AI on January 2. AI used: gpt-5.
1

How do I change the search icon in the header section? Mobile and desktop compatible please.

2

Hello @broadam

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file header.liquid

Step 3: Change to the icon you want to use here.

PageFlyAmelia_0-1711333292708.png
PageFlyAmelia_0-1711333292708.png399Ă—191 36.3 KB

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

1 Like
3

If you’re looking to change the search icon in the header section of your Shopify store and want it to be compatible with both mobile and desktop devices, assuming you’re using the Dawn theme, you can follow these steps:

  1. From your Shopify admin dashboard, go to Online Store > Themes.
  2. Find your Dawn theme and click Customize.
  3. However, since the change you want to make is in the code, you’ll need to access the theme code editor instead. So, back in the Themes section, click on Actions next to your Dawn theme, and then select Edit code.
  4. In the code editor, you’ll want to search for files related to the header. The best way to start is by looking for the header section in the left sidebar. Click on it to open the header template or section file.
  5. Once you’re in the header file, scroll down or use the find feature (Ctrl+F or Cmd+F on your keyboard) to search for SVG with the class icon-search. This SVG code represents the search icon.
  6. To replace the icon, you will need the SVG code of the new icon you want to use. Once you have that, simply replace the existing SVG code for the icon-search with your new SVG code.
  7. After making the change, be sure to click Save to apply your updates.

Remember, changing theme code can affect how your site looks and functions. Always make sure to preview your changes or test them on a duplicate theme before making them live, especially to ensure the new icon looks good and functions well on both desktop and mobile devices.

If you’re not comfortable making these changes yourself or need further customization, consider reaching out to a Shopify Expert or a professional developer.

Feel free to ask if you have any more questions or need further assistance!

1 Like
4

Thank you, this is working perfectly.

5

Thank your, perfectly