Vehicle Tractor icon

Use the Vehicle Tractor 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 { VehicleTractor24Regular, VehicleTractor24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M7.02069 3C5.9208 3 4.98212 3.79518 4.8013 4.8801L3.97882 9.815C2.1971 10.8554 1 12.7879 1 15C1 18.3137 3.68629 21 7 21C9.61244 21 11.8349 19.3304 12.6586 17H16.0354C16.0121 17.1633 16 17.3302 16 17.5C16 19.433 17.567 21 19.5 21C21.433 21 23 19.433 23 17.5C23 16.5454 22.6179 15.6801 21.9982 15.0487V12.25C21.9982 10.4551 20.5432 9 18.7482 9H17.5V6.75C17.5 6.33579 17.1642 6 16.75 6C16.3358 6 16 6.33579 16 6.75V9H13.8853L13.1987 4.8801C13.0179 3.79518 12.0792 3 10.9793 3H7.02069ZM12.9795 15.5C12.9931 15.3351 13 15.1684 13 15C13 13.208 12.2144 11.5994 10.9687 10.5H13.2359C13.2447 10.5002 13.2535 10.5002 13.2623 10.5H18.7482C19.7147 10.5 20.4982 11.2835 20.4982 12.25V14.1444C20.1819 14.0505 19.8468 14 19.5 14C18.3106 14 17.2598 14.5933 16.6273 15.5H12.9795ZM7.03651 9.00011C7.02435 9.00004 7.01218 9 7 9C6.52091 9 6.05494 9.05615 5.60831 9.16223L6.2809 5.1267C6.34117 4.76506 6.65406 4.5 7.02069 4.5H10.9793C11.3459 4.5 11.6588 4.76506 11.7191 5.1267L12.3647 9H7.06327C7.05434 9 7.04542 9.00004 7.03651 9.00011ZM19.5 15.5C20.6046 15.5 21.5 16.3954 21.5 17.5C21.5 18.6046 20.6046 19.5 19.5 19.5C18.3954 19.5 17.5 18.6046 17.5 17.5C17.5 16.3954 18.3954 15.5 19.5 15.5ZM2.5 15C2.5 12.5147 4.51472 10.5 7 10.5C9.48528 10.5 11.5 12.5147 11.5 15C11.5 17.4853 9.48528 19.5 7 19.5C4.51472 19.5 2.5 17.4853 2.5 15Z" 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_tractor_24_regular.svg";

Details

Keywords

travelridemapcommutedistanceeventvehiclecartruckautomobiletractordirtroad