<html>
<body>
  <simple-icon id="eye" icon="far:eye" accent-color="purple"></simple-icon>
  <simple-icon icon="hax:code-json" accent-color="blue"></simple-icon>
  <simple-icon icon="hax:remix" accent-color="grey"></simple-icon>
  <simple-icon icon="hax:arrow-expand-left" accent-color="grey"></simple-icon>
  <simple-icon icon="fas:carrot" accent-color="orange" dark></simple-icon>
    <simple-icon-lite icon="fas:carrot"></simple-icon-lite>
</body>
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-icon@4.0.4/simple-icon.js?module">
</script>
<script type="module">
  // register the HAX icon set from a CDN
  window.SimpleIconset.requestAvailability().registerIconset("hax", "https://raw.githubusercontent.com/elmsln/lrnwebcomponents/master/elements/hax-iconset/lib/svgs/hax/");
  // register an icon set from Michael's blog post
  window.SimpleIconset.requestAvailability().registerIconset("fas", "https://clayto.com/icons/font-awesome/solid/");
    window.SimpleIconset.requestAvailability().registerIconset("far", "https://clayto.com/icons/font-awesome/regular/");
document.getElementById('eye').addEventListener("mouseover", (e) => {
  e.target.icon = "fas:eye";
});
  document.getElementById('eye').addEventListener("mouseout", (e) => {
  e.target.icon = "far:eye";
});
</script>
simple-icon {
  --simple-icon-width: 120px;
  --simple-icon-height: 120px;
}

simple-icon-lite {
  display:block;
  color: red;
  --simple-icon-width: 100px;
  --simple-icon-height: 100px;
}
simple-icon-lite:hover {
  display:block;
  color: blue;
  --simple-icon-width: 110px;
  --simple-icon-height: 110px;
}


#eye {
  cursor: pointer;  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.