Region selection icons

by IceCreamYou

HTML

<!-- Rect with crosshair -->
<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Select region">
    <title>Select region</title>
    <g>
        <rect x="3.5" y="3.5" width="14" height="14" fill="none" opacity="0.54"
            stroke-dasharray="3,3" class="svg-stroke-action"/>
        <line x1="17.5" y1="14" x2="17.5" y2="21" stroke-linecap="butt"
            class="svg-stroke-action" />
        <line x1="14" y1="17.5" x2="21" y2="17.5" stroke-linecap="butt"
            class="svg-stroke-action" />
    </g>
</svg>
<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Select region">
    <title>Select region</title>
    <g>
        <rect x="4.5" y="4.5" width="12" height="12" fill="none" opacity="0.54"
            stroke-dasharray="2,3,3,3,2" class="svg-stroke-action"/>
        <line x1="16.5" y1="12" x2="16.5" y2="21" stroke-linecap="butt"
            class="svg-stroke-action" stroke-width="3" />
        <line x1="12" y1="16.5" x2="21" y2="16.5" stroke-linecap="butt"
            class="svg-stroke-action" stroke-width="3" />
    </g>
</svg>
<br />

<!-- Different cursor -->
<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Select region">
    <title>Select region</title>
    <g>
        <rect x="4.5" y="4.5" width="12" height="12" fill="none" opacity="0.54"
            stroke-dasharray="2,3,3,3,2,3,3,3,5" class="svg-stroke-action"/>
        <polygon points="11.5,11.5 20.5,14.5 16.5,16.5 14.5,20.5" class="svg-fill-action"/>
    </g>
</svg>
<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Select region">
    <title>Select region</title>
    <g>
        <rect x="4.5" y="4.5" width="12" height="12" fill="none" opacity="0.54"
           ...

CSS

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

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

svg {
  background-color: #EEEEEE;
  overflow: hidden;
  margin: 15px 10px;
}
svg:hover {
  background-color: #DDDDDD;
}

body {
  zoom: 1;
}