css_icon_svg.html

 <div class=" icon icon-like-off" style="width:50px;height:50px;">
  </div>

 <div class=" icon icon-like-on" style="width:50px;height:50px;">
  </div>

 <div class=" icon icon-friend-off" style="width:50px;height:50px;">
 </div>

<div class=" icon icon-friend-on" style="width:50px;height:50px;">
</div>

<div class=" icon icon-message" style="width:50px;height:50px;">
</div>

<div class=" icon icon-more" style="width:50px;height:50px;">
</div>

<div class=" icon icon-shrink" style="width:50px;height:50px;">
</div>

 <div class=" icon icon-delete" style="width:50px;height:50px;">
  </div>

<div class=" icon icon-link" style="width:50px;height:50px;">
</div>

<div class=" icon icon-music" style="width:50px;height:50px;">
</div>

<div class=" icon icon-plus" style="width:50px;height:50px;">
</div>

<div class=" icon icon-minus" style="width:50px;height:50px;">
</div>

<div class=" icon icon-edit" style="width:50px;height:50px;">
</div>

<div class=" icon icon-close" style="width:50px;height:50px;">
</div>

<div class=" icon icon-settings" style="width:50px;height:50px;">
</div>
<div class=" icon icon-logout" style="width:50px;height:50px;">
</div>

<div class=" icon icon-skills" style="width:50px;height:50px;">
</div>

<div class=" icon icon-upload" style="width:50px;height:50px;">
</div>

<style>
icons {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-left: 5px;
  background-color: #f3f5f6;
}

icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border: 1px solid #d4d4d4;
  border-radius: 15%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}

.icon-like-off {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V10.09L23,12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z" /></svg>')
}

.icon-like-on {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10.08L23,10M1,21H5V9H1V21Z" /></svg>')
}

.icon-friend-off {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" /></svg>')
}

.icon-friend-on {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /></svg>')
}

.icon-message {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z" /></svg>')
}

.icon-more {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" /></svg>')
}

.icon-expand {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>')
}

.icon-shrink {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>')
}

.icon-delete {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>')
}

.icon-link {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>')
}

.icon-music {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z" /></svg>')
}

.icon-plus {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>')
}

.icon-minus {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M19,13H5V11H19V13Z" /></svg>')
}

.icon-edit {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>')
}

.icon-close {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>')
}

.icon-settings {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>')
}

.icon-logout {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M16.56,5.44L15.11,6.89C16.84,7.94 18,9.83 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12C6,9.83 7.16,7.94 8.88,6.88L7.44,5.44C5.36,6.88 4,9.28 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12C20,9.28 18.64,6.88 16.56,5.44M13,3H11V13H13" /></svg>')
}

.icon-skills {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M6.92,5H5L14,14L15,13.06M19.96,19.12L19.12,19.96C18.73,20.35 18.1,20.35 17.71,19.96L14.59,16.84L11.91,19.5L10.5,18.09L11.92,16.67L3,7.75V3H7.75L16.67,11.92L18.09,10.5L19.5,11.91L16.83,14.58L19.95,17.7C20.35,18.1 20.35,18.73 19.96,19.12Z" /></svg>')
}

.icon-upload {
  background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>')

</style>