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":

Side menu showing Templates, Sections, Snippets, 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 - saving you time, money (in employing someone to do it for you) or stress, please consider buying me a coffee via Ko-Fi as a thank you, as you might if a friend helped you out. Thank you :)

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

Back to blog

2 comments

This was an excellent instruction on making the change we needed. We only needed to adjust the style=“width: 18px;” down to 14px in [ icon-x.liquid ] to be proportionate to our other icons. Thanks!

Jim Van Zile

Great! Thanks for taking the time to comment, I’m glad the guide was helpful. After deciding to add a LinkedIn icon to my site I realised I also had my new X icon slightly too big, reducing it down to 16px, so I will probably update this guide to make it 16px instead (although that would still have been 2px too big for you). I’m going to turn my attention to writing some guides on blog tweaks as in coming to reply to your comment I discovered there is no facility to write replies, so I cobbled something together to be able to do so :) It may result in some guides on blog tweaks!

Fiona Reeves

Leave a comment

Please note, comments need to be approved before they are published.