Menu

Beta
Sign in
Beta
Arrow Through Circle SVG element, flat

Arrow Through Circle SVG element, flat

A horizontal arrow passes through the middle of an outlined circle. Use it to show a route crossing a marked point on a map or movement through a stage in a diagram.

Free · from Hand-Drawn Arrows, Flat · Set 2

Similar SVGs

More from Hand-Drawn Arrows, 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/xd7VZBQf0zch/amnt.svg" alt="Arrow Through Circle" 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="teal" data-name="Teal"><path d="M795 472h-565l-2 6-32-1c-5 2-17 3-22 0-2-1-37-46-42-52-2-2-4-7-8-9-4-1-88-1-91 0-2 1-4 2-5 5l61 79-75 76c1 2 3 4 5 5 4 2 89 1 95 0 4-1 7-6 10-8 8-8 43-48 50-50 6-3 15-1 22-1h34v5h564l2-6h32v6h55c0 12-4 54 7 59 24-15 46-33 69-50 8-6 48-31 47-39-1-5-13-11-17-14-23-16-47-33-69-49-5-4-25-21-30-21-3 0-5 2-7 5-3 6 0 44 0 54h-54v5h-34z" fill="#15b5a3" stroke="#15b5a3"/></g><g id="grape" data-name="Grape"><path d="M196 477l32 1 2-6c-1-21 6-45 13-65 38-113 149-196 270-196 71 0 143 27 194 78 39 39 67 85 81 139 3 14 3 30 7 44v5h34v-5c-4-16-5-33-8-49-14-60-46-116-91-158-59-54-137-90-219-87-131 4-250 86-296 209-10 28-20 61-19 90z" fill="#01266a" stroke="#01266a"/><path d="M230 527v-5h-34c16 164 147 289 314 291 79 1 159-30 217-84 42-39 76-92 91-147 5-18 5-37 10-55v-6h-32l-2 6c0 24-9 50-17 72-43 109-150 180-265 180-114 0-218-70-262-174-11-25-16-51-20-78z" fill="#01266a" stroke="#01266a"/></g></svg>
CSS background-image
.arrow-through-circle {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/xd7VZBQf0zch/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.arrow-through-circle {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/xd7VZBQf0zch/amnt.svg") center / contain no-repeat;
}
React
import ArrowThroughCircleSvg from "./arrow-through-circle.jsx"; // from the React tab above

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

Tags

arrowcirclethroughpassarrowselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Arrow Through Circle: A horizontal arrow passes through the centre of an outlined circle. A flat element. as part of the pack Hand-Drawn Arrows, 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