<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.