route icon
route-broken from Solar by 480 Design · Broken · Map · CC-BY-4.0 Attribution required.
- Name
- route-broken
- Set
- Solar
- Style
- Broken
- Category
- Map
- Viewbox
- 24×24
- License
- CC BY 4.0
5 other variants in Solar
The same icon in other sets
More map icons from Solar
branching-paths-down-boldbranching-paths-up-boldcompass-big-boldcompass-boldcompass-square-boldglobal-boldglobe-boldgps-boldmap-arrow-down-boldmap-arrow-left-boldmap-arrow-right-boldmap-arrow-square-boldmap-arrow-up-boldmap-boldmap-point-add-boldmap-point-boldmap-point-favorite-boldmap-point-hospital-boldmap-point-remove-boldmap-point-rotate-boldmap-point-school-boldmap-point-search-boldmap-point-wave-boldpeople-nearby-bold
Use the route icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M17.8578 6.14204C20.6191 8.90341 21.9998 10.2841 21.9998 11.9998C21.9998 13.7155 20.6191 15.0962 17.8578 17.8575C15.0964 20.6189 13.7157 21.9996 12 21.9996C10.2843 21.9996 8.90365 20.6189 6.14229 17.8575C3.38093 15.0962 2.00024 13.7155 2.00024 11.9998C2.00024 10.2841 3.38093 8.90341 6.14229 6.14204C8.90365 3.38068 10.2843 2 12 2C13.1408 2 14.1335 2.61041 15.4824 3.83123"/><path stroke-linejoin="round" d="M9 14C9 13.0572 9 12.5858 9.29289 12.2929C9.58579 12 10.0572 12 11 12H15M13 14L15 12L13 10"/></g></svg>
React
import type { SVGProps } from "react";
export function SolarRouteBroken(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5"><path d="M17.8578 6.14204C20.6191 8.90341 21.9998 10.2841 21.9998 11.9998C21.9998 13.7155 20.6191 15.0962 17.8578 17.8575C15.0964 20.6189 13.7157 21.9996 12 21.9996C10.2843 21.9996 8.90365 20.6189 6.14229 17.8575C3.38093 15.0962 2.00024 13.7155 2.00024 11.9998C2.00024 10.2841 3.38093 8.90341 6.14229 6.14204C8.90365 3.38068 10.2843 2 12 2C13.1408 2 14.1335 2.61041 15.4824 3.83123"/><path strokeLinejoin="round" d="M9 14C9 13.0572 9 12.5858 9.29289 12.2929C9.58579 12 10.0572 12 11 12H15M13 14L15 12L13 10"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M17.8578 6.14204C20.6191 8.90341 21.9998 10.2841 21.9998 11.9998C21.9998 13.7155 20.6191 15.0962 17.8578 17.8575C15.0964 20.6189 13.7157 21.9996 12 21.9996C10.2843 21.9996 8.90365 20.6189 6.14229 17.8575C3.38093 15.0962 2.00024 13.7155 2.00024 11.9998C2.00024 10.2841 3.38093 8.90341 6.14229 6.14204C8.90365 3.38068 10.2843 2 12 2C13.1408 2 14.1335 2.61041 15.4824 3.83123"/><path stroke-linejoin="round" d="M9 14C9 13.0572 9 12.5858 9.29289 12.2929C9.58579 12 10.0572 12 11 12H15M13 14L15 12L13 10"/></g></svg> </template>
CSS
.icon-route-broken {
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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17.8578%206.14204C20.6191%208.90341%2021.9998%2010.2841%2021.9998%2011.9998C21.9998%2013.7155%2020.6191%2015.0962%2017.8578%2017.8575C15.0964%2020.6189%2013.7157%2021.9996%2012%2021.9996C10.2843%2021.9996%208.90365%2020.6189%206.14229%2017.8575C3.38093%2015.0962%202.00024%2013.7155%202.00024%2011.9998C2.00024%2010.2841%203.38093%208.90341%206.14229%206.14204C8.90365%203.38068%2010.2843%202%2012%202C13.1408%202%2014.1335%202.61041%2015.4824%203.83123%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M9%2014C9%2013.0572%209%2012.5858%209.29289%2012.2929C9.58579%2012%2010.0572%2012%2011%2012H15M13%2014L15%2012L13%2010%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17.8578%206.14204C20.6191%208.90341%2021.9998%2010.2841%2021.9998%2011.9998C21.9998%2013.7155%2020.6191%2015.0962%2017.8578%2017.8575C15.0964%2020.6189%2013.7157%2021.9996%2012%2021.9996C10.2843%2021.9996%208.90365%2020.6189%206.14229%2017.8575C3.38093%2015.0962%202.00024%2013.7155%202.00024%2011.9998C2.00024%2010.2841%203.38093%208.90341%206.14229%206.14204C8.90365%203.38068%2010.2843%202%2012%202C13.1408%202%2014.1335%202.61041%2015.4824%203.83123%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M9%2014C9%2013.0572%209%2012.5858%209.29289%2012.2929C9.58579%2012%2010.0572%2012%2011%2012H15M13%2014L15%2012L13%2010%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/route-broken.svg?color=%231a73e8&size=48
