Aligning list texts to the centre of bullet icon

Question

Trying to align the list texts to the svg icons of the bullets in an unordered list.

Tried a lot of the solutions available on the internet but setting vertical-align: middle does not do anything and setting display: flex; align-items: center; to the parent element removes the icons, for some reason. Any help would be appreciated.

I did this in React but the React part is working fine(I think?) so sending the HTML and CSS snippets. HTML

<div className="registration-form">
      <div className="form-text-container">
        <div className="form-text">
          <h1>Stay Updated!</h1>
          <p>Join 6000+ product managers receiving monthly updates on:</p>
          <ul>
            <li>
              <span className="list-text">
                Product discovery and building what matters
              </span>
            </li>
            <li>
              <span className="list-text">
                Measuring to ensure updates are a success
              </span>
            </li>
            <li>
              <span className="list-text">And much more!</span>
            </li>
          </ul>
        </div>
      </div>
      <div className="form-image-container">
        <SignUpImageDesktop className="form-image" />
      </div>
    </div>

CSS

.registration-form {
  display: flex;
  height: 60vh;
  width: auto;
  padding: 2.5%;
}

.form-text {
  padding: 6%;
}

.form-text p {
  line-height: 1.5rem;
  font-size: 16px;
}

.form-text ul {
  list-style-image: url("../assets/images/icon-list.svg");
  padding-left: inherit;
}

.form-text ul li {
  line-height: 2rem;
}

.list-text {
  padding-left: 0.5rem;
  font-size: 16px;
}

.form-image {
  height: 100%;
  width: auto;
}

The output is like- Notice the bullets.

Answer 1

You can try reducing the line-height from .form-text ul li or, even better, not use list-style-image.

A better approach may be use something like before with content: url(), like here (just change the after for before)

With this, you can use display: flex; and align-items: center to align everything