How do I change the search icon in Dawn 3.0?

Store Design
1

Hi,

I am looking to change my search icon in Dawn 3.0.

Please help. What code do i need to change? I have changed the cart icon myself, so i do have somewhat of an understanding.

Thank you

2

Hi @jacobflo ,

The search icon is inside the header.liquid. Open your code editor then open the Sections folder. Find the header.liquid file, then press Ctrl + F to search “icon-search”. It is an svg tag. See below of the exact code. You can change the path to whatever SVG file you have. I assume you are using SVG file.


Please mark as a solution if this helped you. Thank you
3

Thank you for the response!

When i input the code, it seems to only cover the whole screen.

This is the SVG code of the icon i want. And what inserted in place of the code you sent.
4

I think shopify deletes my response for some reason. But inserting that svg code only results in the whole screen being covered with the icon

5

Hi @jacobflo ,

If your working on SVG you have to make sure it matches the SVG viewbox.

If you have an icon from somewhere, you have to adjust the width of the icon accordingly. Change the 10px to the desired width. Place this code at the base.css file under the Asset folder

.icon-search {
width: 10px !important;
}

If this helps, please mark as a solution. Thank you

6

This did not work or do anything about the size.
should I add it somewhere specific or just at the bottom?

7

Hi @MidnightCHEF ,

May we have your website so we can use the inspect tool?

8

https://studiostars.myshopify.com/
code is, ashahs