mode of travel icon
mode-of-travel from Material Symbols by Google · Regular · Maps · Apache-2.0 Free for personal and commercial use.
- Name
- mode-of-travel
- Set
- Material Symbols
- Style
- Regular
- Category
- Maps
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- mode-of-travel-outline, mode-of-travel-outline-sharp, mode-of-travel-sharp
1 other variant in Material Symbols
The same icon in other sets
More maps icons from Material Symbols
Use the mode of travel icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-.275 0-.5-.137t-.35-.363l-.175-.35q-.275-.525-.6-1.012T9.65 19.2Q8.6 17.95 7.4 16.888T5.325 14.45q-.7-.95-1.012-2.087T4 10.025Q4 6.7 6.313 4.35T11.974 2q3.4 0 5.713 2.4T20 10.2l2.1-2.1l1.4 1.4L19 14l-4.5-4.5l1.375-1.4L18 10.2q0-2.55-1.737-4.35T11.974 4q-2.5 0-4.225 1.763T6 10.025q0 .9.238 1.738t.737 1.562q.7 1.05 1.6 1.925t1.775 1.775q.45.475.838.95t.787.975q.2-.3.413-.587t.462-.563q-.175-.275-.275-.612t-.1-.688q0-1.05.725-1.775T14.975 14t1.775.725t.725 1.775t-.725 1.775t-1.775.725h-.213q-.087 0-.212-.025q-.45.5-.85 1.038T13 21.15l-.175.35q-.125.25-.35.375T12 22"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsModeOfTravel(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="M12 22q-.275 0-.5-.137t-.35-.363l-.175-.35q-.275-.525-.6-1.012T9.65 19.2Q8.6 17.95 7.4 16.888T5.325 14.45q-.7-.95-1.012-2.087T4 10.025Q4 6.7 6.313 4.35T11.974 2q3.4 0 5.713 2.4T20 10.2l2.1-2.1l1.4 1.4L19 14l-4.5-4.5l1.375-1.4L18 10.2q0-2.55-1.737-4.35T11.974 4q-2.5 0-4.225 1.763T6 10.025q0 .9.238 1.738t.737 1.562q.7 1.05 1.6 1.925t1.775 1.775q.45.475.838.95t.787.975q.2-.3.413-.587t.462-.563q-.175-.275-.275-.612t-.1-.688q0-1.05.725-1.775T14.975 14t1.775.725t.725 1.775t-.725 1.775t-1.775.725h-.213q-.087 0-.212-.025q-.45.5-.85 1.038T13 21.15l-.175.35q-.125.25-.35.375T12 22"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-.275 0-.5-.137t-.35-.363l-.175-.35q-.275-.525-.6-1.012T9.65 19.2Q8.6 17.95 7.4 16.888T5.325 14.45q-.7-.95-1.012-2.087T4 10.025Q4 6.7 6.313 4.35T11.974 2q3.4 0 5.713 2.4T20 10.2l2.1-2.1l1.4 1.4L19 14l-4.5-4.5l1.375-1.4L18 10.2q0-2.55-1.737-4.35T11.974 4q-2.5 0-4.225 1.763T6 10.025q0 .9.238 1.738t.737 1.562q.7 1.05 1.6 1.925t1.775 1.775q.45.475.838.95t.787.975q.2-.3.413-.587t.462-.563q-.175-.275-.275-.612t-.1-.688q0-1.05.725-1.775T14.975 14t1.775.725t.725 1.775t-.725 1.775t-1.775.725h-.213q-.087 0-.212-.025q-.45.5-.85 1.038T13 21.15l-.175.35q-.125.25-.35.375T12 22"/></svg> </template>
CSS
.icon-mode-of-travel {
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%22M12%2022q-.275%200-.5-.137t-.35-.363l-.175-.35q-.275-.525-.6-1.012T9.65%2019.2Q8.6%2017.95%207.4%2016.888T5.325%2014.45q-.7-.95-1.012-2.087T4%2010.025Q4%206.7%206.313%204.35T11.974%202q3.4%200%205.713%202.4T20%2010.2l2.1-2.1l1.4%201.4L19%2014l-4.5-4.5l1.375-1.4L18%2010.2q0-2.55-1.737-4.35T11.974%204q-2.5%200-4.225%201.763T6%2010.025q0%20.9.238%201.738t.737%201.562q.7%201.05%201.6%201.925t1.775%201.775q.45.475.838.95t.787.975q.2-.3.413-.587t.462-.563q-.175-.275-.275-.612t-.1-.688q0-1.05.725-1.775T14.975%2014t1.775.725t.725%201.775t-.725%201.775t-1.775.725h-.213q-.087%200-.212-.025q-.45.5-.85%201.038T13%2021.15l-.175.35q-.125.25-.35.375T12%2022%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%22M12%2022q-.275%200-.5-.137t-.35-.363l-.175-.35q-.275-.525-.6-1.012T9.65%2019.2Q8.6%2017.95%207.4%2016.888T5.325%2014.45q-.7-.95-1.012-2.087T4%2010.025Q4%206.7%206.313%204.35T11.974%202q3.4%200%205.713%202.4T20%2010.2l2.1-2.1l1.4%201.4L19%2014l-4.5-4.5l1.375-1.4L18%2010.2q0-2.55-1.737-4.35T11.974%204q-2.5%200-4.225%201.763T6%2010.025q0%20.9.238%201.738t.737%201.562q.7%201.05%201.6%201.925t1.775%201.775q.45.475.838.95t.787.975q.2-.3.413-.587t.462-.563q-.175-.275-.275-.612t-.1-.688q0-1.05.725-1.775T14.975%2014t1.775.725t.725%201.775t-.725%201.775t-1.775.725h-.213q-.087%200-.212-.025q-.45.5-.85%201.038T13%2021.15l-.175.35q-.125.25-.35.375T12%2022%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/mode-of-travel.svg?color=%231a73e8&size=48
