When creating close buttons, usually for a card of some sort, I often find the need for some visual symbol resembling the cross/multiplication symbol we all associate with closing things.

In most cases, I find myself preferring to use the HTML entity.

×

But I've seen use of the "regular" x key on a traditional EN keyboard. As well as SVGs like those available at Feather and Hero Icons, so on.

What I would like to ask is whether there is a recommended option amongst these, and why? And if not, which option is most widely supported and/or most performant?

Thanks

Some background below, not necessary to read:

The Entity felt the best bet for me, for a while. I was a fan of having to load or package one less asset into my app, however small, if I had the opportunity.

This and, I'd assumed that what is the "x" key on my keyboard might mean different things and be different codes to different encoders across the wider world.

&times(;) will only ever be &times(;). That's my hope anyways.

That said, I've noticed some issues with what appears to be irremovable padding of that entity; whitespace above and below the character which grows rather large as the font size increases. As a result CSS cursor effects fire prematurely, at a point where the cursor is significantly (visibly) far from the symbol proper.

That and the inability to adjust the equivalent of the 'stroke-width' property for that symbol have me wondering if these newfangled SVGs, and all the unique features they bring, might be the best choice here regardless. `

CodePudding user response：

Based on my experience (as this seems like an opinionated topic), I don't think there is a recommended best practice. In the beginning, to achieve a working state, I would use a capital X since it's universally supported. Later on, the use of a SVG would be a good option primarily because SVGs are easily scaled for any device and are supported practically universally.