JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<link rel="stylesheet" href="https://i.icomoon.io/public/temp/61c8a40ec6/UntitledProject/style.css">
<div class="icon-size">
  <img src="https://prototype.liveplan.com/assets/img/nav-icons.svg" width="16">
</div>

<div class="icon-size">
  <div class="start-icons"></div>
</div>

<!--<object data="nav-icons.svg" type="image/svg+xml">
<img src="https://prototype.liveplan.com/assets/img/nav-icons.svg"
    alt="quadrilateral with two sets of parallel sides" />
</object>-->


<p>Font Icons CSS</p>
<span class="icon-bkg icon icon-piggy-bank"></span>
<span class="icon-bkg icon icon-chart-line"></span>
<span class="icon-bkg icon icon-gauge"></span>

<p>Font Icons HTML</p>
<span class="icon-bkg icon">&#xe900;</span>
<span class="icon-bkg icon">&#xe901;</span>
<span class="icon-bkg icon">&#xe902;</span>

CSS

.icon-size {
  width: 36px;
  height: 36px;
  overflow: hidden;
  background-color: #72C152;
  border-radius: 20px;
  text-align: center;
}

.icon-size img {
  padding-top: 10px;
}

.icon-size .start-icons {
  padding-left: 10px;
}

.start-icons {
    background: url("https://prototype.liveplan.com/assets/img/nav-icons.svg") 10px 10px no-repeat;
    width: 10px;
    height: 400px;
    display: block;
}

.icon-bkg {
  padding: 10px;
  background-color: #72C152;
  text-align: center;
  border-radius: 20px;
}

.icon-bkg:hover {
  background-color: #568C3C;
  cursor: pointer;
}

.icon {
  color: #fff;
  line-height: 36px;
}

.icon-piggy-bank { content: "\e900"; }
.icon-chart-line { content: "\e901"; }
.icon-gauge { content: "\e902"; }