navigation arrow icon
navigation-arrow-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- navigation-arrow-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the navigation arrow icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M236.65 108.1L60.72 42.83h-.13a14 14 0 0 0-17.81 17.76s0 .09 0 .13l65.32 175.93a13.77 13.77 0 0 0 13.18 9.35h.26a13.8 13.8 0 0 0 13.14-9.88v-.15l22.14-79.1L236 134.73h.15a14 14 0 0 0 .53-26.58Zm-4 15.1l-82.26 23a6 6 0 0 0-4.16 4.16l-23 82.26a1.85 1.85 0 0 1-1.86 1.36a1.82 1.82 0 0 1-1.92-1.35a.6.6 0 0 0 0-.12L54.11 56.62a2 2 0 0 1 2.51-2.51l175.91 65.26h.12a2 2 0 0 1 0 3.79Z"/></svg>
React
import type { SVGProps } from "react";
export function PhNavigationArrowLight(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M236.65 108.1L60.72 42.83h-.13a14 14 0 0 0-17.81 17.76s0 .09 0 .13l65.32 175.93a13.77 13.77 0 0 0 13.18 9.35h.26a13.8 13.8 0 0 0 13.14-9.88v-.15l22.14-79.1L236 134.73h.15a14 14 0 0 0 .53-26.58Zm-4 15.1l-82.26 23a6 6 0 0 0-4.16 4.16l-23 82.26a1.85 1.85 0 0 1-1.86 1.36a1.82 1.82 0 0 1-1.92-1.35a.6.6 0 0 0 0-.12L54.11 56.62a2 2 0 0 1 2.51-2.51l175.91 65.26h.12a2 2 0 0 1 0 3.79Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M236.65 108.1L60.72 42.83h-.13a14 14 0 0 0-17.81 17.76s0 .09 0 .13l65.32 175.93a13.77 13.77 0 0 0 13.18 9.35h.26a13.8 13.8 0 0 0 13.14-9.88v-.15l22.14-79.1L236 134.73h.15a14 14 0 0 0 .53-26.58Zm-4 15.1l-82.26 23a6 6 0 0 0-4.16 4.16l-23 82.26a1.85 1.85 0 0 1-1.86 1.36a1.82 1.82 0 0 1-1.92-1.35a.6.6 0 0 0 0-.12L54.11 56.62a2 2 0 0 1 2.51-2.51l175.91 65.26h.12a2 2 0 0 1 0 3.79Z"/></svg> </template>
CSS
.icon-navigation-arrow-light {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M236.65%20108.1L60.72%2042.83h-.13a14%2014%200%200%200-17.81%2017.76s0%20.09%200%20.13l65.32%20175.93a13.77%2013.77%200%200%200%2013.18%209.35h.26a13.8%2013.8%200%200%200%2013.14-9.88v-.15l22.14-79.1L236%20134.73h.15a14%2014%200%200%200%20.53-26.58Zm-4%2015.1l-82.26%2023a6%206%200%200%200-4.16%204.16l-23%2082.26a1.85%201.85%200%200%201-1.86%201.36a1.82%201.82%200%200%201-1.92-1.35a.6.6%200%200%200%200-.12L54.11%2056.62a2%202%200%200%201%202.51-2.51l175.91%2065.26h.12a2%202%200%200%201%200%203.79Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M236.65%20108.1L60.72%2042.83h-.13a14%2014%200%200%200-17.81%2017.76s0%20.09%200%20.13l65.32%20175.93a13.77%2013.77%200%200%200%2013.18%209.35h.26a13.8%2013.8%200%200%200%2013.14-9.88v-.15l22.14-79.1L236%20134.73h.15a14%2014%200%200%200%20.53-26.58Zm-4%2015.1l-82.26%2023a6%206%200%200%200-4.16%204.16l-23%2082.26a1.85%201.85%200%200%201-1.86%201.36a1.82%201.82%200%200%201-1.92-1.35a.6.6%200%200%200%200-.12L54.11%2056.62a2%202%200%200%201%202.51-2.51l175.91%2065.26h.12a2%202%200%200%201%200%203.79Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/navigation-arrow-light.svg?color=%231a73e8&size=48
