Filter icon

by IceCreamYou

HTML

<svg width="21" height="21"
    viewbox="0 0 21 21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Filter">
    <title>Filter</title>
    <g>
        <path d="M 0.5 0.5 L 8 10.5 L 8 20.5 L 12.5 17.5 L 12.5 10.5 L 20.5 0.5 Z" fill="none" class="svg-stroke-action" />
    </g>
</svg>

<svg width="21" height="21"
    viewbox="0 0 21 21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Filter">
    <title>Filter</title>
    <g>
        <path d="M 1.5 1.5 L 8.5 10.5 L 8.5 19.5 L 12.5 17 L 12.5 10.5 L 19.5 1.5 Z" fill="none" class="svg-stroke-action" />
    </g>
</svg>

<svg width="21" height="21"
    viewbox="0 0 21 21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Filter">
    <title>Filter</title>
    <g>
        <path d="M 2.5 2.5 L 8.5 9.5 L 8.5 18.5 L 12.5 16.5 L 12.5 9.5 L 18.5 2.5 Z" fill="none" class="svg-stroke-action" />
    </g>
</svg>

SCSS

.svg-fill-action {
    fill: #A00893;
}

.svg-stroke-action {
    stroke: #A00893;
}

svg {
  cursor: pointer;
  margin: 10px;
  transition: background-color 250ms;
  zoom: 1;

  &:hover {
    background-color: #DDDDDD;
  }
}