commute icon
commute from Material Symbols by Google · Regular · Transit · Apache-2.0 Free for personal and commercial use.
- Name
- commute
- Set
- Material Symbols
- Style
- Regular
- Category
- Transit
- Viewbox
- 24×24
- License
- Apache 2.0
5 other variants in Material Symbols
The same icon in other sets
More transit icons from Material Symbols
agricultureairlinesairport-shuttleambulanceauto-towingauto-transmissionbike-dockbike-lanebike-scooterboat-busboat-railwaybus-alertbus-map-pinbus-railwaycable-carcar-crashcar-defrost-leftcar-defrost-low-leftcar-defrost-low-rightcar-defrost-mid-leftcar-defrost-mid-low-leftcar-defrost-mid-low-rightcar-defrost-mid-rightcar-defrost-right
Use the commute icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 19.35v-5.7l1.4-4q.125-.275.363-.462T12.35 9h7.3q.35 0 .588.188t.362.462l1.4 4v5.7q0 .275-.187.463T21.35 20h-.7q-.275 0-.462-.187T20 19.35v-.85h-8v.85q0 .275-.187.463T11.35 20h-.7q-.275 0-.462-.187T10 19.35m2-6.85h8l-.7-2h-6.6zm1 4q.425 0 .713-.288T14 15.5t-.288-.712T13 14.5t-.712.288T12 15.5t.288.713t.712.287m6 0q.425 0 .713-.288T20 15.5t-.288-.712T19 14.5t-.712.288T18 15.5t.288.713t.712.287M4 20v-1l1-1q-1.25 0-2.125-.875T2 15V7q0-1.65 1.475-2.325T8.5 4q3.7 0 5.1.65T15 7v1h-2V7H4v6h5v7zm1.713-4.288Q6 15.425 6 15t-.288-.712T5 14t-.712.288T4 15t.288.713T5 16t.713-.288"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsCommute(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="M10 19.35v-5.7l1.4-4q.125-.275.363-.462T12.35 9h7.3q.35 0 .588.188t.362.462l1.4 4v5.7q0 .275-.187.463T21.35 20h-.7q-.275 0-.462-.187T20 19.35v-.85h-8v.85q0 .275-.187.463T11.35 20h-.7q-.275 0-.462-.187T10 19.35m2-6.85h8l-.7-2h-6.6zm1 4q.425 0 .713-.288T14 15.5t-.288-.712T13 14.5t-.712.288T12 15.5t.288.713t.712.287m6 0q.425 0 .713-.288T20 15.5t-.288-.712T19 14.5t-.712.288T18 15.5t.288.713t.712.287M4 20v-1l1-1q-1.25 0-2.125-.875T2 15V7q0-1.65 1.475-2.325T8.5 4q3.7 0 5.1.65T15 7v1h-2V7H4v6h5v7zm1.713-4.288Q6 15.425 6 15t-.288-.712T5 14t-.712.288T4 15t.288.713T5 16t.713-.288"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 19.35v-5.7l1.4-4q.125-.275.363-.462T12.35 9h7.3q.35 0 .588.188t.362.462l1.4 4v5.7q0 .275-.187.463T21.35 20h-.7q-.275 0-.462-.187T20 19.35v-.85h-8v.85q0 .275-.187.463T11.35 20h-.7q-.275 0-.462-.187T10 19.35m2-6.85h8l-.7-2h-6.6zm1 4q.425 0 .713-.288T14 15.5t-.288-.712T13 14.5t-.712.288T12 15.5t.288.713t.712.287m6 0q.425 0 .713-.288T20 15.5t-.288-.712T19 14.5t-.712.288T18 15.5t.288.713t.712.287M4 20v-1l1-1q-1.25 0-2.125-.875T2 15V7q0-1.65 1.475-2.325T8.5 4q3.7 0 5.1.65T15 7v1h-2V7H4v6h5v7zm1.713-4.288Q6 15.425 6 15t-.288-.712T5 14t-.712.288T4 15t.288.713T5 16t.713-.288"/></svg> </template>
CSS
.icon-commute {
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%22M10%2019.35v-5.7l1.4-4q.125-.275.363-.462T12.35%209h7.3q.35%200%20.588.188t.362.462l1.4%204v5.7q0%20.275-.187.463T21.35%2020h-.7q-.275%200-.462-.187T20%2019.35v-.85h-8v.85q0%20.275-.187.463T11.35%2020h-.7q-.275%200-.462-.187T10%2019.35m2-6.85h8l-.7-2h-6.6zm1%204q.425%200%20.713-.288T14%2015.5t-.288-.712T13%2014.5t-.712.288T12%2015.5t.288.713t.712.287m6%200q.425%200%20.713-.288T20%2015.5t-.288-.712T19%2014.5t-.712.288T18%2015.5t.288.713t.712.287M4%2020v-1l1-1q-1.25%200-2.125-.875T2%2015V7q0-1.65%201.475-2.325T8.5%204q3.7%200%205.1.65T15%207v1h-2V7H4v6h5v7zm1.713-4.288Q6%2015.425%206%2015t-.288-.712T5%2014t-.712.288T4%2015t.288.713T5%2016t.713-.288%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%22M10%2019.35v-5.7l1.4-4q.125-.275.363-.462T12.35%209h7.3q.35%200%20.588.188t.362.462l1.4%204v5.7q0%20.275-.187.463T21.35%2020h-.7q-.275%200-.462-.187T20%2019.35v-.85h-8v.85q0%20.275-.187.463T11.35%2020h-.7q-.275%200-.462-.187T10%2019.35m2-6.85h8l-.7-2h-6.6zm1%204q.425%200%20.713-.288T14%2015.5t-.288-.712T13%2014.5t-.712.288T12%2015.5t.288.713t.712.287m6%200q.425%200%20.713-.288T20%2015.5t-.288-.712T19%2014.5t-.712.288T18%2015.5t.288.713t.712.287M4%2020v-1l1-1q-1.25%200-2.125-.875T2%2015V7q0-1.65%201.475-2.325T8.5%204q3.7%200%205.1.65T15%207v1h-2V7H4v6h5v7zm1.713-4.288Q6%2015.425%206%2015t-.288-.712T5%2014t-.712.288T4%2015t.288.713T5%2016t.713-.288%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/commute.svg?color=%231a73e8&size=48
