Search Icon

Retired Boards Appdev Store Design

Topic summary

Goal: Change the search icon in Shopify’s Dawn theme.

Key context:

  • Dawn’s search icon is a hardcoded SVG symbol () in header.liquid, not a simple image swap. To change it, either replace the embedded SVG symbol code or use a separate SVG asset from the /assets folder rendered via the asset_img_url filter.
  • SVG (Scalable Vector Graphics) can be embedded inline (symbol/use) or referenced as a file; Dawn uses the symbol approach.

Latest updates:

  • The requester replaced the native code with a custom inline . Result: the icon became invisible, but the clickable search area remains functional.
  • Explanation: the provided SVG does not use (unlike Dawn’s implementation) and is more complex, likely causing rendering issues when directly swapped in.
  • Recommended approach: upload the custom SVG as a file to /assets and render it instead of the native symbol; use the referenced forum guide and adjust placement so it appears in the header where the icon belongs.

Status/outcome:

  • No final fix yet. The requester asked for step-by-step guidance on what to modify. Code snippet is central to understanding the issue. The thread remains open.
Summarized with AI on January 9. AI used: gpt-5.
1

How do I change the icon search icon on dawn

2

Hi Ti7,

The search icon in Dawn is a SVG symbol element that’s hardcoded into the theme so changing it is not as simple as adding a new image file - you would need to either use a different SVG and manually add that code to the theme, or implement a different technique for displaying an icon (like using an SVG file that’s stored in the /assets directory).

You can see where the icon is being hardcorded here on the most recent version of Dawn - you could replace this with code for an SVG, or remove the native approach and upload an SVG to the /assets directory and use the asset_img_url filter to render it on the header.

3

Hi when I do this and replace with the svg code (I will put below) the search icon just disappears however when i hover over where it was i can still click on it and when i do click on it it allows me to search.





4

The SVG code you’re sharing here is a slightly different implementation as it’s not using the tag, so swapping our the native version for this likely would cause an error. It’s also a much more complex looking SVG compared to the very basic one that Dawn uses, so I’d recommend including it as a file rather than coded into the theme file. There’s info in this forum post on how to add and display an SVG to a theme, but you’ll need to modify it a bit so that the icon shows up exactly where you want.

5

Ive tried to modify it but still getting nowhere could you help with what parts i need to modify and what to do