Add a html list with check icon

In this tutorial I will show you how to create a list with check (or any other) icon as bullets.

Html

This is our base html, a plain list:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
</ul>

Css

First we need to remove the default styling of the list:

ul {
    list-style: none;
    padding: 0;
}

Then, add a :before element to the list items with the svg icon as a background image:

ul li:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("https://www.svgrepo.com/show/169312/check-mark.svg");
    margin-right: 10px;
}

The whole block needs to be styled a bit, you will see the problem is you add a longer text to the list items, like in the image below:

We want to have the icons nicely aligned to the left side of the list item blocks, and separate the items a little bit. So add this code to fix these:

ul li {
    text-indent: -25px;
    padding-left: 20px;
    margin-left: 5px;
    margin-bottom: 20px;
}

Finally, our list looks like this:

Source

Check out the live example on CodePen.

Tags