Checkmark icon on list items

HTML + CSS code snippet to add a checkmark icon to lists items

Preview

Text with checkmark icon
Text with checkmark icon
Text with blocked icon
Regular text

Html

Click to edit (doesn't update preview)

<ul>
  <li class="available-icon">Text with checkmark icon</li>
  <li class="available-icon">Text with checkmark icon</li>
  <li class="blocked-icon">Text with blocked icon</li>
  <li>Regular text</li>
</ul>

/

Click to edit (doesn't update preview)

.available-icon {
  position: relative;
  list-style: none;
}

.available-icon::after {
  content: '';
  position: absolute;
  left: -1.3em;
  top: 0;
  width: 1em;
  height: 1em;
  background-size: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg width="1em" height="1em" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.872869 5.23438L2.11932 3.96236L5.35369 7.15199L12.1996 0.331676L13.4652 1.60369L5.35369 9.68324L0.872869 5.23438Z" fill="%2350C878"/></svg>');
}

.blocked-icon {
  position: relative;
  list-style: none;
}

.blocked-icon::after {
  content: '';
  position: absolute;
  left: -1.3em;
  top: 0;
  width: 1em;
  height: 1em;
  background-size: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FA5252" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path d="M 32 6 C 17.641 6 6 17.641 6 32 C 6 46.359 17.641 58 32 58 C 46.359 58 58 46.359 58 32 C 58 17.641 46.359 6 32 6 z M 32 10 C 37.331151 10 42.225311 11.905908 46.037109 15.072266 L 14.505859 45.318359 C 11.682276 41.618415 10 37.00303 10 32 C 10 19.869 19.869 10 32 10 z M 48.927734 17.962891 C 52.094092 21.774689 54 26.668849 54 32 C 54 44.131 44.131 54 32 54 C 26.99697 54 22.381585 52.317724 18.681641 49.494141 L 48.927734 17.962891 z"/></svg>');
}

.available-icon {
  position: relative;
  list-style: none;

  &::after {
    content: '';
    position: absolute;
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    background-size: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="1em" height="1em" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.872869 5.23438L2.11932 3.96236L5.35369 7.15199L12.1996 0.331676L13.4652 1.60369L5.35369 9.68324L0.872869 5.23438Z" fill="%2350C878"/></svg>');
  }
}

.blocked-icon {
  position: relative;
  list-style: none;

  &::after {
    content: '';
    position: absolute;
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    background-size: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23FA5252" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path d="M 32 6 C 17.641 6 6 17.641 6 32 C 6 46.359 17.641 58 32 58 C 46.359 58 58 46.359 58 32 C 58 17.641 46.359 6 32 6 z M 32 10 C 37.331151 10 42.225311 11.905908 46.037109 15.072266 L 14.505859 45.318359 C 11.682276 41.618415 10 37.00303 10 32 C 10 19.869 19.869 10 32 10 z M 48.927734 17.962891 C 52.094092 21.774689 54 26.668849 54 32 C 54 44.131 44.131 54 32 54 C 26.99697 54 22.381585 52.317724 18.681641 49.494141 L 48.927734 17.962891 z"/></svg>');
  }
}

Description

Changing the font and icon size

By changing the <li> element font size, you also change the icon size. If you want to only change the icon size, you can edit the ::after pseudo element width and height.

Accessibility

The icons do not provide any information to screen readers, which is why you should use descriptive list texts when using these. One other way is to include an aria-label on the list item for screen readers – the label will overwrite the list text.

Why inlined SVGs?

Mainly because it makes copy-pasting this code snippet easier, but it also makes sense as the SVGs are so small in size that there's no downside for them being part of the CSS file.

I inlined them using the SVG to inlined CSS tool.