How to draw a checkmark / tick using CSS?

css checkmark list
css checkmark animation
show check mark in html ✔
checkmark css w3schools
check mark website
css checkbox content tick
thin check mark
web checkmark

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.

You can now include web fonts and even shrink down the file size with just the glyphs you need.

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

Pure CSS checkmark, You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before  Create a checkmark / tick mark icon with pure CSS. A checkmark icon can be created with CSS by following these steps : Taking a container element, and using its ::before and ::after pseudo-elements to create two straight lines. Rotate both pseudo-elements to make the element look like a checkmark.

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 2 (With circle)


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


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

.checkmark_stem {
    position: absolute;

.checkmark_kick {
    position: absolute;

How to Create a Checkmark / Tick with CSS, A checkmark or a tick icon can be created with pure CSS by drawing two straight Taking a container element, and using its ::before and ::after  Steps to generate and use Check Mark Symbols. Here are the steps to generate and use Check Mark Symbols text: ☑ Step 1: Just enter the text from the keyboard on textbox under "Input your text here". ☑ Step 2: Now it provides you with fancy style Check Mark Symbols Text. ☑ Step 3: Copy and paste Check Mark Symbols text wherever you want.

Here is another CSS solution. its take less line of code.

ul li:before
  padding:0 6px 0 0;
ul li{list-style-type:none;font-size:1em;}


Here is the Demo link

Check Mark HTML Symbol, Character and Entity Codes, HTML symbol, character and entity codes, ASCII, CSS and HEX values for Check Mark, plus a panoply of others. Turning the good old plain list bullets into something visually more attractive is easy, if you happen to have come across this article about pure CSS checkmark icons. This post extends the technique in order to optimize it for mobile by automatically resizing the icons based on the font size used for the list text. … Continue reading CSS checkmark icon →

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>

"Checkmark" Your Visited Links with Pure CSS, You can take control of the styling of these anchor elements in your CSS by targeting them with pseudo classes. The goal of this tutorial is to get a check mark​  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

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


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:
  <li class="done">Great stuff</li>
  <li class="done">Easy stuff</li>
  <li>Difficult stuff</li>

CSS checkmark icon, <li>pure css checkmark icon</li>. </ul>. Creating the CSS for the icon is a 3-step process. First we make room for the icon in the li , then we  ABOUT. HTML Arrows offers all the html symbol codes you need to simplify your site design. HTML Arrows is shared by Toptal Designers, the marketplace for hiring elite UI, UX, and Visual designers, along with top developer and finance talent.

HTML Unicode UTF-8, SCISSORSTry it. ✃, 9987, 2703, LOWER BLADE SCISSORSTry it. ✄, 9988, 2704, WHITE SCISSORSTry it. ✅, 9989, 2705, WHITE HEAVY CHECK MARKTry it. HTML code for check mark. HTML code for check mark ( ). Sign Name code Decimal code Hex code Description

How to draw a checkmark / tick using CSS? - css - html, 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  Draw your own tick symbols and cross marks in Google Sheets; Use shortcuts; Special characters in Google Docs; Standard ways to make a checkmark in Google Sheets Example 1. Google spreadsheet tick box. The quickest way to insert a Google spreadsheet tick box is using the corresponding option from the Sheets menu directly: Select as many cells

CSS Tick mark - JSFiddle, Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. SOURCE​points-with-pure-css3/ /*Rotate the L 45 degrees to turn it into a checkmark*/. 60. Comment draw le symbole tick utilisant CSS? Les symboles que je trouve en utilisant Unicode n'est pas esthétique.. EDIT Les polices d'icône sont une excellente suggestion. Je cherchais quelque chose comme .

  • Have you looked at icon fonts?
  • 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.)
  • @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.
  • 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.
  • @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.
  • I like it. Here's one with only 1 element:
  • Here's one without the circle with only one element:
  • Thanks for this. It helped with some side project I had (:
  • Thank, and what about the "cross"
  • Really sorry, this was my bad. The question was actually looking for a way to DRAW the tick shape, and not to use the unicode characters (which doesn't fit the look for my uses) Sorry my question wasn't clear, I have now edited my question. Thank you for your suggestion.