Directions SVG icon, line

Directions SVG icon, line

Opposing arrows on a signpost show a choice of directions. It works on a park wayfinding map or beside turn-by-turn instructions on a travel site.

Similar SVGs

More from Maps and location icons, line · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/KxFygot2rTKn/amnt.svg" alt="Directions" 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="navy" data-name="Navy"><path d="M579 98c0-17 1-35-6-51-23-55-106-51-124 6-5 14-4 30-4 45-30 14-30 46 0 61v46h-212c0-16 0-32-15-42-29-18-62 19-83 36-19 15-37 30-56 44-9 8-20 14-28 23-6 6-9 15-9 23 0 9 4 19 10 25 9 10 22 17 33 26 17 13 34 26 51 39 21 17 51 51 80 35 17-9 17-25 17-42h212v101c-8 4-15 8-19 16-7 14-7 58 0 71 4 8 12 12 19 16v280c-28 4-37 27-37 53-5 3-11 4-16 7-19 12-24 32-24 53 0 11 2 19 12 25 15 10 109 5 133 5 23 0 117 5 132-5 10-6 11-15 11-25 1-40-10-43-40-60 0-26-9-49-37-53v-246h211c0 28 15 58 49 43 18-8 35-25 50-38 18-14 74-53 85-67 5-6 8-15 8-23s-4-17-9-22c-14-16-66-52-86-68-14-11-30-27-46-35-36-17-51 13-51 43h-211v-106c8-4 15-8 19-16 7-14 7-59 0-72-4-8-12-11-19-15v-76c29-8 30-53 0-60zm-19-1h-96c0-12-1-25 2-36 12-44 77-45 91-2 4 12 3 25 3 38zM451 116c12-3 65 0 82 0 12 0 28-3 40 0 12 4 12 20 0 24-13 3-64 0-81 0-13 0-29 3-41 0-12-4-12-20 0-24zm13 43h96v75h-96zm-19 66v9c-23 11-23 28-23 52 0 25-2 39 23 51v15c-45 0-89 0-133 0-23 0-44 0-66 0-47 0-25 4-32 36-2 9-11 13-19 11s-51-38-61-46c-12-9-72-51-73-63 0-3 1-6 3-9 5-9 57-46 68-55s56-48 66-49c5 0 11 2 14 7 13 25-18 41 28 41 22 0 45 0 68 0 45 0 91 0 137 0zm19 112h96v136h-96zM579 591v-15c25-14 23-26 23-52 0-20 1-35-16-47-2-2-5-2-6-4-2-3-1-8-1-11 17 3 47 1 66 0 21-1 42 1 64 1s43 0 66 0c45 0 30 3 35-33 1-9 6-16 16-15s51 37 62 45c12 9 72 52 74 62 1 4 0 8-2 12-4 8-56 45-67 54-11 8-57 47-65 48-6 2-13 0-17-6-12-22 19-39-24-39-23 0-47 0-69 0-47 0-93 0-139 0zM464 576h96v279h-96zM413 928c14-2 30 0 45 0 34 0 70 0 105 0 20 0 50-6 65 10 7 6 15 34 6 40-5 3-17 1-22 1-50 0-101 0-150 0-11 0-69 2-73-2-3-3-2-8-2-11-1-17 7-35 26-38zm29-621v-45c1-4 4-7 8-9 5-1 122-1 126 1 4 1 6 5 6 9v43c0 5-3 10-8 11h-124c-5 0-8-5-8-10zm0 205v-11c1-4 4-7 8-9 6-2 118-2 124 0 5 2 8 5 8 10v42c1 6-3 12-9 12h-123c-12-2-8-21-8-29v-6zM429 908c-5-14 3-32 19-33h128c10 0 19 9 20 19v14z" fill="#012155" stroke="#012155"/><path d="M551 505c-25 4-18 41 6 38 25-3 18-41-6-38zm1 13c7-2 11 9 4 11-7 3-11-8-4-11z" fill="#012155" stroke="#012155"/><path d="M469 518c7-1 10 11 2 12-7 1-10-10-2-12zm20 9v-6c-4-22-38-20-38 3 0 22 33 26 38 3z" fill="#012155" stroke="#012155"/><path d="M469 279c7-1 10 11 2 12-7 1-10-10-2-12zm20 9v-6c-4-22-37-20-38 3-1 22 35 26 38 3z" fill="#012155" stroke="#012155"/><path d="M552 279c7-2 11 9 4 11-7 3-11-9-4-11zm21 9v-6c-3-22-38-20-38 3 0 22 35 26 38 3z" fill="#012155" stroke="#012155"/></g><g id="amber" data-name="Amber"><path d="M579 591c46 0 92 0 139 0 22 0 46 0 69 0 43 0 12 17 24 39 4 6 11 8 17 6 8-1 54-40 65-48 11-9 63-46 67-54 2-4 3-8 2-12-2-10-62-53-74-62-11-8-52-44-62-45s-15 6-16 15c-5 36 10 33-35 33-23 0-44 0-66 0s-43-2-64-1c-19 1-49 3-66 0 0 3-1 8 1 11 1 2 4 2 6 4 17 12 16 27 16 47 0 26 2 38-23 52z" fill="#fcc803" stroke="#fcc803"/><path d="M445 225c-46 0-92 0-137 0-23 0-46 0-68 0-46 0-15-16-28-41-3-5-9-7-14-7-10 1-55 40-66 49s-63 46-68 55c-2 3-3 6-3 9 1 12 61 54 73 63 10 8 53 44 61 46s17-2 19-11c7-32-15-36 32-36 22 0 43 0 66 0 44 0 88 0 133 0v-15c-25-12-23-26-23-51 0-24 0-41 23-52z" fill="#fcc803" stroke="#fcc803"/></g><g id="turquoise" data-name="Turquoise"><path d="M464 576v279h96v-279z" fill="#01bbb6" stroke="#01bbb6"/><path d="M464 337v136h96v-136z" fill="#01bbb6" stroke="#01bbb6"/><path d="M464 159v75h96v-75z" fill="#01bbb6" stroke="#01bbb6"/><path d="M560 97c0-13 1-26-3-38-14-43-79-42-91 2-3 11-2 24-2 36zM488 73h-14c1-13 14-38 31-37 6 1 10 6 6 12-4 7-20 1-23 25z" fill="#01bbb6" stroke="#01bbb6"/><path d="M596 908h-167z" fill="#01bbb6" stroke="#01bbb6"/><path d="M448 875h128z" fill="#01bbb6" stroke="#01bbb6"/><path d="M574 317h-124z" fill="#01bbb6" stroke="#01bbb6"/><path d="M573 556h-123z" fill="#01bbb6" stroke="#01bbb6"/><path d="M442 307v-45z" fill="#01bbb6" stroke="#01bbb6"/><path d="M582 306v-43z" fill="#01bbb6" stroke="#01bbb6"/><path d="M582 544v-42z" fill="#01bbb6" stroke="#01bbb6"/><path d="M596 908v-14z" fill="#01bbb6" stroke="#01bbb6"/><path d="M442 512v-11z" fill="#01bbb6" stro
…
CSS background-image
.directions {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/KxFygot2rTKn/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.directions {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/KxFygot2rTKn/amnt.svg") center / contain no-repeat;
}
React
import DirectionsSvg from "./directions.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Directions: A signpost with two arrows pointing in opposite directions. 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