Resize header icons

Topic summary

A user needed to resize the hamburger menu, search, and cart icons in their Shopify store header at nosafetyskateboards.com.

Solution provided:

  • Add custom CSS code to the theme’s CSS file (base.css or custom CSS)
  • Target .header__icon .svg-wrapper and .header__icon--menu selectors
  • Set width and height to 24px with !important flags

Implementation steps:

  1. Navigate to Online Store → Themes → Edit code
  2. Locate CSS file (custom or base.css)
  3. Add the provided CSS at the end of the file

Outcome:
Initially, the cart and search icons resized correctly, but the hamburger menu disappeared on mobile. The issue was resolved when the user discovered they had entered the code incorrectly. After correcting the input, all three icons displayed properly at the desired size.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.

How can i resize the the hamburger, search and cart in the header?

https://nosafetyskateboards.com/

Hello! @Lcarey744 Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
body .header__icon .svg-wrapper {
    width: 24px !important;
    height: 24px !important;
}
body .header__icon--menu {
    position: initial;
    width: 24px !important;
    height: 24px !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

Thank you, the cart and search are good. But the hamburger is missing now on mobile

Sorry I actually entered it wrong, thank you!

1 Like