Selection Cursor SVG element, flat

Selection Cursor SVG element, flat

An angled pointer overlaps a dotted rectangular boundary to show an area being selected. Use it in image editing tutorials and slide layout guides.

Free ยท from Cursors, flat

Similar SVGs

More from Cursors, flat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/SEeMbh_LZOL9/amnt.svg" alt="Selection Cursor" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M3 3h3v2H3zm5 0h3v2H8zm5 0h3v2h-3zm5 0h3v2h-3zm5 0h3v2h-3zm4 0h2v3h-2zM3 8h2v3H3zm24 0h2v3h-2zM3 13h2v3H3zm24 0h2v3h-2zM3 18h2v3H3zm24 0h2v3h-2zM3 23h2v3H3zm24 0h2v3h-2zM3 27h3v2H3zm5 0h3v2H8zm5 0h3v2h-3zm5 0h3v2h-3zm5 0h3v2h-3zm4 0h2v2h-2z"/><path d="m9 7 17 11-7.5 1.5 4 8-3.6 1.8-4-8L9 26V7Z"/></svg>
CSS background-image
.selection-cursor {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/SEeMbh_LZOL9/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.selection-cursor {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/SEeMbh_LZOL9/amnt.svg") center / contain no-repeat;
}
React
import SelectionCursorSvg from "./selection-cursor.jsx"; // from the React tab above

<SelectionCursorSvg width={48} height={48} />

Tags

Made with AMNT

AMNT SVG 1.1 drew this from the words Selection Cursor: An angled pointer arrow overlapping a dotted rectangular selection boundary. as part of the pack Cursors, flat. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings