CSS align card icon

<div className="col-md-12">
        <Tabs
          defaultActiveKey="recents"
          id="uncontrolled-tab-example"
          className="mb-3 background-tabs"
        >
          <Tab eventKey="recents" title="Récents (7)">
            <div className="col-md-12">
              <ul className="list-group">
                {tutorials &&
                  tutorials.map((tutorial, index) => (
                    <li
                      className={
                        "conseil-card" +
                        (index === currentIndex ? "active" : "")
                      }
                      onClick={() => setActiveTutorial(tutorial, index)}
                      key={index}
                    >
                      <IconAdd />
                      <IconDrag />
                      <p>{tutorial.isPack ? "test" : "{tutorial.message}"}</p>
                      <div className="conseil-card-title">
                        Titre : {tutorial.title}
                        {tutorial.isPack ? "Pack oui" : "Pack non"}
                      </div>
                    </li>
                  ))}
              </ul>

.conseil-card {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 4px 4px 12px #00000014;
  border-radius: 15px;
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: #212529;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.125);
  text-align: left;
  font: normal normal normal 16px/22px Poppins;
  letter-spacing: 0px;
  opacity: 1;
  margin: 8px;
}

.conseil-card p {
  margin-top: 10px;
  margin-left: 50px;
  margin-right: 50px;
}

.conseil-card svg {
  float: left;
  clear: both;
}