I just needed the new Twitter X Logo now for a project that uses the Bootstrap Icon Library. So I created a workaround that should work until the logo is officially included in the Bootstrap Icons.

With this CSS snippet, you can use the new Twitter X Logo in your project. The downside: it's a quick and temporary solution, and therefore you have to resize the icons manually. The default size is 16x16 pixels.

How does it work?

To make it as simple as possible, I simply created a new CSS class "bi-twitter-x". I previously converted the SVG Twitter X logo into a string, which I shortened for the article. You can find the full code in the CodePen. The image is used as background image and is always squared using the CSS property "aspect-ratio". Therefore only the height has to be adjusted to scale the logo.

/* New Class: bi-twitter-x */.bi-twitter-x:before{content:'';background-image:url('data:image/svg+....);background-size:cover;height:16px;aspect-ratio:1/1;}

Sizing is not easy, because it's not a web font (yet)

I have added some custom size to fit the logo to the size of the headlines. You can adapt these classes to your project if you like.

/* Example: Standalone logo sizes */h1.bi-twitter-x:before,.fs-1.bi-twitter-x:before{height:40px;}h2.bi-twitter-x:before,.fs-2.bi-twitter-x:before{height:32px;}h3.bi-twitter-x:before,.fs-3.bi-twitter-x:before{height:28px;}h4.bi-twitter-x:before,.fs-4.bi-twitter-x:before{height:25px;}

CodePen Twitter X Logo for Bootstrap Icons

Do you like my Stuff?

Sign up for my Newsletter:https://simonkoehler.com/newsletter

Thanks for reading! (100% human written mthrfckrs!)