<svg xmlns="http://www.w3.org/2000/svg" class="icon-container">
  <symbol id="icon-close" viewbox="0 0 1024 1024">
    <path fill="var(--icon-color)" d="M512 1023.089778C230.172444 1023.089778 0.896 793.813333 0.896 512S230.172444 0.910222 512 0.910222 1023.089778 230.172444 1023.089778 512c0 281.813333-229.319111 511.089778-511.104 511.089778z m0-971.093334C258.318222 51.996444 51.968 258.360889 51.968 512c0 253.653333 206.364444 460.003556 460.003556 460.003556 253.639111 0 459.975111-206.364444 459.975111-460.003556 0-253.653333-206.307556-460.003556-459.975111-460.003556zM692.366222 717.937778a25.457778 25.457778 0 0 1-18.076444-7.495111L511.815111 547.982222 349.653333 710.4a25.528889 25.528889 0 1 1-36.053333-36.053333L476.017778 511.857778 313.543111 349.681778a25.557333 25.557333 0 0 1 36.124445-36.124445L512.142222 476.003556l162.161778-162.446223a25.528889 25.528889 0 1 1 36.053333 36.053334L547.982222 512.099556l162.474667 162.204444a25.557333 25.557333 0 0 1-18.033778 43.648h-0.028444z" />
  </symbol>
</svg>


<div class="default">
  <svg role="img">
      <use xlink:href="#icon-close" />
  </svg>
</div>

<div class="primary">
  <svg role="img">
      <use xlink:href="#icon-close" />
  </svg>
</div>

<div class="secondary">
  <svg role="img">
      <use xlink:href="#icon-close" />
  </svg>
</div>

<div class="danger">
  <svg role="img">
      <use xlink:href="#icon-close" />
  </svg>
</div>

<div class="warning">
  <svg role="img">
      <use xlink:href="#icon-close" />
  </svg>
</div>

<div class="success">
  <svg role="img">
      <use xlink:href="#icon-close" />
  </svg>
</div>

<div class="info">
  <svg role="img">
      <use xlink:href="#icon-close" />
  </svg>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  > div {
    margin: 5px;
    
    svg {
      width: 5em;
      height: 5em;
    }
  }
}
.icon-container {
  position: absolute; 
  height: 1px; 
  width: 1px; 
  clip: rect(1px 1px 1px 1px); 
  clip: rect(1px,1px,1px,1px); 
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px); 
  overflow: hidden !important;
}



.default {
  --icon-color: #000;
}

.primary {
  --icon-color: #0062cc;
}

.secondary {
  --icon-color: #6c757d;
}

.danger {
  --icon-color: #bd2130;
}

.warning {
  --icon-color: #ffc107;
}

.success {
  --icon-color: #28a745;
}

.info {
  --icon-color: #17a2b8;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.