How to draw a checkmark / tick using CSS?

Question

How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.

EDIT Icon fonts are a great suggestion. I was looking for something like this.

Have you looked at icon fonts? http://fortawesome.github.io/Font-Awesome/icons/ — cimmanon, Feb 23 '14 at 13:31
This would be marginally on-topic if you showed an image of a symbol that you wish to produce, but even then, you should also show your best effort at achieving that rather than ask others to do all the job. (And it’s questionable whether this would make sense. If you wish to use a specific graphic symbol, create an image for it. Or maybe draw it with the Canvas API. CSS isn’t a graphics program.) — Jukka K. Korpela, Feb 23 '14 at 17:12
@JukkaK.Korpela I did show effort by answering my own question on this one. The reason for the question is to 1) Keep a record of my own solution so I don't forget, 2) See if there are better solutions. For example, icon fonts are new to me. — dayuloli, Feb 23 '14 at 17:40
You clarify a question by editing it, to specify *what you are asking about* (rather than commenting on answers), not by posting an answer. A question should be completely understandable without reading thru the comments and answers. — Jukka K. Korpela, Feb 23 '14 at 19:50
@JukkaK.Korpela I edited the question to clarify after your suggestions. I had the answer before I posted the question, I was just in the spirit of sharing that answer with others. I admire your work and your book (which I might just grab a copy now!), I will keep your advice in mind for the future. — dayuloli, Feb 23 '14 at 20:12

score 110 · Answer 1 · edited Feb 11 '23 at 23:14

You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.

DEMO 1

.checkmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_stem {
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark_kick {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

<span class="checkmark">
  <div class="checkmark_stem"></div>
  <div class="checkmark_kick"></div>
</span>

DEMO 2 (With circle)

.checkmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_circle {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: green;
  border-radius: 11px;
  left: 0;
  top: 0;
}

.checkmark_stem {
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #fff;
  left: 11px;
  top: 6px;
}

.checkmark_kick {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #fff;
  left: 8px;
  top: 12px;
}

<span class="checkmark">
  <div class="checkmark_circle"></div>
  <div class="checkmark_stem"></div>
  <div class="checkmark_kick"></div>
</span>

I like it. Here's one with only 1 element: http://jsfiddle.net/mirohristov/awayF/473/ — Miro, Mar 04 '15 at 19:41
Here's one without the circle with only one element: http://jsfiddle.net/awayF/810/ — brismuth, Aug 31 '15 at 22:52
@SERG Play around with the pixel values for `left` and `top` and you'll quickly come across the answer! — Joe Moore, Aug 24 '22 at 13:44

score 96 · Answer 2 · edited Feb 10 '23 at 16:32

96

Here is another CSS solution. It takes fewer lines of code.

ul li:before {
  content: '\2713';
  display: inline-block;
  color: red;
  padding: 0 6px 0 0;
}

ul li {
  list-style-type: none;
  font-size: 1em;
}

<ul>
  <li>test1</li>
  <li>test</li>
</ul>

edited Feb 10 '23 at 16:32

shs

3,683
1
6
34

answered Feb 23 '14 at 13:12

Kheema Pandey

9,977
4
25
26

Henry · Answer 3 · 2016-12-11T06:14:29.837

66

Do some transforms with the letter L

.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}

<div class="checkmark">L</div>

edited Dec 11 '16 at 06:14

answered Mar 18 '15 at 12:15

Henry

1,041
1
14
14

2

It is cool trick, but transformation should be done in virtual :after element, so container remains normal inline block without transformations - for example: https://jsfiddle.net/viliusl/1vgxwLya/5/ – ViliusL Jan 30 '19 at 08:46

score 62 · Answer 4 · edited Apr 11 '20 at 11:36

62

only css, quite simple I find it:

.checkmark {
      display: inline-block;
      transform: rotate(45deg);
      height: 25px;
      width: 12px;
      margin-left: 60%; 
      border-bottom: 7px solid #78b13f;
      border-right: 7px solid #78b13f;
    }

<div class="checkmark"></div>

edited Apr 11 '20 at 11:36

habib

1,454
17
31

answered Feb 20 '20 at 14:29

Petronella

2,327
1
15
24

score 27 · Answer 5 · answered Feb 28 '15 at 02:06

27

An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders

It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform

Example

li {
  position: relative; /* necessary for positioning the :after */
}

li.done {
  list-style: none; /* remove normal bullet for done items */
}

li.done:after {
  content: "";
  background-color: transparent;
  
  /* position the checkbox */
  position: absolute;
  left: -16px;
  top: 0px;

  /* setting the checkbox */
    /* short arm */
  width: 5px;
  border-bottom: 3px solid #4D7C2A;
    /* long arm */
  height: 11px;
  border-right: 3px solid #4D7C2A;
  
  /* rotate the mirrored L to make it a checkbox */
  transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

To do:
<ul>
  <li class="done">Great stuff</li>
  <li class="done">Easy stuff</li>
  <li>Difficult stuff</li>
</ul>

answered Feb 28 '15 at 02:06

Philip

2,888
2
24
36

2

+1. This is only good if the browser allows the psuedo-elements (but even IE8 does, so should not be a problem), but it's ideal when you cannot change the structure (HTML) of the page. Also, it doesn't require icon fonts if that one symbol is all you need. – dayuloli Feb 28 '15 at 03:46
Good remark, that's true, but I think the biggest problem there would be the `transform` CSS, since that is CSS3. I used this code for my customized forms CSS. And since I already used the :before for the box around it, I had to look for a way the get it to work in just the :after element. – Philip Feb 28 '15 at 03:50
@dayuloli Actually, the limitation lies in the ability of allowing transforms which was implemented later in time. Anyway, since IE9 and all modern browsers allow transforms, so it should be OK – brunoais Jan 21 '16 at 15:18
What if I need a li to be empty? Meaning I only need the check mark, without the text? – parsecer Dec 14 '18 at 18:32
@parsecer Just delete the inner text ;) – Philip Dec 14 '18 at 19:09

score 26 · Accepted Answer · answered Feb 23 '14 at 14:18

You can now include web fonts and even shrink down the file size with just the glyphs you need. https://github.com/fontello/fontello http://fontello.com/

li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}

matthewd · Answer 7 · 2022-07-08T13:23:33.577

I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.

Simple, semantic, without any dependencies or additional HTML.

label {
  cursor: pointer;
}

input[type="checkbox"] {
  position: relative;
  top: 2px;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #b7b7b7;
}

input[type="checkbox"]:before {
  content: '';
  display: block;
  transition: transform 200ms;
}

input[type="checkbox"]:checked:before {
  width: 4px;
  height: 9px;
  margin: 0px 4px;
  border-bottom: 2px solid #115c80;
  border-right: 2px solid #115c80;
  transform: rotate(45deg);
}

<label>
  <input type="checkbox" name="check-1" value="Label">Label
</label>

score 6 · Answer 8 · answered May 07 '19 at 06:26

6

Try this // html example

<span>&#10003;</span>

// css example

span {
  content: "\2713";
}

answered May 07 '19 at 06:26

silvedo

121
1
3

1

These examples use unicode checkmarks, OP wanted alternatives. (and this css example won't work unless you set it on `span:before` or `span:after`) – barbsan May 07 '19 at 06:58

score 5 · Answer 9 · edited Feb 13 '23 at 10:34

i like this way because you don't need to create two components just one.

.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

Animation from Scott Galloway Pen

$('#toggle').click(function() {
  $('.circle-loader').toggleClass('load-complete');
  $('.checkmark').toggle();
});

body {
  padding: 5em;
  text-align: center;
}

h1 {
  margin-bottom: 1em;
}

.circle-loader {
  margin-bottom: 3.5em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left-color: #5cb85c;
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: #5cb85c;
  transition: border 500ms ease-out;
}

.checkmark {
  display: none;
}

.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}

.checkmark:after {
  opacity: 1;
  height: 3.5em;
  width: 1.75em;
  transform-origin: left top;
  border-right: 3px solid #5cb85c;
  border-top: 3px solid #5cb85c;
  content: '';
  left: 1.75em;
  top: 3.5em;
  position: absolute;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>

<div class="circle-loader">
  <div class="checkmark draw"></div>
</div>

<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>

score 3 · Answer 10 · edited Feb 11 '23 at 23:12

I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.

Lists

ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

body {
  font-size: 75%;
}

ul {
  padding: 0;
}

li {
  list-style: none
}

li:before {
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

<ul>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ul>

Checkboxes

You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '✔';
  color: green;
}

body {
  font-size: 75%;
}

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}

label:before,
input[type="checkbox"]:checked+label:before {
  content: '';
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  text-align: center;
}

input[type="checkbox"]:checked+label:before {
  content: '✔';
  color: green;
}

<input type="checkbox" value="Option 1" name="option_1" id="option_1" />
<label for="option_1">option 1</label>

score 2 · Answer 11 · answered Jul 09 '14 at 12:54

li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

score 2 · Answer 12 · answered Feb 19 '21 at 13:26

After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.

.snackbar_circle {
  background-color: #f0f0f0;
  border-radius: 13px;
  padding: 0 5px;
}

.checkmark {
  font-family: arial;
  font-weight: bold;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  color: #63BA3D;
  display: inline-block;
}

<span class="snackbar_circle">
   <span class="checkmark">L</span>
</span>

score 1 · Answer 13 · answered Apr 29 '17 at 13:37

1

You might want to try fontawesome.io

It has great collection of icons. For you <i class="fa fa-check" aria-hidden="true"></i> should work. There are many check icons in this too. Hope it helps.

answered Apr 29 '17 at 13:37

gursahib.singh.sahni

1,559
3
26
51

score 1 · Answer 14 · answered Jun 28 '22 at 12:03

If you want a tick, you probably also want a cross, with background colours.

.icon {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success          { background: green; }
.icon.icon-success:before   { width:  3px; height:  9px; top:  6px; left: 11px; }
.icon.icon-success:after    { width:  3px; height:  3px; top: 12px; left:  8px; }
.icon.icon-failure          { background: lightcoral; }
.icon.icon-failure::before  { width:  3px; height: 12px; top:  5px; left: 10px; }
.icon.icon-failure::after   { width: 12px; height:  3px; top: 10px; left:  5px; }

<i class="icon icon-success"></i>
<i class="icon icon-failure"></i>

score 0 · Answer 15 · edited Feb 10 '23 at 10:12

Also, using the awesome font, you can use the following tag. Simple and beautiful

With the possibility of changing the size and color and other features in CSS

See result:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<h1>fa fa-check-circle</h1>

<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle" style="font-size:24px"></i>
<i class="fa fa-check-circle" style="font-size:36px"></i>
<i class="fa fa-check-circle" style="font-size:48px;color:red"></i>
<br>

<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-check-circle"></i></button>

<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf058;</i>

score 0 · Answer 16 · edited Feb 09 '23 at 23:40

This is my variant for making 'checked' buttons

function clickMe(data) {
  data.classList.add("checked");
}

.unchecked::before {
  content: "C";
}

.unchecked {
  border-radius: 50%;
  outline: none;
}

.checked::before {
  content: "L";
}

.checked {
  background-color: green;
  transform: rotate(45deg) scaleX(-1);
}

<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>

score 0 · Answer 17 · answered Apr 11 '22 at 12:18

We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:

<span class="check_text">Some Text</span>

Now, we can add the CSS like this:

span.check_text:before {
    position: absolute;
    height: 15px;
    width: 5px;
    border-bottom: 3px solid red;
    border-right: 3px solid red;
    content: "";
    transform: rotate(45deg);
    left: -25px;
    top: 2px;
}

score -2 · Answer 18 · answered Sep 22 '19 at 05:13

-2

This is simple css for Sign Mark.

ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}

answered Sep 22 '19 at 05:13

Gopal Gautam

39
3

1

This answer adds nothing to an existing answer - https://stackoverflow.com/a/21968665/2317532 – dayuloli Sep 22 '19 at 10:07

How to draw a checkmark / tick using CSS?

18 Answers18

Linked