How can I replace the hamburger icon in my Dawn theme?

Topic summary

A user seeks to replace the default hamburger menu icon in their Dawn theme Shopify store with a custom image.

Initial Request:

  • User wants to swap the hamburger icon with a specific custom image (referenced via upload link)
  • Site URL provided: milkymotorsports.com

Solution Provided:
A community member (Dan-From-Ryviu) offers step-by-step guidance:

  1. Navigate to Online Store > Themes > Edit Code
  2. Open the icon-hamburger.liquid file
  3. Replace existing code with custom markup (code snippet provided but appears corrupted/reversed in the conversation)

Follow-up Requests:

  • User asks for code to implement a checkerboard pattern icon as well
  • Additional code provided for the icon-hamburger.liquid file
  • User requests CSS to make the icon 1.5x larger on mobile
  • CSS solution provided targeting .header__icon.menu--icon with 36px width/height dimensions

Status: The discussion appears resolved with complete code solutions provided for custom icon replacement and mobile sizing adjustments.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.

My site is:

https://milkymotorsports.com/

Can someone pls provide code to replace my hamburger menu icon? I’d like to use the menu icon on https://pipemasters.vans.com/

@milkymotorsport , I need access to theme code to implement this, feel free to contact me.

Hi @milkymotorsport

This can be done using the custom code, Please share collab access

Go to your Online store > Themes > Edit code > open icon-hamburger.liquid file, replace code in this file with this code


1 Like

@Dan-From-Ryviu thank you! Can you also do the code for this?

Hi @milkymotorsport , please replace existing code in icon-hamburger.liquid with this one


1 Like

@Dan-From-Ryviu can you provide code to make the icon 1.5x bigger on mobile?

https://milkymotorsports.com/

Please add this CSS code at the bottom of your CSS file

.header__icon--menu .icon {
height: 36px !important;
width: 36px !important;
}