Twitter Icon X in SVG Bootstrap

The Twitter X icon from Bootstrap Icons Library is not yet available; here's a solution for redesigning social media web buttons' UI.

Smartphone twitter Icon X social media.
Smartphone twitter Icon X social media. ( Picture by Unsplash / Julian Christ )

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="" 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"/>

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.


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="" 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"/>

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

comments powered by Disqus
Fauzan My avatar

Written by Fauzan My

Iam obsessed with elegant and simple design, whether it involves complex creative processes or simplicity. Here, I combine both: design and coding, searching for best practices.

More from Fauzan My

Visual Studio Code.
Problem solving: Hugo WARN Module is not compatible
HTML pseudo element.
How to Create Article Card Links
Social icon.
Complete Guide to Favicon Icons for Browsers, iOS, and Android

Related Post