Замена дефолтных стрелок у slick slider

$(document).ready(function() { 
  $('.slick-slider').slick({ 
    slidesToShow: 3, 
    centerMode: true, 
    centerPadding: '50px', 
    prevArrow: "<img src='https://svgshare.com/i/6Ei.svg' class='prev' alt='1'>", 
    nextArrow: "<img src='https://svgshare.com/i/6Gf.svg' class='next' alt='2'>", 
  }); 
});

.slider-box { 
  position: relative; 
} 
 
li { 
  margin-top: 20px; 
  position: relative; 
  float: left; 
  margin-right: 20px; 
} 
 
.prev, 
.next { 
  position: absolute; 
  top: 30%; 
  height: 60px; 
  width: 60px; 
  z-index: 1; 
  cursor: pointer; 
} 
 
.next { 
  right: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 
<div class="slider-box"> 
  <div class="slick-slider"> 
    <div> 
      <img src="https://via.placeholder.com/150x150"> 
    </div> 
    <div> 
      <img src="https://via.placeholder.com/150x150"> 
    </div> 
    <div> 
      <img src="https://via.placeholder.com/150x150"> 
    </div> 
    <div> 
      <img src="https://via.placeholder.com/150x150"> 
    </div> 
  </div> 
</div>

$(document).ready(function() { 
  $('.single-item').slick({ 
    arrows: true 
  }); 
});

.single-item { 
  width: 50%; 
  margin: 20px auto; 
  text-align: center; 
  border: 3px solid purple; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" /> 
 
<style> 
  .slick-prev:before, 
  .slick-next:before { 
    display: none; 
  } 
   
  .slick-prev, 
  .slick-next { 
    width: 50px; 
    height: 50px; 
    z-index:5; 
  } 
   
  .slick-prev,.slick-prev:hover,.slick-prev:focus { 
    left: 10px; 
    background: url(https://pp.userapi.com/c841622/v841622565/10d5b/-6kAk3WFMKQ.jpg) 
  } 
   
  .slick-next,.slick-next:hover,.slick-next:focus { 
    right: 10px; 
    background: url(http://dom2.fans/all_news/0113/img/play-2.png) 
  } 
</style> 
 
<div class=single-item> 
  <div> 
    <h3>1</h3> 
  </div> 
  <div> 
    <h3>2</h3> 
  </div> 
  <div> 
    <h3>3</h3> 
  </div> 
  <div> 
    <h3>4</h3> 
  </div> 
  <div> 
    <h3>5</h3> 
  </div> 
  <div> 
    <h3>6</h3> 
  </div> 
</div>