changing the old Twitter logo to the X logo

Marketing & Content Hub Email Marketing Tool
1

I’m having trouble changing the Twitter logo to the X logo in the code below. Could someone help me with this?

{% set size = “30px” %}

{% set borderRadius = “3px” %}

{% set linkStyle = “width:”~size~“;border-width:0px;border:0px;text-decoration:none;” %}

{% set imgStyle = “height:”~size~“;width:”~size~“;border-radius:”~borderRadius~“;border-width:0px;border:0px;” %}

{% macro render_social_icon(networkName) %}

{% set network = module[networkName] %}

{% if (networkName == “pinterest” and network.pinterest_media and network.enabled) or (networkName != “pinterest” and network.enabled) %}

{% if networkName == “pinterest” %}

{% set pinterest_media = module.pinterest.pinterest_media.src %}

{% endif %}

{% set logo = networkName ~‘-color.png’ %}

{% set urlOperator = “&” if “?” in page_meta.canonical_url else “&” %}

{% if module.link %}

{% set social_link_url = module.link ~ urlOperator ~ “utm_medium=social&utm_source=”|safe ~ networkName %}

{% elif content.email_type.blogRssChild %}

{% set social_link_url = content.rss_email_url %}

{% else %}

{% set social_link_url = page_meta.canonical_url ~ urlOperator ~ “utm_medium=social&utm_source=”|safe ~ networkName %}

{% endif %}

<a href=“{{ network.custom_link_format }}” target=“_blank” rel=“noopener” style=“{{ linkStyle }}” >

<img src=“{{ module_asset_url(logo) }}” class=“hs-image-widget hs-image-social-sharing-24” style=“{{ imgStyle }}” width=“{{ size }}” hspace=“5” alt=‘{{ "Share on " ~ networkName }}’ />

</a>

{% endif %}

{% endmacro %}

<div class=“hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing” data-hs-cos-general-type=“widget” data-hs-cos-type=“social_sharing” align=“center”>

{{ render_social_icon(‘facebook’) }}

{{ render_social_icon(‘twitter’) }}

{{ render_social_icon(‘instagram’) }}

{{ render_social_icon(‘youtube’) }}

{{ render_social_icon(‘email’) }}

{{ render_social_icon(‘tiktok’) }}

{{ render_social_icon(‘linkedin’) }}

</div>

2

Hi @raunylima
This can help you:
1. Clone the default Social sharing module in Design Manager and upload a square PNG of the new “X” mark; HubSpot will let you swap the icon as long as the replacement file name matches the original (e.g., twitter‑color.png) so no code changes are required HubSpot Knowledge Base
2. If you prefer to keep the old asset intact, drop x‑color.png into the same folder and insert this quick condition in your macro above the logo line: {% if networkName == “twitter” %}{% set logo = “x-color.png” %}{% else %}{% set logo = networkName ~ “-color.png” %}{% endif %}—everything else stays the same, including UTM tracking and link logic
3. Update the corresponding alt tag to Share on X for accessibility; the URL itself can remain pointed to twitter.com since that still resolves correctly
4. Publish the module, clear any CDN cache, then send a test email or preview a page to confirm the new icon displays and the link works
5. If you run multiple templates, use the cloned module everywhere so you don’t have to repeat the edit, or simply overwrite twitter‑color.png with the “X” file to propagate the change globally
6. Finally, keep the image dimensions the same (30 × 30 px) and radius at 3 px so the layout doesn’t shift in legacy emails or pages Hope this helps.

RubenB_0-1744951380316.png

Ruben Burdin

Real-Time Data Sync Between any CRM or Database | Founder @Stacksync(YC W24)

Disclamer: I occasionally use AI to organize my thoughts and provide better answers