Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

All the X’s

This post explains all the different “x” characters currently available in HTML. It covers the various HTML entities and provides some examples and tips. Also explains the difference between the often confused “Multiplication X” and “Multiplication Sign”, and which is better for symmetrical buttons and links.

Pro Tip: Looking for the best “x” for a symmetrical button or link? Use the Multiplication X character for best results.

Contents

The Letter X

First is the common letter “x”. It’s used in the English language, looks like this:

x

No HTML entity required for the letter x. You can write/display it as lowercase “x” or uppercase “X”. Depending on the font, the letter “x” may be symmetrical, but usually in general it’s not. So not very good for things like “x” (close) buttons.

Multiplication X

Used for maths. Nice and symmetrical “x” symbol. Works great for “x” (close) buttons. The character looks like this:

The HTML entity is either of the following:

✕
✕

Note that ✕ is preferred when going for a lighter/thinner character display.

Heavy Multiplication X

Same as the previous, but heavier set character weight. Used for maths. Also good for “x” (close) buttons. It looks like this:

The HTML entity is either of the following:

✖
✖

Note that ✖ is preferred when going for a heavier/thicker character display.

Multiplication Sign

The Multiplication Sign is very similar to the previous “Multiplication X” and “Heavy Multiplication X”. But there are some obvious differences. For example, Multiplication Sign is not as tall/wide as Multiplication X. The size difference affects line-height and character display relative to other on-screen elements. Multiplication Sign looks like this:

×

Here is a side-by-side comparison using the same font-size (Multiplication Sign on the left, Multiplication X and Heavy Multiplication X on the right):

× ✕ ✖

Here are the HTML entities for the Multiplication Sign:

×
×
×
×

Note: Multiplication X (or Heavy Multiplication X) is better for buttons where the “x” needs centered both vertically and horizontally (like in a small circle button), as its line-height is more center/middle than the Multiplication Sign or Ballot X.

Ballot X

The ballot “x” is meant to look like someone marked an “x” on a ballot or something. Probably a throwback to days when voting was real on actual paper ballots.

The HTML entity is either of the following:

✗
✗
✗

Heavy Ballot X

Same as regular ballot “x”, only heavier display for when you really mean it. Like hey, I really voted. This heavy “x” character looks like this:

The HTML entity is either of the following:

✘
✘

Mathematical Double-Struck Small X

This is the “small” (lowercase) version of the new Twitter logo/icon:

𝕩

The HTML entity is either of the following:

𝕩
𝕩
𝕩

Mathematical Double-Struck Capital X

And here is the “capital” (uppercase) version of the new Twitter logo/icon:

𝕏

𝕏
𝕏
𝕏

You can find more details about these and other HTML entities at reference sites such as this one.

About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.