Unicode character for "X" cancel / close?

Question

I want to create a close button using CSS only.

I'm sure I'm not the first to do this, so does anyone know which font has an 'x' the same width as height, so that it can be used cross-browser to look like a close button?

score 685 · Accepted Answer · edited Dec 09 '20 at 11:12

685

✖ works really well. The HTML code is ✖.

An alternative is &#x2715: ✕

edited Dec 09 '20 at 11:12

Steve Bennett

114,604
39
168
219

answered Feb 08 '12 at 20:43

eipark

7,442
3
24
33

9

Note that you have to use a font that supports this character. I think DejaVu looks nice for that. I think `Lucida Sans Unicode` and `Arial Unicode MS` also support such unicode symbols. If you don't use a font that supports these characters on some browsers (especially old IE) all you will get are rectangles indicating unsupported symbols. I use a stripped down version of DejaVu for such symbols. – panzi Apr 06 '13 at 17:23
See the comment above by panzi. – eipark Jun 03 '13 at 16:38
That is an excellent character for the purpose. Do you know what that character is actually "supposed" to be? – Ashley Strout Nov 01 '13 at 06:31
7

It is called 'Heavy Multiplication X' I believe - http://www.fileformat.info/info/unicode/char/2716/index.htm – eipark Nov 01 '13 at 15:12
11

2 years later, this comment just made my project kick that extra amount of ass I was looking for! – NominalAeon Feb 23 '14 at 21:57
1

Now if only we could change the color in FireFox 32.0, its always red even when setting the color css – Gerrit Brink Sep 10 '14 at 08:24
Four years later, doing Java Swing development and this works great on a JButton! Usage: JButton button = new JButton("✖"); – Blake Neal Nov 15 '16 at 18:05
1

I found something not so amazing about this symbol. You can't control its color. It's always black. I've tried a class with color:#fff, a style with color:#fff, and even tried to apply a span wrapper. Nada. Always black. – TARKUS Jan 08 '17 at 13:47
@Tarkus its' color is the CSS `color` value of the element that surrounds it (or any parent) – George Katsanos Jan 10 '17 at 16:10
6

Another (more attractive IMO) option is ✕ – Andrew Hendrie Mar 10 '17 at 13:49
this is the best and simplest answer! No css no bootstrap just a one liner! BRAVO! – Tk1993 Oct 09 '17 at 07:50
Unfortunatly you can't colorized ✖ with css (e.g. color: white), but with × you can do it. – Alex Oct 16 '17 at 11:34
Works also for Windows Presentation Foundation (WPF) in .NET – Gabriel Oct 19 '21 at 07:19

Roko C. Buljan · Answer 2 · 2023-01-25T15:55:42.477

HTML

✕ ✕ ✓ ✓
✖ ✖ ✔ ✔

✗ ✗
✘ ✘

× × ×

CSS

Inside a ::before or ::after pseudo-element use the escaped \ Unicode HEX value like:

[class^="ico-"], [class*=" ico-"] {
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}

.ico-times::before { content: "\2716"; }
.ico-check::before { content: "\2714"; }

<i class="ico-times" role="img" aria-label="Cancel"></i>
<i class="ico-check" role="img" aria-label="Accept"></i>

Use cases:

Language	Syntax	Example
HTML	✕	`<button class="close" type="button">✕ Close</button>`
CSS	\2715	`.close::before { content: '\2715'; }`
JavaScript	\u2715	`document.querySelector(".close").prepend("\u2715")`

https://home.unicode.org/

Thanks for the CSS escaping tip – Alex from Jitbit Nov 27 '20 at 09:59 — Alex from Jitbit, Nov 27 '20 at 09:59

score 93 · Answer 3 · edited Feb 08 '12 at 05:03

93

What about using the ×-mark (the multiplication symbol), × in HTML, for that?

"x" (letter) should not be used to represent anything else other than the letter X.

edited Feb 08 '12 at 05:03

Cody Gray - on strike

239,200
50
490
574

answered Mar 18 '11 at 14:38

Haza

2,991
1
16
13

21

Going with your logic - also x-times should represent only x times. I would say either use an image or the word close. – easwee Mar 18 '11 at 14:50
1

Yup, this is also true, I know. – Haza Mar 18 '11 at 14:52
10

"x" (letter) should not be used to represent anything else that the X letter. - who says that? if thats just you whats the logic behind that. thanks – Valentin Kuzub Sep 26 '11 at 21:41
1

You can also use multiplication character ' × '. Taken from [this question](http://stackoverflow.com/questions/7912989/css-font-twitter-like-close-button-what-did-i-missing). – Kamil Sarna Jan 09 '12 at 11:28
1

Best answer IMHO. I think all browsers will support this and if Bootstrap is using it... they usually follow best practices. – Rui Marques Nov 19 '13 at 16:01
Love this! Easier to remember than ✖ – Mike Grace Aug 19 '14 at 00:20
Yes, the letter *x* [should _definitely_ not be used to represent multiplication or a close button](https://wesbos.com/times-html-entity-close-button/), _because it's a different character_. It's often done by people who are too lazy, in a hurry, or who don't care about quality. Just like people sometimes use a lower-case _b_ to represent a musical flat symbol, but that doesn't make it a good idea to follow their example. – iconoclast May 09 '18 at 20:48

score 74 · Answer 4 · edited Oct 20 '15 at 15:14

× × or × (same thing) U+00D7 multiplication sign

× same character with a strong font weight

⨯ ⨯ U+2A2F Gibbs product

✖ ✖ U+2716 heavy multiplication sign

There's also an emoji ❌ if you support it. If you don't you just saw a square = ❌

I also made this simple code example on Codepen when I was working with a designer who asked me to show her what it would look like when I asked if I could replace your close button with a coded version rather than an image.

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>

score 27 · Answer 5 · answered Jan 12 '16 at 21:33

27

✕ is another great one that's not too thick. The HTML code is ✕, or 2715 in hex.

answered Jan 12 '16 at 21:33

Emil Laine

41,598
9
101
157

John Lehmann · Answer 6 · 2013-11-19T16:59:08.013

21

As @Haza pointed out the times symbol can be used. Twitter Bootstrap maps this to a close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

edited Nov 19 '13 at 16:59

answered Mar 28 '13 at 20:31

John Lehmann

7,975
4
58
71

5

Informative by pointing that Bootstrap uses this but it is a duplicated answer, it is the same as @Haza 's. – Rui Marques Nov 19 '13 at 16:03

score 15 · Answer 7 · answered Apr 15 '21 at 10:06

15

― 2021 Update

As of Unicode 7.0 (June 2014): U+1F5D9 "Cancellation X"

answered Apr 15 '21 at 10:06

Adám

6,573
20
37

1

I can't visually see that as a "cancel" icon. – Sơn Trần-Nguyễn Nov 09 '21 at 23:33
2

@SơnTrần-Nguyễn OK, but it is both what OP asks for and very similar to all the other answers here. – Adám Nov 10 '21 at 08:28
5

Semantically, this is the only correct answer here. – user90726 Feb 13 '22 at 00:56

score 13 · Answer 8 · answered Oct 28 '20 at 17:05

13

&#x274C;

looks like:

❌

its good for me :)

answered Oct 28 '20 at 17:05

danday74

52,471
49
232
283

score 9 · Answer 9 · answered Mar 28 '16 at 12:27

This is probably pedantry, but so far no one has really given a solution "to create a close button using CSS only." only. Here you go:

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg

score 7 · Answer 10 · answered Apr 26 '14 at 22:22

7

I prefer Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

The icon you would be looking for is fa-times. It's as simple as this to use:

<button><i class="fa fa-times"></i> Close</button>

Fiddle here

answered Apr 26 '14 at 22:22

prograhammer

20,132
13
91
118

1

This is not a CSS solution. – rnevius Apr 17 '15 at 13:42
3

@mevius Not sure what you are trying to say? Font Awesome doesn't require javascript and they **are** fonts. The OP asks "which font...". – prograhammer Apr 17 '15 at 15:53
@mevius Font Awesome is totally CSS - it's just an excellent wrapper for unicode: .fa-window-close::before {content: "\f410";} – alexbk66 Mar 11 '21 at 01:32

score 6 · Answer 11 · answered Nov 28 '16 at 14:49

6

there's another one not mentioned here - nice thin - if you need that kind of look for your project: ╳

&#x2573; or decimal: &#9587;

answered Nov 28 '16 at 14:49

Picard

3,745
3
41
50

Iggy · Answer 12 · 2017-02-25T13:55:03.157

5

× and font-family: Garamond, "Apple Garamond"; make it good enough. Garamond font is thin and web safe

proper close X

edited Feb 25 '17 at 13:55

answered Jan 28 '15 at 01:00

Iggy

2,014
25
21

The only **true** web safe fonts are the generic families: serif, sans-serif & monospace. It is extremely unlikely that the average visitor to your site will have either of the fonts mentioned above available on their system. Garamond doesn't seem to be included by default in *any* OS, though you could include this one with [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face). Apple Garamond however is a proprietary font historically used by Apple Inc. in their marketing material and not available for general use let alone in a commercial project. – Besworks May 19 '22 at 16:42

score 3 · Answer 13 · answered Jul 22 '12 at 19:48

This works nicely for me:

<style>
a.closeX {
    position: absolute;
    right: 0px; top: 0px; width:20px;
    background-color: #FFF; color: black;
    margin-top:-15px; margin-right:-15px; border-radius: 20px;
    padding-left: 3px; padding-top: 1px;
    cursor:pointer; z-index: -1;
    font-size:16px; font-weight:bold;
}
</style>
<div id="content">
    <a class="closeX" id="closeX" onclick='$("#content").hide();'>&#10006;</a>
    Click "X" to close this box
</div>

Richard JP Le Guen · Answer 14 · 2015-06-13T06:00:49.193

3

Forget about a font and use a background image!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <title>Select :after pseudo class/element</title>
        <style type="text/css">
            .close {
                background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
                text-indent:-10000px;
                width:20px;
                height:20px;
            }
        </style>
    </head>
    <body>
        <input type="button" class="close" value="Close" />
        <button class="close">Close</button>
    </body>
</html>

This will be more accessible for users visiting the page with a screen reader.

edited Jun 13 '15 at 06:00

answered Mar 18 '11 at 14:43

Richard JP Le Guen

28,364
7
89
119

1

Why would an image be "more accessible"? – jfriend00 Dec 27 '20 at 21:10
3

@jfriend00 it's not so much that the background image is more accessible, it's that using the word "close" (or the words "close dialog") would be clearer to a screen reader user than some random X or x-like character. The button would be labelled per what it does and not how it looks. Maybe there are better ways though - there might be a dedicated ARIA role for close buttons. – Richard JP Le Guen Jan 02 '21 at 17:01
1

I see your point now. But, `aria-label="Close"` is a good way to go (as shown here in this [W3 example](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html) or this [MDN example](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)) and then you can use any visual indicator you want without compromising the accessibility. – jfriend00 Jan 02 '21 at 17:30
1

Yup `aria-label` could probably work great here - but ARIA only became a completed recommendation in 2014 and I wrote this answer in 2011! Equally, the ARIA Authoring Practices also includes mis-use of `aria-label=` as an example of [ARIA which can cover up or override semantics or content](https://www.w3.org/TR/wai-aria-practices-1.1/#no_aria_better_bad_aria) in a way which is damaging to accessibility. WAI-ARIA can be easy to get wrong, and hard to test - unless a team has some dedicated a11y testing for ARIA, I discourage its use because it can do as much harm as good. – Richard JP Le Guen Jan 17 '21 at 04:03
1

I was responding to a comment from this year, so the context of that is now, not 2011 and you can certainly update your answer to be a more current recommendation if you want. – jfriend00 Jan 17 '21 at 04:07
There are plenty of other answers that reflect that approach, I don't think it's best for stackoverflow for all the answers to just converge on the same solution. The answer, the number of votes it has, and its resulting position relative to the top answer seem appropriate to me. However if you feel it should be updated you are just as free to edit it as I am. – Richard JP Le Guen Jan 17 '21 at 04:23

score 3 · Answer 15 · answered Apr 30 '19 at 10:39

3

× is better than ✖ as ✖ behaves strangely in Edge and Internet explorer (tested in IE11). It doesn't get the right color and is replaced by an "emoji"

answered Apr 30 '19 at 10:39

Raphael Pinel

2,352
24
26

1

this should have more votes. I was running into an issue with css and the emoji. By using `×` I am able to now edit the css – 730wavy Nov 04 '22 at 01:53

Maduro · Answer 16 · 2015-11-22T03:00:02.897

2

This is for people who want to make their X small/big and red!

HTML:

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
    <p>close</p>
</div>

<div class="red-x big-x">&#10006;</div>

CSS:

.red-x {
color: red;
}

.big-x {
font-size: 70px;
text-align: center;
}

edited Nov 22 '15 at 03:00

answered Nov 17 '15 at 19:42

Maduro

713
5
23
44

score 2 · Answer 17 · answered Sep 11 '17 at 12:41

2

Using modern browsers you can rotate a + sign:

.popupClose:before {
    content:'+';
}
.popupClose {
    position:relative;
    float:right;
    right:10px;
    top:0px;
    padding:2px;
    cursor:pointer;
    margin:2px;
    color:grey;
    font-size:32pt;
    transform:rotate(45deg);
}

then simply place the following html where you need:

 <span class='popupClose'></span>

answered Sep 11 '17 at 12:41

user1432181

918
1
9
24

Or you could use (with a ) – user1432181 Mar 07 '19 at 18:36

score 1 · Answer 18 · answered Apr 22 '17 at 17:39

You can use text that is only accessible to screen readers by placing it in a span which you hide in an accessible way. Place the x in the CSS which can't be read by screen readers, thus won't confuse, but is visible on the page, and also accessible by keyboard users.

<style>
.hidden {opacity:0; position:absolute; width:0;}
.close {padding:4px 8px; border:1px solid #000; background-color:#fff; cursor:pointer;}
.close:before {content:'\00d7'; color:red; font-size:2em;}
</style>

<button class="close"><span class="hidden">close</span></button>

score 0 · Answer 19 · answered Sep 19 '22 at 09:34

0

Just in case, someone is searching for the right and wrong marks:

char rightMark = '\u2713';
char wrongMark = '\u2717';

Will print:

✓ Right Mark
✗ Wrong Mark

answered Sep 19 '22 at 09:34

Harold Castillo

2,006
19
23

Unicode character for "X" cancel / close?

19 Answers19

Use cases:

― 2021 Update

Linked