Replace twitter icon with the new "X"

If you want to replace the old twitter icon with the new "x" logo, you can follow this easy guide.


First of all, go ahead and edit your current theme's content, and choose to edit /snippets/social-icons.liquid. Search for "social_twitter", you will see something like this (depending on the theme you're using):


LOCAL & COMBINE


HIGHLIGHT & KINGDOM

SPLIT

The content of what you see inside the links (the highlighted area) will be different based on the theme you are using, but the idea is the same. The SVG (image file) will either be inside a snippet, like this:

{% render 'theme-symbols', icon: 'social_twitter' %}

Or plain in the file, like this:

<svg fill="none" height="120" viewBox="0 0 120 120" width="120" xmlns="http://www.w3.org/2000/svg"><path d="m110 28.6577c-3.762 1.5577-7.

In any case, you need to replace the SVG (either the complete code reference, or just the snippet, whatever we've highlighted in the screenshots above), with the following code snippet:

<svg width="100" height="100" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"/></svg>

Save the file and you're done! You should now see the new X logo instead of the old twitter one.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.