Styled SVG Icons

In this example below you will see how to do a Styled SVG Icons with some HTML / CSS and Javascript

Using CSS to apply a variety of styles to one original filled SVG image.

Thumbnail
This awesome code was written by KristinB, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright KristinB ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Styled SVG Icons</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- SVG "Sprite" -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
  <symbol id="bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <style>.aast0{fill:none}</style>
    <path class="aaaaaast0" d="M17.5 14V9c0-3-2.3-5-5.5-5S6.5 6 6.5 9v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 20H9c0 1 1.6 2 3 2s3-1 3-2h-3z"/>
  </symbol>
</svg>

<h1>CSS Styled SVG Icons</h1>

<p><em>Starting from just one original filled black SVG icon image, CSS can be applied to change the style in a variety ways...</em></p>

<h2>Original filled SVG Icon</h2>
<p>
  <svg width="24" height="24">
      <use xlink:href="#bell">
  </svg>
  <svg class="blue" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="green" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="red" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
</p>

<h2>Outlined SVG Icon</h2>
<p>
  <svg class="outline" width="24" height="24">
      <use xlink:href="#bell">
  </svg>
  <svg class="outline blue" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="outline green" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="outline red" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
</p>

<h2>Circled, Outlined SVG Icon</h2>
<p>
  <svg class="circle outline" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="circle outline blue" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="circle outline green" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="circle outline red" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
</p>

<h2>Reversed Out, Circled SVG Icon</h2>
<p>
  <svg class="circle reversed" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="circle reversed blue" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="circle reversed green" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
  <svg class="circle reversed red" width="24" height="24">
    <use xlink:href="#bell">
  </svg>
</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KristinB/styled-svg-icons-xWKLPx */
svg {
  fill: currentColor;
}
svg:not([width]) {
  width: 1em;
  height: 1em;
}
svg.outline {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1;
}
svg.circle {
  border-radius: 500px;
  border: 1px solid currentColor;
}
svg.reversed {
  background: currentColor;
  fill: #fff;
}

.blue {
  color: #48787a;
}

.green {
  color: #546733;
}

.red {
  color: #ca2647;
}

body {
  font-familiy: Georgia;
  background: #d7eff2;
  color: #612121;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0 1.5em;
}

h1:after {
  border-top: 1px dotted;
  opacity: .5;
  content: "";
  display: block;
  margin-top: 0.1em;
}

em {
  font-size: larger;
}

Comments