Shopify Tips: Changing your Twitter icon to an X icon

How to change your Twitter bird icon to a new X icon in the Shopify Dawn version 13 theme.

Introduction

After the new Winter '24 Shopify features were launched I decided it was finally time to update my Shopify theme from an ancient version of Dawn (version 2) to the latest version - at the time of writing that's Dawn version 13. (Updating themes is a bit of a pain for me as I have lots of bits of custom code I've added that need copying over and making work in the new theme, so I don't do it very often!) It was a bit disappointing to find that the latest version of the theme still had the bird icon for Twitter/X. I went looking for the X icon code I'd need (like a very long number), so I could make the alteration myself, and came across a few different examples of updating the icon. None of these worked correctly for me (either on version 2 of Dawn, or my new version 13). I ended up having to make a few tweaks. So, it's important that you know that if you have Dawn version 13 my example should work straight away for you, but if you have a different theme or a different version it may not do quite what you want. Examples of problems I encountered were a big black X displayed amongst my small white icons, and just a triangle being displayed. I managed to resolve these. I also didn't like the way that examples out there just recommended overwriting the Twitter icon code file, this feels sloppy to me. Creating a new X icon file to use, keeping the original Twitter one intact, was what I decided to do.

Create the new X icon snippet

After navigating to your themes and choosing "Edit code..." go to the "Snippets" area and choose "+ Add a new snippet":

Give your new snippet the filename:

icon-x.liquid

(Note that you will probably just name it 'icon-x' and Shopify will add the '.liquid' itself.) Then copy and paste the following HTML code (from the left hand panel below) into the file, so that this is the only contents of the file:

See the Pen Shopify: change Twitter bird icon to new X icon by Fiona Reeves (@freeves) on CodePen.

Save the new file. (Note the fill="currentColor" section - this is what will make your icon display in the same colour as your other icons that it is next to.)

Activate your new snippet

At the moment you've created your new X icon, but it's not being displayed yet. To change your theme to show the new snippet instead of the old Twitter snippet you need to edit the snippet file called:

social-icons.liquid

Find the line in the file (probably around line 48, but you could just do a search in the file) that says:

{%- render 'icon-twitter' -%}

and change it to say this instead:

{%- render 'icon-x' -%}

Save the file. That's it, you're done! The X icon should now be displaying correctly in place of the bird icon, but if it isn't you can simply change the render 'icon-x' back to render 'icon-twitter' and you're back to how it was, no harm done.

Found this useful?

If this guide has helped you please leave a comment to let me know :) If it's really helped you, or you're just feeling generous, please consider buying me a coffee via Ko-Fi as a thank you - or buy an item from this website.

If you want to suggest other things you'd like me to write a Shopify guide about please let me know!