<div class="circle">
  <svg class="circle-icon" viewBox="0 0 24 24" width="24" height="24">
    <line x1="2" x2="22" y1="5"  y2="5"  stroke-width="3" stroke-linecap="round"/>
    <line x1="2" x2="22" y1="12" y2="12" stroke-width="3" stroke-linecap="round"/>
    <line x1="2" x2="22" y1="19" y2="19" stroke-width="3" stroke-linecap="round"/>
  </svg>
</div>
.circle {
  background: #456BD9;
  border-radius: 50%;
  color: #fff;
  height: 5em;
  position: relative;
  width: 5em;
}

.circle-icon {
  fill: currentColor;
  height: 50%;
  left: 50%;
  position: absolute;
  stroke: currentColor;
  stroke-width: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}

External CSS

  1. https://codepen.io/tylersticka/pen/84283323f542da5a9690fa4581c876ec

External JavaScript

This Pen doesn't use any external JavaScript resources.