The issue with your code is, background-image is applied to the complete list li , not just where the bullet is exist.

list-style-image didn't support scaling option.

HTML:

<ul id="AB1C2D">
  <li id="AB1C2D1">Dashboard</li>
  <li id="AB1C2D2">Mechanics</li>  
  <li id="AB1C2D3">Individuals</li>
  <li id="AB1C2D4">Settings</li>
  <li id="AB1C2D5">Messages</li>  
  <li id="AB1C2D6">Support</li>
  <li id="AB1C2D7">Logout</li>
</ul>

CSS:

#AB1C2D {
  list-style: none;
  padding: 0;
  margin: 0;
}

#AB1C2D li {
  position: relative;
  padding-left: 28px;
  margin: 6px 0;
  line-height: 1.5;
}

#AB1C2D li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("https://cdn-icons-png.flaticon.com/512/1828/1828817.png"); /* change this image path to as your wish */
  background-size: contain;
  background-repeat: no-repeat;
}