<svg xmlns="http://www.w3.org/2000/svg" class="icon-container">
  <symbol id="close-icon" viewbox="0 0 200 200">
    <circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" stroke-width="15" />
      <text x="100" y="160" fill="var(--icon-color)" text-anchor="middle" style="font-size:250px;">x</text>
  </symbol>
</svg>

<div class="container">
  <h2>Default Icon</h2>
  <svg role="img">
    <title>Close Dialog</title>
    <use xlink:href="#close-icon" />
  </svg>
  
  <div class="danger">
    <h2>Danger Icon</h2>
    <svg role="img">
      <title>Close Danger Dialog</title>
      <use xlink:href="#close-icon" />
    </svg>
  </div>
  
  <div class="success">
    <h2>Success Icon</h2>
    <svg role="img">
      <title>Close Success Dialog</title>
      <use xlink:href="#close-icon" />
    </svg>
  </div>
  
  <div class="alert">
    <h2>Alert Icon</h2>
    <svg role="img">
      <title>Close Alert Dialog</title>
      <use xlink:href="#close-icon" />
    </svg>
  </div>
  
</div>
:root {
  --icon-color: black;
}

.danger {
  --icon-color: red;
}

.alert {
  --icon-color: orange;
}

.success {
  --icon-color: green;
}

.icon-container {
  display: none;
}

.container {
  position: relative;
  text-align: center;
}

h2 {
  padding: 0 0.5em;
  margin-bottom: 0;
}

svg {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 10px auto;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.