How to alter header icons in the Spark theme?

Store Design
, , ,

Topic summary

A user seeks to customize header icons in Shopify’s Spark theme with three specific changes:

Requested modifications:

  • Replace hamburger menu icon (≡) with a plus sign (+)
  • Change account/head icon to display the text “Account”
  • Replace cart icon with a custom design

Solution provided:

The support team (BSS-Commerce) delivered partial implementation:

  1. Account icon → “Account” text:

    • Edit header.liquid file to replace SVG icon code with text “Account”
    • Add CSS styling in theme.css to format the text (16px min-width, block display, bold font-weight)

  2. Cart icon customization: Awaiting the user’s custom cart design image before implementation

Status: The hamburger-to-plus icon change hasn’t been addressed yet. The conversation includes preview links and screenshots demonstrating the expected results. Technical implementation requires accessing Shopify’s theme code editor through Online Store → Themes → Edit Code.

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

Hello,

Looking to change the header icons in the Spark theme…I would like the hamburger icon to change from the “=”/hamburger icon to a " + " and I would like the “account/head” icon to change to the word “account” and the “cart image” to change to another “cart image” i have designed.

Site Preview is here : https://9w3i3djpqg2r42ph-7472873.shopifypreview.com

Thank you for any insight.

2

Hi @kdhyatt

Your preview link has expired

view (43).png
view (43).png1919×1028 38.6 KB

Please re-send us the URL to your website (with a password if applicable), and some screenshots about what you want to change to make it easier for us to check it. Thank you!

3

Here you go : https://ya6w3u5h2frl9i0z-7472873.shopifypreview.com

4

https://ya6w3u5h2frl9i0z-7472873.shopifypreview.com

Screen shot :

Screen Shot 2023-03-07 at 9.21.09 AM.png
Screen Shot 2023-03-07 at 9.21.09 AM.png282×102 1.87 KB

5

Hi @kdhyatt

  • Is this the result you expect?

view (2).png
view (2).png1919×952 287 KB

(We haven’t changed the cart icon yet because we don’t know your design, You can send your cart icon so we can help you edit.)

  • To change the “Login” icon to the “Account” text, follow these steps:

Step 1: Go to Online store => Themes => Edit code:

![view (3).png|1919x955](upload://52lWJoaUeeh9R8aKUEgQtwNZ3Jg.png)

Step 2: Find the file “header.liquid” and edit the following code:

into:


    
        
             Account

We removed the SVG icon to replace it with “Account”

Step 3: Find the file “theme.css” and paste the CSS code to align the text “Account”:

.header__icon-touch.header__icon-touch--account {
    min-width: 61px;
    display: block;
    font-weight: bold;
}

We hope that this can help you.