Jan's Development Microblog
Go back to blog overview
| Jan Valkenburg | general | Reading time: 2 min

The new Twitter logo is just an HTML entity

On July 23, 2023, the well-known company Twitter was rebranded to X by Elon Musk. But did you know that the logo of X is just an HTML entity?

The 𝕏 is the "Mathematical Double-Struck Capital X" character in Unicode, and its codepoint is U 1D54F. It was added in Unicode 3.1 in 2001. It can be pasted into HTML using its HTML entity, 𝕏. To use it in CSS, you have to use \1D54F.

What is an HTML entity

An HTML entity is a sequence of characters that represent a specific character or symbol and is used to display that character on a web page. HTML entities are particularly useful when you want to include special characters, symbols, or reserved characters in your HTML document without causing rendering issues or confusion with HTML syntax.

How do I update the Twitter logo?

As we, frontend developers, are still busy upgrading the Twitter logo to the new X logo, I was thinking maybe I should write down some tricks on what you need to include to use the new Twitter logo. Depending on your code, you can edit your HTML or CSS to match the example below. In case you're using a third-party solution, you might need to update the plugin.

.twitter::after {
  content: '\1D54F';
}

<a href="https://twitter.com/">𝕏</a>

Final word

I hope you found this blog helpful, and that it made it easier for you to replace the Twitter symbols on your website with the new 𝕏 logo. Personally, I will keep this post as a reference, as I know I might forget the HTML entity code over and over again.

「過去にしがみつくことはできません。 どんなに強く握りしめても、もう終わってしまいますから。」— You can't cling to the past. Because no matter how tightly you hold on, it's already gone. -- Natsu Dragneel, Fairy Tail.