So the 𝕏 logo above is taken from the X Brand toolkit and it looks ok and is a .png graphic. They also provide a .svg so you can create whatever size you need. But thats extra work managing images and who needs that?
The 𝕏 just above here isn't an image, its just a big single text character. <span style="font-size: 128pt;">𝕏</span>. This is much easier to deal with and the differences are imperceptible unless you line them up side by side.
Wait, whats this, the 𝕏 is just a font character!
Instead of using an image you can just use a Unicode symbol which has been around since 2001. Its called the Mathematical Double-Struck Capital X. Not exactly catchy but its helpful nonetheless. Because it has been around so long, it has widespread adoption in typefaces you might use. It also has what is known as an html entity, which makes it easy to type. Try 𝕏 on any web page editor and you'll see.
TL:DR — Mathematical Double-Struck Capital X was added to Unicode 3.1 in March 2001. Any difference from the X Corp design is imperceptible to me and it is trivial to add to any html page using and html entity 𝕏 which renders as 𝕏. Perfect!
HTML entity for "Mathematical Double-Struck Capital X"
The html entity 𝕏 renders as 𝕏 and because it is a Unicode glyph it can be sized however you like.
Bootstrap styles
I use Joomla, and it in turn used Bootstrap, so styling the 𝕏 is just a case of using any Bootstrap styling element.
Display 1 𝕏
Heading 2 – 𝕏
Heading 3 – 𝕏
Heading 4 – 𝕏
Heading 5 – 𝕏
Heading 6 – 𝕏
.text-primary – 𝕏
.text-secondary – 𝕏
.text-success – 𝕏
.text-danger – 𝕏
.text-warning – 𝕏
.text-info – 𝕏
.text-light – 𝕏
.text-dark – 𝕏
.text-muted – 𝕏
.text-white – 𝕏
