Selection Cursor SVG element, flat

Selection Cursor SVG element, flat

An arrow overlaps a dotted rectangle to show an area being selected. Place it in photo editing instructions or desktop interface prototypes.

Similar SVGs

More from Cursors, flat · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/zuns7BFWPkhg/amnt.svg" alt="Selection Cursor" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="white" data-name="White"><path d="M533 446l-2 1 52 323c13-12 48-78 58-82 2-1 5-1 8 0 4 1 16 21 19 26 26 38 51 81 80 117l48-32c-27-36-51-74-76-111-6-9-28-33-19-41 4-4 15-5 21-6 25-5 51-11 76-16z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="slate" data-name="Slate"><path d="M533 446l265 179c-25 5-51 11-76 16-6 1-17 2-21 6-9 8 13 32 19 41 25 37 49 75 76 111l-48 32c-29-36-54-79-80-117-3-5-15-25-19-26-3-1-6-1-8 0-10 4-45 70-58 82l-52-323zM523 554l7 43c5 18 6 38 9 57 6 36 12 71 17 106 2 13 4 27 19 32 8 2 17 1 24-5 12-9 35-49 46-64 22 26 40 57 59 86 28 41 32 60 81 27 8-6 19-11 26-19 20-21-8-49-20-67-20-28-40-57-59-86 17-5 67-10 79-21 6-5 8-12 8-18 0-8-3-16-9-21l-26-18c-20-10-38-25-57-38-39-26-78-53-118-79-14-10-59-44-74-45-7 0-14 3-19 8-20 19 8 94 7 122z" fill="#737e8e" stroke="#737e8e"/></g><g id="cobalt" data-name="Cobalt"><path d="M210 248c-33 5-25 57 9 52 33-5 25-56-9-52z" fill="#0164fb" stroke="#0164fb"/><path d="M211 324c-33 4-27 56 6 53 34-4 28-57-6-53z" fill="#0164fb" stroke="#0164fb"/><path d="M805 324c-33 5-25 57 9 52 33-5 25-57-9-52z" fill="#0164fb" stroke="#0164fb"/><path d="M804 400c-33 6-24 58 11 52 33-6 24-58-11-52z" fill="#0164fb" stroke="#0164fb"/><path d="M805 248c-33 5-24 57 9 52s25-57-9-52z" fill="#0164fb" stroke="#0164fb"/><path d="M804 476c-32 6-24 58 11 51 33-5 22-57-11-51z" fill="#0164fb" stroke="#0164fb"/><path d="M210 476c-34 5-24 57 9 52s24-56-9-52z" fill="#0164fb" stroke="#0164fb"/><path d="M581 172c-34 6-22 57 11 51 33-5 22-56-11-51z" fill="#0164fb" stroke="#0164fb"/><path d="M804 172c-33 6-24 58 11 51 33-5 22-57-11-51z" fill="#0164fb" stroke="#0164fb"/><path d="M357 172c-32 7-23 58 12 51 33-6 21-57-12-51z" fill="#0164fb" stroke="#0164fb"/><path d="M210 400c-33 5-25 56 8 52 34-4 26-56-8-52z" fill="#0164fb" stroke="#0164fb"/><path d="M209 172c-33 6-23 56 10 52 33-5 26-58-10-52z" fill="#0164fb" stroke="#0164fb"/><path d="M656 172c-33 5-24 57 10 51 33-5 23-56-10-51z" fill="#0164fb" stroke="#0164fb"/><path d="M433 172c-34 5-24 57 9 52s24-57-9-52z" fill="#0164fb" stroke="#0164fb"/><path d="M356 552c-32 7-21 58 13 51s20-58-13-51z" fill="#0164fb" stroke="#0164fb"/><path d="M208 552c-33 7-20 57 12 51 32-5 24-58-12-51z" fill="#0164fb" stroke="#0164fb"/><path d="M506 172c-32 6-23 58 12 51 33-6 21-57-12-51z" fill="#0164fb" stroke="#0164fb"/><path d="M431 552c-33 7-20 58 13 51 32-7 22-58-13-51z" fill="#0164fb" stroke="#0164fb"/><path d="M284 172c-33 5-24 57 10 51 33-5 23-56-10-51z" fill="#0164fb" stroke="#0164fb"/><path d="M282 552c-32 7-21 59 13 51 33-8 20-58-13-51z" fill="#0164fb" stroke="#0164fb"/><path d="M730 172c-33 6-23 57 10 52s23-57-10-52z" fill="#0164fb" stroke="#0164fb"/><path d="M784 586l26 18c25 0 35-33 15-47-20-15-48 5-41 29z" fill="#0164fb" stroke="#0164fb"/><path d="M530 597l-7-43c-6-3-14-3-20-1-36 12-10 70 27 44z" fill="#0164fb" stroke="#0164fb"/></g></svg>
CSS background-image
.selection-cursor {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/zuns7BFWPkhg/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/zuns7BFWPkhg/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 Draw 1.2 drew this from the words Selection Cursor: An angled pointer arrow overlapping a dotted rectangular selection boundary. A flat element. Shrink the oversized outlined dots and lighten the cursor outline for a cleaner, less crowded selection boundary at small sizes. as part of the pack Cursors, flat · Set 2. 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