Menu

Beta
Sign in
Beta
Dotted Arrow SVG element, flat

Dotted Arrow SVG element, flat

A horizontal trail of dots ends in a two-sided dotted arrowhead. Use it to show the next step in an instruction sheet or point to a feature in a diagram.

Free · from Dots and grids, flat · Set 2

Similar SVGs

More from Dots and grids, flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cY-Fd3EWU9Aa/amnt.svg" alt="Dotted Arrow" 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="grape" data-name="Grape"><path d="M163 482c-33 4-27 55 6 51 33-3 27-54-6-51z" fill="#032065" stroke="#032065"/><path d="M648 482c-33 3-28 54 5 51 33-2 28-53-5-51z" fill="#032065" stroke="#032065"/><path d="M439 482c-33 5-25 55 8 51s24-55-8-51z" fill="#032065" stroke="#032065"/><path d="M94 482c-33 4-27 54 6 51 34-3 27-54-6-51z" fill="#032065" stroke="#032065"/><path d="M369 482c-32 5-26 57 9 51 33-5 23-55-9-51z" fill="#032065" stroke="#032065"/><path d="M509 482c-33 4-27 54 6 51s27-54-6-51z" fill="#032065" stroke="#032065"/><path d="M579 482c-33 3-28 55 5 51 33-3 28-54-5-51z" fill="#032065" stroke="#032065"/><path d="M232 482c-33 4-27 54 6 51 34-3 27-55-6-51z" fill="#032065" stroke="#032065"/><path d="M784 483c-33 5-24 56 9 51 33-6 24-55-9-51z" fill="#032065" stroke="#032065"/><path d="M714 483c-32 6-24 56 11 50 33-5 22-56-11-50z" fill="#032065" stroke="#032065"/><path d="M798 361c-33 6-21 57 12 50 32-6 21-56-12-50z" fill="#032065" stroke="#032065"/><path d="M931 485c-32 7-19 57 13 50s20-57-13-50z" fill="#032065" stroke="#032065"/><path d="M301 482c-33 4-26 55 7 51s25-54-7-51z" fill="#032065" stroke="#032065"/><path d="M802 610c-33 3-29 54 4 51s28-53-4-51z" fill="#032065" stroke="#032065"/><path d="M848 484c-31 6-22 58 13 50 32-7 19-56-13-50z" fill="#032065" stroke="#032065"/><path d="M892 527c-33 5-24 56 9 51 32-6 23-55-9-51z" fill="#032065" stroke="#032065"/><path d="M848 570c-32 6-22 57 10 50 33-7 22-55-10-50z" fill="#032065" stroke="#032065"/><path d="M850 401c-33 4-27 55 6 51s26-54-6-51z" fill="#032065" stroke="#032065"/><path d="M890 443c-32 6-20 56 11 50 32-7 24-56-11-50z" fill="#032065" stroke="#032065"/></g></svg>
CSS background-image
.dotted-arrow {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cY-Fd3EWU9Aa/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.dotted-arrow {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cY-Fd3EWU9Aa/amnt.svg") center / contain no-repeat;
}
React
import DottedArrowSvg from "./dotted-arrow.jsx"; // from the React tab above

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

Tags

dotted arrowdotsdirectionpointerelementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Dotted Arrow: A horizontal trail of dots ending in a two-sided dotted arrowhead. A flat element. as part of the pack Dots and grids, 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