Пользовательский цвет для маркера SVG

У меня есть следующий CSS

ul {
  list-style: none;
}

ul > li::before {
  content: "";
  height: 1em;
  width: 1em;
  display: block;
  float: left;
  margin-left: -1.5em;
  margin-top: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
}

ul > li::before {
  background-image: url(../images/check-mark.svg);
}

Что отлично работает с HTML ниже

  <ul>
    <li>first</li>
    <li>last</li>
  </ul>

Теперь я хочу добавить второй список, используя ту же галочку, но другого цвета.

Итак, я обновил свой код следующим образом

HTML

   <ul class = "blue">
     <li>first</li>
     <li>last</li>
   </ul>

CSS

svg {
  fill: currentColor;
}

ul.blue > li::before {
  color: blue;
}

Но галочка по-прежнему черная. Как сделать так, чтобы галочки в списке blue были синими?