JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<div style="border:1px solid blue;  ">dfds
<div class="add-contacts size-20" ></div>
</div>

CSS

.size-20{
  width:20px;height:20px;
}
.add-contacts {
display:inline-block;

background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath style='fill:%23030104;' d='M61.885,72.24c-12.457-4.491-16.438-8.282-16.438-16.395c0-4.871,3.803-3.28,5.473-12.2 c0.693-3.7,4.053-0.06,4.695-8.507c0-3.366-1.834-4.203-1.834-4.203s0.932-4.982,1.297-8.816C55.531,17.342,52.289,5,35,5 S14.469,17.342,14.922,22.119c0.365,3.834,1.297,8.816,1.297,8.816s-1.834,0.837-1.834,4.203c0.643,8.447,4.002,4.807,4.693,8.507 c1.672,8.919,5.475,7.329,5.475,12.2c0,8.113-3.98,11.904-16.438,16.395c-1.5,0.54-5.076,1.381-8.115,2.693V95h80 c0,0,0-7.396,0-10.526C80,81.341,74.381,76.746,61.885,72.24z M85,45V30H75v15H60v10h15v15h10V55h15V45H85z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A") ;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%;
  vertical-align: middle;
}