Navigate Next SVG icon, line

Navigate Next SVG icon, line

A single right-pointing chevron indicates the next view. Add it to a photo gallery carousel or a multi-step form.

Similar SVGs

More from Media and Audio Icons, Line · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/7CDJe47Ohx23/amnt.svg" alt="Navigate Next" 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="M579 509c-75 75-150 148-224 223-27 27-95 84-108 116-25 62 32 123 95 113 11-1 22-6 32-12 19-12 72-68 91-87 37-38 75-74 112-111 44-45 88-89 133-133 18-18 40-35 55-56 11-15 17-32 18-50 1-37-21-58-45-83-16-15-32-31-48-47-37-38-74-75-111-112-38-36-76-74-112-111-20-21-68-73-88-87-10-7-22-12-33-14-64-11-119 50-96 112 11 30 80 90 106 117 74 74 148 148 223 222z" fill="#012769" stroke="#012769"/></g></svg>
CSS background-image
.navigate-next {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/7CDJe47Ohx23/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.navigate-next {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/7CDJe47Ohx23/amnt.svg") center / contain no-repeat;
}
React
import NavigateNextSvg from "./navigate-next.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Navigate Next: Single right-pointing chevron. A flat colour icon. as part of the pack Media and Audio 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