Vehicle Motorcycle icon

Use the Vehicle Motorcycle icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { VehicleMotorcycle24Regular, VehicleMotorcycle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VehicleMotorcycle24Regular aria-label="Vehicle Motorcycle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_vehicle_motorcycle_24_regular.svg" width="24" height="24" alt="Vehicle Motorcycle">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 4C10.3358 4 10 4.33579 10 4.75C10 5.16421 10.3358 5.5 10.75 5.5H12.3407C12.6202 5.5 12.8764 5.65534 13.0057 5.90308L14.6686 9.09041C14.4558 9.03149 14.2316 9 14 9H11.7811C10.256 9 8.84778 9.81722 8.0911 11.1414L7.31476 12.5H4.75C2.67893 12.5 1 14.1789 1 16.25C1 18.3211 2.67893 20 4.75 20C6.38277 20 7.77182 18.9565 8.28662 17.5H10.2992C11.4655 17.5 12.5423 16.8751 13.121 15.8625L14.1893 13.9929C15.1961 13.9176 16.0366 13.2459 16.3589 12.3301L16.8854 13.3393C16.0401 14.0269 15.5 15.0754 15.5 16.25C15.5 18.3211 17.1789 20 19.25 20C21.3211 20 23 18.3211 23 16.25C23 14.1789 21.3211 12.5 19.25 12.5C18.8909 12.5 18.5437 12.5505 18.2149 12.6447L17.1507 10.605C17.5399 10.855 18.003 11 18.5 11H20.25C20.6642 11 21 10.6642 21 10.25V6.75C21 6.33579 20.6642 6 20.25 6H18.5C17.1518 6 16.0528 7.06724 16.0018 8.40298L14.3355 5.20923C13.9478 4.46602 13.179 4 12.3407 4H10.75ZM13.7645 12.5C13.7553 12.4998 13.7461 12.4998 13.7368 12.5H9.04239L9.39346 11.8856C9.88308 11.0288 10.7943 10.5 11.7811 10.5H14C14.5523 10.5 15 10.9477 15 11.5C15 12.0523 14.5523 12.5 14 12.5H13.7645ZM12.4576 14L11.8186 15.1182C11.507 15.6635 10.9272 16 10.2992 16H8.4918C8.44258 15.2523 8.1742 14.5644 7.75027 14H12.4576ZM4.75 14C5.99264 14 7 15.0074 7 16.25C7 17.4926 5.99264 18.5 4.75 18.5C3.50736 18.5 2.5 17.4926 2.5 16.25C2.5 15.0074 3.50736 14 4.75 14ZM17.6038 14.7162L18.5851 16.5969C18.7767 16.9642 19.2297 17.1065 19.5969 16.9149C19.9642 16.7233 20.1065 16.2703 19.9149 15.9031L18.9335 14.0221C19.0369 14.0075 19.1426 14 19.25 14C20.4926 14 21.5 15.0074 21.5 16.25C21.5 17.4926 20.4926 18.5 19.25 18.5C18.0074 18.5 17 17.4926 17 16.25C17 15.6573 17.2292 15.1181 17.6038 14.7162ZM17.5 8.5C17.5 7.94772 17.9477 7.5 18.5 7.5H19.5V9.5H18.5C17.9477 9.5 17.5 9.05228 17.5 8.5Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/vehicle_motorcycle_24_regular.svg";

Details

Keywords

travelridemapcommutedistanceautomobilemotorbikescooter