route-outline from Material Symbols Light by Google · Outline · Hardware · Apache-2.0 Free for personal and commercial use.

Name
route-outline
Set
Material Symbols Light
Style
Outline
Category
Hardware
Viewbox
24×24
License
Apache 2.0
Aliases
route-outline-rounded

3 other variants in Material Symbols Light

The same icon in other sets

More hardware icons from Material Symbols Light

Use the route icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.521 19.479Q5.5 18.458 5.5 17V8.479q-.875-.325-1.437-.991T3.5 6.006q0-1.044.729-1.775q.728-.731 1.769-.731t1.771.731t.731 1.776q0 .814-.562 1.48T6.5 8.48V17q0 1.031.736 1.766q.735.734 1.768.734t1.764-.734T11.5 17V7q0-1.458 1.021-2.479T15 3.5t2.479 1.021T18.5 7v8.521q.875.325 1.438.991t.562 1.481q0 1.045-.728 1.776q-.729.731-1.77.731t-1.771-.731t-.731-1.775q0-.815.563-1.494t1.437-.979V7q0-1.031-.735-1.766q-.736-.734-1.769-.734t-1.764.735T12.5 7v10q0 1.458-1.021 2.479T9 20.5t-2.479-1.021M6 7.5q.617 0 1.059-.441Q7.5 6.617 7.5 6t-.441-1.059Q6.617 4.5 6 4.5t-1.059.441Q4.5 5.383 4.5 6t.441 1.059Q5.383 7.5 6 7.5m12 12q.617 0 1.059-.441q.441-.442.441-1.059t-.441-1.059Q18.617 16.5 18 16.5t-1.059.441Q16.5 17.383 16.5 18t.441 1.059q.442.441 1.059.441m0-1.5"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightRouteOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.521 19.479Q5.5 18.458 5.5 17V8.479q-.875-.325-1.437-.991T3.5 6.006q0-1.044.729-1.775q.728-.731 1.769-.731t1.771.731t.731 1.776q0 .814-.562 1.48T6.5 8.48V17q0 1.031.736 1.766q.735.734 1.768.734t1.764-.734T11.5 17V7q0-1.458 1.021-2.479T15 3.5t2.479 1.021T18.5 7v8.521q.875.325 1.438.991t.562 1.481q0 1.045-.728 1.776q-.729.731-1.77.731t-1.771-.731t-.731-1.775q0-.815.563-1.494t1.437-.979V7q0-1.031-.735-1.766q-.736-.734-1.769-.734t-1.764.735T12.5 7v10q0 1.458-1.021 2.479T9 20.5t-2.479-1.021M6 7.5q.617 0 1.059-.441Q7.5 6.617 7.5 6t-.441-1.059Q6.617 4.5 6 4.5t-1.059.441Q4.5 5.383 4.5 6t.441 1.059Q5.383 7.5 6 7.5m12 12q.617 0 1.059-.441q.441-.442.441-1.059t-.441-1.059Q18.617 16.5 18 16.5t-1.059.441Q16.5 17.383 16.5 18t.441 1.059q.442.441 1.059.441m0-1.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.521 19.479Q5.5 18.458 5.5 17V8.479q-.875-.325-1.437-.991T3.5 6.006q0-1.044.729-1.775q.728-.731 1.769-.731t1.771.731t.731 1.776q0 .814-.562 1.48T6.5 8.48V17q0 1.031.736 1.766q.735.734 1.768.734t1.764-.734T11.5 17V7q0-1.458 1.021-2.479T15 3.5t2.479 1.021T18.5 7v8.521q.875.325 1.438.991t.562 1.481q0 1.045-.728 1.776q-.729.731-1.77.731t-1.771-.731t-.731-1.775q0-.815.563-1.494t1.437-.979V7q0-1.031-.735-1.766q-.736-.734-1.769-.734t-1.764.735T12.5 7v10q0 1.458-1.021 2.479T9 20.5t-2.479-1.021M6 7.5q.617 0 1.059-.441Q7.5 6.617 7.5 6t-.441-1.059Q6.617 4.5 6 4.5t-1.059.441Q4.5 5.383 4.5 6t.441 1.059Q5.383 7.5 6 7.5m12 12q.617 0 1.059-.441q.441-.442.441-1.059t-.441-1.059Q18.617 16.5 18 16.5t-1.059.441Q16.5 17.383 16.5 18t.441 1.059q.442.441 1.059.441m0-1.5"/></svg>
</template>

CSS

.icon-route-outline {
  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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.521%2019.479Q5.5%2018.458%205.5%2017V8.479q-.875-.325-1.437-.991T3.5%206.006q0-1.044.729-1.775q.728-.731%201.769-.731t1.771.731t.731%201.776q0%20.814-.562%201.48T6.5%208.48V17q0%201.031.736%201.766q.735.734%201.768.734t1.764-.734T11.5%2017V7q0-1.458%201.021-2.479T15%203.5t2.479%201.021T18.5%207v8.521q.875.325%201.438.991t.562%201.481q0%201.045-.728%201.776q-.729.731-1.77.731t-1.771-.731t-.731-1.775q0-.815.563-1.494t1.437-.979V7q0-1.031-.735-1.766q-.736-.734-1.769-.734t-1.764.735T12.5%207v10q0%201.458-1.021%202.479T9%2020.5t-2.479-1.021M6%207.5q.617%200%201.059-.441Q7.5%206.617%207.5%206t-.441-1.059Q6.617%204.5%206%204.5t-1.059.441Q4.5%205.383%204.5%206t.441%201.059Q5.383%207.5%206%207.5m12%2012q.617%200%201.059-.441q.441-.442.441-1.059t-.441-1.059Q18.617%2016.5%2018%2016.5t-1.059.441Q16.5%2017.383%2016.5%2018t.441%201.059q.442.441%201.059.441m0-1.5%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.521%2019.479Q5.5%2018.458%205.5%2017V8.479q-.875-.325-1.437-.991T3.5%206.006q0-1.044.729-1.775q.728-.731%201.769-.731t1.771.731t.731%201.776q0%20.814-.562%201.48T6.5%208.48V17q0%201.031.736%201.766q.735.734%201.768.734t1.764-.734T11.5%2017V7q0-1.458%201.021-2.479T15%203.5t2.479%201.021T18.5%207v8.521q.875.325%201.438.991t.562%201.481q0%201.045-.728%201.776q-.729.731-1.77.731t-1.771-.731t-.731-1.775q0-.815.563-1.494t1.437-.979V7q0-1.031-.735-1.766q-.736-.734-1.769-.734t-1.764.735T12.5%207v10q0%201.458-1.021%202.479T9%2020.5t-2.479-1.021M6%207.5q.617%200%201.059-.441Q7.5%206.617%207.5%206t-.441-1.059Q6.617%204.5%206%204.5t-1.059.441Q4.5%205.383%204.5%206t.441%201.059Q5.383%207.5%206%207.5m12%2012q.617%200%201.059-.441q.441-.442.441-1.059t-.441-1.059Q18.617%2016.5%2018%2016.5t-1.059.441Q16.5%2017.383%2016.5%2018t.441%201.059q.442.441%201.059.441m0-1.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/route-outline.svg?color=%231a73e8&size=48