Twitter Icon X in SVG Bootstrap

Since Twitter got a new owner, the iconic blue bird has finally been released from its cage by Elon Musk. Subsequently, the new Twitter logo symbol ‘X’ officially replaced the blue bird.

Now, when one of our social media platforms changes its logo, an additional task is added for front-end developers: updating the UI design of social media share buttons by replacing the old Twitter bird icon with the new ‘X’ icon as per Elon’s command.

So, for those in need of the Twitter X icon in .SVG format for social media UI button design purposes, as of the publication of this article, the X icon is not officially available in the Bootstrap Icon library.

To address this, I have created a temporary solution for the Twitter X icon in SVG format while waiting for the official X icon to be available in Bootstrap Icons.

Here is the Twitter X icon in .svg format, following the Bootstrap Icons concept with a viewBox="0 0 16 16" size:

<!-- Twitter X icon Bootstrap --> 
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
  <path d="M9.5,6.8l5.8-6.2h-1.4l-5,5.4l-4-5.4H0l6.2,8.2L0,15.5h1.4l5.4-5.9l4.4,5.9H16L9.5,6.8z M2.1,1.6h2.2l9.7,12.9h-2.2L2.1,1.6z"/>
</svg>

In conclusion, this SVG format Twitter X icon can function just like the official icon from the Bootstrap Icons Library and can serve as a permanent solution without having to wait for an official release.

Bonus:

Here’s an alternative Twitter X icon in .svg format following the Heroicons design size pattern with viewBox=“0 0 24 24” and the icon’s point of view sized at 12px x 12px.

<!-- Twitter X icon Bootstrap --> 
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
  <path d="M13.1,11.1l4.3-4.7h-1l-3.8,4.1l-3-4.1H6l4.6,6.2l-4.7,5h1.1l4.1-4.4l3.3,4.4H18L13.1,11.1z M7.6,7.2h1.6l7.2,9.7h-1.6L7.6,7.2z"/>
</svg>

To learn more about .SVG format icons, read the article ‘Playing with SVG Icons.’