<main>
  
  <h1>Cool CSS hover effect</h1>
  
  <p class="notSupported">
    Seems like CSS custom properties are not supported by your browser. Check if there's an update or consider switching to <a href="https://caniuse.com/#feat=css-variables">a supported one</a>.
  </p>
  
  <div class="isSupported">
    
    <p>
      Adding a cool hover/focus effect to icons from the <a href="https://orioniconlibrary.com">Orion Icon Library</a> with the help of CSS custom properties. If you want to see how the effect looks like in a real application check out <a href="https://mnged.me">MNGED</a>, a small PWA I host.
    </p>

    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Coffee</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" data-name="layer3"
      fill="#f16262" d="M10 10h44v12H10zm2 0l4-8h32l4 8"></path>
      <path data-name="opacity" fill="#fff" opacity=".25" d="M47 10l-4-8h-5l3 8v12h8V10h-2z"></path>
      <path data-name="opacity" fill="#101129" opacity=".25" d="M19.1 10l4-8H16l-4 8h-2v12h7.1V10h2z"></path>
      <path class="applyEffect" data-name="layer2" fill="#fdefe5" d="M14 22l.4 8h35.2l.4-8M15.2 46l.8 16h32l.8-16"></path>
      <path class="applyEffect" data-name="layer1" fill="#c59483" d="M49.6 30H14.4l.8 16h33.6l.8-16z"></path>
      <path data-name="opacity" fill="#101129" opacity=".18" d="M20 22h-6l.4 8h6l-.4-8zm-4.8 24l.8 16h6l-.8-16h-6z"></path>
      <path data-name="opacity" fill="#101129" opacity=".25" d="M20.4 30h-6l.8 16h6l-.8-16z"></path>
      <path data-name="stroke" fill="none" stroke="#2f446a" stroke-linecap="round"
      stroke-linejoin="miter" stroke-width="2" d="M10 10h44v12H10zm2 0l4-8h32l4 8M14 22l.4 8h35.2l.4-8M15.2 46l.8 16h32l.8-16m.8-16H14.4l.8 16h33.6l.8-16z"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Glazed Donut</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" data-name="layer2"
      d="M32 62a30 30 0 0 0 26.6-16.2C50 42 49.2 50.6 46 50s-4.2-3.3-6-.4-4.7 3-7.9 2.4-3.4.7-6.3 2-7.1-1.2-5.8-6-4.7-5.1-6-2-2.2 5.6-4 5.9h-.4A29.9 29.9 0 0 0 32 62z"
      fill="#de9d63"></path>
      <path class="applyEffect" data-name="layer1" d="M32 2A30 30 0 0 0 9.6 52h.4c1.9-.3 2.8-2.8 4-5.9s7.2-2.6 6 2 2.9 7.3 5.8 6 3.1-2.6 6.3-2 6.1.5 7.9-2.4 2.8-.2 6 .4 4-8 12.6-4.2A30 30 0 0 0 32 2zm0 40a10 10 0 1 1 10-10 10 10 0 0 1-10 10z"
      fill="#f5a4c4"></path>
      <path data-name="opacity" d="M20 36a10 10 0 0 0 19.7 2.4 10 10 0 0 1-17.4-8.8A10 10 0 0 0 20 36zM32 2A30 30 0 0 0 4.2 20.6a30 30 0 0 1 54.2 25.1h.3A30 30 0 0 0 32 2z"
      fill="#fff" opacity=".25"></path>
      <circle data-name="stroke" cx="32" cy="32" r="30" fill="none" stroke="#2f446a"
      stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <circle class="applyEffect" data-name="stroke" cx="32" cy="32" r="10" fill="none"
      stroke="#2f446a" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <path data-name="stroke" d="M10 51.9c1.9-.3 2.8-2.8 4-5.9s7.2-2.6 6 2 2.9 7.3 5.8 6 3.1-2.6 6.3-2 6.1.5 7.9-2.4 2.8-.2 6 .4 4-8 12.6-4.2M18 14l4 4m-8 8l-4 4m2 8h4m10-28h8m10 4l-4 4m10 6l4 2m-4 8v4"
      fill="none" stroke="#2f446a" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Pizza Slice</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" fill="#faf287" d="M22.473 9.3L7 54l42.978-18.91C44.833 23.128 34.618 14.087 22.473 9.3z"
      data-name="layer3"></path>
      <circle class="applyEffect" fill="#f04848" r="4" cy="23.999" cx="28.999" data-name="layer2"></circle>
      <circle class="applyEffect" fill="#f04848" r="2" cy="33.999" cx="34.999" data-name="layer2"></circle>
      <circle class="applyEffect" fill="#f04848" r="2.5" cy="37.499" cx="20.999" data-name="layer2"></circle>
      <path class="applyEffect" fill="#f6b36d" d="M25 2l-2.527 7.3c12.145 4.787 22.36 13.828 27.507 25.787L57 32C51.011 18.087 39.13 7.567 25 2z"
      data-name="layer1"></path>
      <path opacity=".18" fill="#101129" d="M51.981 33.087C46.835 21.128 36.62 12.085 24.475 7.3l1.668-4.818C25.761 2.321 25.384 2.153 25 2l-2.527 7.3c12.145 4.787 22.36 13.828 27.507 25.787L57 32c-.136-.314-.29-.619-.432-.93z"
      data-name="opacity"></path>
      <circle stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" r="4" cy="23.999" cx="28.999" data-name="stroke"></circle>
      <circle stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" r="2" cy="33.999" cx="34.999" data-name="stroke"></circle>
      <circle stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" r="2.5" cy="37.499" cx="20.999" data-name="stroke"></circle>
      <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" d="M22.473 9.3L7 54l42.978-18.91C44.833 23.128 34.618 14.087 22.473 9.3z"
      data-name="stroke"></path>
      <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" d="M49.979 35.087L57 32C51.011 18.087 39.13 7.567 25 2l-2.527 7.3m-5.474 40.299v8.4m8-11.92v15.92m16-22.933v12.933"
      data-name="stroke"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Smile Emoji</title>
      <desc>A color styled icon from Orion Library.</desc>
      <circle class="applyEffect" data-name="layer3"
      cx="32" cy="32" r="30" fill="#fc6"></circle>
      <path data-name="opacity" d="M60 38a36.2 36.2 0 0 1-.5 6A30 30 0 0 0 32 2l-3.8.3A36 36 0 0 1 60 38z"
      fill="#fff" opacity=".2"></path>
      <path data-name="opacity" d="M8 28A29.9 29.9 0 0 1 18.5 5.2a30 30 0 1 0 33 49.6A30 30 0 0 1 8 28z"
      fill="#000064" opacity=".15"></path>
      <circle class="applyEffect" data-name="layer1" cx="22" cy="26" r="2" fill="#64738f"></circle>
      <circle class="applyEffect" data-name="layer1" cx="42" cy="26" r="2" fill="#64738f"></circle>
      <path class="applyEffect" data-name="layer2" d="M14 40c2.2 7.9 9.4 14 18 14s15.8-6.1 18-14z"
      fill="#fff"></path>
      <path class="applyEffect" data-name="layer1" d="M16 44a52 52 0 0 0 15 2 78.9 78.9 0 0 0 17-2s-3 10-16 10a17.2 17.2 0 0 1-16-10z"
      fill="#64738f"></path>
      <circle data-name="stroke" cx="32" cy="32" r="30" fill="none" stroke="#2e4369"
      stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <circle data-name="stroke" cx="22" cy="26" r="2" fill="none"
      stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <circle data-name="stroke" cx="42" cy="26" r="2" fill="none"
      stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <path data-name="stroke" d="M14 40c2.2 7.9 9.4 14 18 14s15.8-6.1 18-14z"
      fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Taxi</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" data-name="layer2"
      d="M62 52V36.2a5 5 0 0 0-1.3-3.5l-2-2C57.5 29.5 56 28 54 28H10c-2 0-3.5 1.5-4.7 2.7l-2 2A5 5 0 0 0 2 36.2V52z"
      fill="#fc0"></path>
      <rect class="applyEffect" data-name="layer4" x="10" y="38" width="10" height="6" rx="2"
      ry="2" fill="#a0d6ef"></rect>
      <rect class="applyEffect" data-name="layer4" x="44" y="38" width="10" height="6" rx="2"
      ry="2" fill="#a0d6ef"></rect>
      <path class="applyEffect" data-name="layer3" d="M16 52v7a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-7zm42 0v7a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3v-7z"
      fill="#7b8baf"></path>
      <path class="applyEffect" data-name="layer2" fill="#fc0" d="M24 2h16v8H24z"></path>
      <path class="applyEffect" data-name="layer1" d="M54 28a4.3 4.3 0 0 1 2 .5s-1-10.2-1.4-13.2a5.7 5.7 0 0 0-5.5-5.3H14.9a5.7 5.7 0 0 0-5.5 5.3C9 18.3 8 28.5 8 28.5a4.3 4.3 0 0 1 2-.5z"
      fill="#c3d6e0"></path>
      <path data-name="opacity" d="M24.9 10L8.1 26.8v1.7H8a4.3 4.3 0 0 1 2-.5h11.1l18-18zm26.4.2L33.5 28h8.8l11.5-11.5-.2-2.1a6.2 6.2 0 0 0-2.3-4.2z"
      fill="#fff" opacity=".5"></path>
      <path data-name="opacity" d="M3.3 32.7A5 5 0 0 0 2 36.2V52h60v-2.9H6.9V35c0-2.8 2.5-7 3.1-7-2 0-3.4 1.5-4.7 2.7z"
      fill="#000064" opacity=".15"></path>
      <path data-name="opacity" d="M58.7 30.7C57.5 29.5 56 28 54 28H10c-.4 0-1.6 1.8-2.4 3.9h46.7c1.5 0 6 .6 7.2 2a4.2 4.2 0 0 0-.8-1.2z"
      fill="#fff" opacity=".2"></path>
      <path data-name="opacity" fill="#000064" opacity=".2" d="M6 52h10v3.94H6zm42 0h10v3.94H48z"></path>
      <path data-name="stroke" d="M16 52v7a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-7m52 0v7a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3v-7m14 0V36.2a5 5 0 0 0-1.3-3.5l-2-2C57.5 29.5 56 28 54 28H10c-2 0-3.5 1.5-4.7 2.7l-2 2A5 5 0 0 0 2 36.2V52z"
      fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></path>
      <rect data-name="stroke" x="10" y="38" width="10" height="6" rx="2"
      ry="2" fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></rect>
      <rect data-name="stroke" x="44" y="38" width="10" height="6" rx="2"
      ry="2" fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></rect>
      <path data-name="stroke" fill="none" stroke="#2e4369" stroke-linecap="round"
      stroke-linejoin="miter" stroke-width="2" d="M28 42h8M24 10V2h16v8M8 28.5s1-10.2 1.4-13.2a5.7 5.7 0 0 1 5.5-5.3h34.2a5.7 5.7 0 0 1 5.5 5.3c.4 3 1.4 13.2 1.4 13.2"></path>
    </svg>
    
  </div>
  
</main>
<h2>&lt;coded /&gt; with 
<svg class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Hearts</title>
  <desc>A color styled icon from Orion Library.</desc>
  <path class="applyEffect" data-name="layer2"
  d="M53 27a9.7 9.7 0 0 0-9 5.9 9.7 9.7 0 0 0-9-5.9 8.9 8.9 0 0 0-9 8.9c0 8.3 6.6 16 18 23.1 11.4-7.1 18-14.8 18-23.1a8.9 8.9 0 0 0-9-8.9z"
  fill="#f27eb1"></path>
  <path class="applyEffect" data-name="layer1" d="M35 27c3.9 0 7.9 2.5 9.2 5.9.5-1.4.8-2.7 2.8-3.6a26.4 26.4 0 0 0 3.2-12.1A12.2 12.2 0 0 0 38.1 5c-5.2 0-10.4 3.4-12 8.1C24.4 8.4 19.3 5 14 5A12.1 12.1 0 0 0 2 17.2c0 11.4 8.8 22.2 24 32 1.3-.8 2.5-2.2 3.7-2.2-2.4-4-3.7-7.2-3.7-10.9a9.2 9.2 0 0 1 9-9.1z"
  fill="#f27e7c"></path>
  <path data-name="stroke" d="M46.7 29.3A24.5 24.5 0 0 0 50 17.2 12.1 12.1 0 0 0 38 5a12.9 12.9 0 0 0-12 8.1A12.9 12.9 0 0 0 14 5 12.1 12.1 0 0 0 2 17.2c0 11.4 8.8 22 24 31.8l3.7-2.5"
  fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="miter"
  stroke-width="2"></path>
  <path data-name="stroke" d="M53 27a9.7 9.7 0 0 0-9 5.9 9.7 9.7 0 0 0-9-5.9 8.9 8.9 0 0 0-9 8.9c0 8.3 6.6 16 18 23.1 11.4-7.1 18-14.8 18-23.1a8.9 8.9 0 0 0-9-8.9z"
  fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="miter"
  stroke-width="2"></path>
</svg> and
<svg class="hoverEffect" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title"
aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Coffee Beans</title>
  <desc>A color styled icon from Orion Library.</desc>
  <path class="applyEffect" fill="#775958" d="M39.025 36.465c3.352 9.283-1.988 17.943-11.93 19.348-9.94 1.402-20.716-4.985-24.068-14.268-3.351-9.281 1.989-17.943 11.93-19.346 9.94-1.402 20.715 4.985 24.068 14.266z"
  data-name="layer1"></path>
  <path class="applyEffect" fill="#775958" d="M40.045 41.996c8.998-.127 17.967-6.125 20.975-14.457 3.35-9.283-1.99-17.945-11.93-19.347-9.94-1.403-20.715 4.986-24.069 14.265a30.93 30.93 0 0 0-.244.725"
  data-name="layer1"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M9.98 32.002c3.659 4.922 5.946 5.82 12 6 6 .176 9.854 1.584 11.999 6"
  data-name="stroke"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M38.979 36.46c3.351 9.282-1.989 17.945-11.93 19.347S6.332 50.823 2.98 41.54c-3.35-9.282 1.99-17.944 11.93-19.346 9.94-1.403 20.715 4.984 24.069 14.265z"
  data-name="stroke"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M53.973 17.996c-3.659 4.92-5.946 5.82-12 5.998-4.424.131-7.682.932-9.95 3.116"
  data-name="stroke"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M40.037 41.99c8.998-.127 17.928-6.124 20.936-14.457 3.351-9.28-1.989-17.943-11.93-19.345-9.94-1.405-20.715 4.984-24.068 14.263-.086.245-.168.485-.245.727"
  data-name="stroke"></path>
</svg> by <a href="https://maniyt.de">Marius Niveri</a></h2>
/* ---------------------------------------------------------
     Only this CSS is required for this effect to work
  This is pure CSS, using SCSS only for other page styles
--------------------------------------------------------- */

.applyEffect {
    transition: fill .13s;
    fill: transparent;
}

svg:hover .applyEffect, svg:focus .applyEffect {
  // gets assigned by javascript
  fill: var(--hover-color);
}
  



/* ---------------------------------------------------------
    Other page styles, nothing to do with the effect
--------------------------------------------------------- */

:root {
  --body-background-color: #2e4369;
  --box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
                0 6px 30px 5px rgba(0,0,0,0.12),
                0 8px 10px -5px rgba(0,0,0,0.3);
  --font-stack: Helvetica Neue, Helvetica, Arial, sans-serif;
}

body, html {
  background: var(--body-background-color);
  font-family: var(--font-stack);
  text-align: center;
}

body {
  padding: 0 12px;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;

  &:hover {
    text-decoration: underline;
  }
}

main {
  background: #fefefe;
  padding: 16px 8px;
  margin: 56px auto;
  max-width: 720px;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  
  // Check if CSS custom properties are supported:
  .isSupported {
    display: none;
  }

  .notSupported {
    display: block;
    background: rgba(255,0,0,.13);
    padding: 8px 16px;
    border-radius: 8px;
  }

  @supports (--a: 0) {
    .isSupported {
      display: block;
    }

    .notSupported {
      display: none;
    }
  }
  
  h1 {
    margin: 0 0 8px 0;
    font-weight: 100;
  }
  
  p {
    max-width: 512px;
    margin: 0 auto 16px;
  }
  
  svg {
    height: 112px;
    margin: 8px;
  }
}

h2 {
  color: rgba(255,255,255,.57);
  font-size: 18px;
  font-weight: 100;
  
  svg {
    height: 20px;
    position: relative;
    bottom: -2px;
    
    path {
      stroke: rgba(255,255,255,.57);
    }
  }
  
  svg:hover {
    .applyEffect {
      fill: var(--hover-color);
    }
    
    path {
      stroke: #000;
    }
  }
}
View Compiled
/*
  Gets all elements with class 'applyEffect' and copies fill into CSS3 custom property.
  
  A less convenient, but non-javascript, option is to do this by hand like this:
  <element style="--hover-color: COLOR"></element>
*/

document.querySelectorAll('.applyEffect').forEach(function(element) {
  const hoverColor = element.getAttribute("fill"); // get the fill color
  
  // set it as a custom property inline
  if (hoverColor) element.style.setProperty('--hover-color', hoverColor);
});

// One liner alternative with ES6 syntax:

// document.querySelectorAll('.applyEffect').forEach(el => el.style.setProperty('--hover-color', el.getAttribute('fill')) || '#fff');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.