Menu

Beta
Sign in
Beta
Route SVG icon, line

Route SVG icon, line

Two dots connect through a winding path with an arrow midway. Use it to label a planned route in a cycling app or a delivery driver schedule.

Free · from Maps and location icons, line · Set 2

Similar SVGs

More from Maps and location icons, line · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LdHd8oTvWrB3/amnt.svg" alt="Route" 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="midnight" data-name="Midnight"><path d="M307 160c-6-10-9-21-17-31-22-30-61-48-98-46-50 3-93 38-105 86-31 114 111 196 193 111 29-31 10-33 62-19 23 6 47 14 66 29 48 41 3 91-8 137-22 91 29 159 109 197 14 7 29 15 45 19-4 11-13 25-13 37 0 31 68-13 92-7 42 11 80 33 109 67-11 14-20 28-26 46-19 64 24 134 90 147 93 17 165-83 124-167-13-27-39-50-69-59-9-2-18-2-26-4-3-1-6-1-8-3-5-3-10-15-14-20-16-21-37-40-60-53-12-7-24-13-36-18s-39-12-48-19c-6-5-11-16-16-22-6-8-33-49-39-51-5-1-8 0-12 4-8 9-9 26-16 37-39-14-97-37-100-86-3-45 40-87 35-152-9-108-122-148-214-160zM195 104c94-1 133 121 54 174-14 9-31 16-48 16-93 2-133-121-55-174 14-9 31-15 49-16zm117 76c70 12 153 35 181 108 12 31 10 65-1 96-18 53-47 97 3 145 17 17 39 28 62 38 35 15 43 20 55-21 8 6 60 79 60 85 0 2-1 3-3 5-4 4-90 28-103 33 7-45 29-29-26-52-23-9-45-20-64-34-43-31-67-80-61-134 6-50 54-101 25-151-25-43-88-59-133-64 7-18 4-35 5-54zM805 704c-15 5-38 10-48 23-9-8-15-18-24-25-22-20-50-32-77-41 20-11 60-8 33-41 9-1 19 6 27 10 36 17 68 40 89 74zm20 19c123-2 127 185 5 190-88 3-128-104-67-163 16-16 39-26 62-27z" fill="#010a29" stroke="#010a29"/></g><g id="amber" data-name="Amber"><path d="M312 180c-1 19 2 36-5 54 45 5 108 21 133 64 29 50-19 101-25 151-6 54 18 103 61 134 19 14 41 25 64 34 55 23 33 7 26 52 13-5 99-29 103-33 2-2 3-3 3-5 0-6-52-79-60-85-12 41-20 36-55 21-23-10-45-21-62-38-50-48-21-92-3-145 11-31 13-65 1-96-28-73-111-96-181-108z" fill="#fdc302" stroke="#fdc302"/><path d="M805 704c-21-34-53-57-89-74-8-4-18-11-27-10 27 33-13 30-33 41 27 9 55 21 77 41 9 7 15 17 24 25 10-13 33-18 48-23z" fill="#fdc302" stroke="#fdc302"/></g><g id="red" data-name="Red"><path d="M825 723c-23 1-46 11-62 27-61 59-21 166 67 163 122-5 118-192-5-190z" fill="#f23e35" stroke="#f23e35"/></g><g id="blue" data-name="Blue"><path d="M195 104c-18 1-35 7-49 16-78 53-38 176 55 174 17 0 34-7 48-16 79-53 40-175-54-174z" fill="#2499f1" stroke="#2499f1"/></g></svg>
CSS background-image
.route {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LdHd8oTvWrB3/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.route {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LdHd8oTvWrB3/amnt.svg") center / contain no-repeat;
}
React
import RouteSvg from "./route.jsx"; // from the React tab above

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

Tags

routepathnavigationmapsiconline

Made with AMNT

AMNT Draw 1.2 drew this from the words Route: A winding path connecting two dots, with an arrow midway. A flat colour icon. as part of the pack Maps and location icons, line · 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