How to use tick / checkmark symbol (✓) instead of bullets in an unordered list?

html

responsive-design

css

svg

byNikita Barsukov·Oct 3, 2024

Turn your regular bullets into confident checkmarks by using the magic of CSS. Make the default bullets disappear by using list-style-type: none;, then summon the mighty ::before pseudo-element to prepend a satisfying ✓ symbol.

ul.no-bullets li::before {
  content: '✓';
}

Work this charm into your ul:

<ul class="no-bullets">
  <li>Task One: Be awesome</li>
  <li>Task Two: Stay awesome</li>
</ul>

Voila! You now have a list that confidently checks off tasks with checkmarks, not bullets.

Creating space and style

Remember the golden rule of real estate (and apparently lists): location, location, location. Space is crucial in all things design, lists included. Providing a space after the tick symbol greatly improves your list's readability and overall look. Implement this by using the Unicode character \2713 or \2714 followed by the escape sequence \0020 to create a space:

ul.no-bullets li::before {
  /* And I put, my hand in the air, make a "check" mark, wave it round like I don't care */
  content: '\2713\0020'; 
}

This CSS modification leaves ample room between the checkmark and the text and aligns your content quite nicely. But wait, there's more! Using CSS again, you can customize the colour and style of your checkmark, making it one with your design:

ul.no-bullets li::before {
  content: '\2713\0020';
  color: green; /* Green means go */
  font-weight: bold; /* Let's be bold today */
}

Suddenly, your checkmarks are not only present, they're also dressed to impress.

Absolute positioning: Tick symbol edition

A trip into the land of absolute positioning offers you more control in your checkmark placement adventure. Get started by chalking out some space to the left of your li element:

ul.positioned-ticks {
  list-style: none;
  padding-left: 30px; /* The more, the merrier */
}

ul.positioned-ticks li {
  position: relative;
}

Scope out your territory by using absolute positioning for pixel-perfect placement:

ul.positioned-ticks li::before {
  content: '\2714'; 
  position: absolute;
  left: 0; /* Keep turning left, and you'll end up right again */
  top: 0; /* Ain't no mountain high enough */
}

Throwing SVGs into the mix

Because we don't do "basic" around here, let's swap our Unicode ticks with SVG icons. Their unrivalled scalability and customization make them the top pick for optimal results. Here's how you can master the SVG game:

ul.svg-ticks li::before {
  content: url('path/to/tick-icon.svg'); /* I don't always use paths, but when I do... */
  padding-right: 8px; /* Everybody deserves some space */
}