Vehicle Truck Checkmark icon

Use the Vehicle Truck Checkmark 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 { VehicleTruckCheckmark24Regular, VehicleTruckCheckmark24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VehicleTruckCheckmark24Regular aria-label="Vehicle Truck Checkmark" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_vehicle_truck_checkmark_24_regular.svg" width="24" height="24" alt="Vehicle Truck Checkmark">

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="M12 6.5C12 9.53757 9.53757 12 6.5 12C3.46243 12 1 9.53757 1 6.5C1 3.46243 3.46243 1 6.5 1C9.53757 1 12 3.46243 12 6.5ZM5.85355 8.85355L9.85355 4.85355C10.0488 4.65829 10.0488 4.34171 9.85355 4.14645C9.65829 3.95118 9.34171 3.95118 9.14645 4.14645L5.5 7.79289L3.85355 6.14645C3.65829 5.95118 3.34171 5.95118 3.14645 6.14645C2.95118 6.34171 2.95118 6.65829 3.14645 6.85355L5.14645 8.85355C5.34171 9.04882 5.65829 9.04882 5.85355 8.85355ZM14.25 4.5H12.6865C12.5142 3.96653 12.2747 3.46321 11.9782 3H14.25C15.4926 3 16.5 4.00736 16.5 5.25V6H18.0508C18.9203 6 19.7119 6.501 20.0842 7.28681L21.7834 10.8741C21.926 11.1752 22 11.5042 22 11.8373V17.25C22 18.4926 20.9926 19.5 19.75 19.5H17.9585C17.7205 20.9189 16.4865 22 15 22C13.5135 22 12.2795 20.9189 12.0415 19.5H9.95852C9.72048 20.9189 8.4865 22 7 22C5.51012 22 4.27391 20.9139 4.03988 19.4903C2.89576 19.3844 2 18.4218 2 17.25V11.1904C2.44427 11.6168 2.94898 11.9806 3.5 12.2678V17.25C3.5 17.6379 3.7945 17.957 4.17212 17.996C4.58508 16.8329 5.69527 16 7 16C8.30622 16 9.41746 16.8348 9.82929 18H12.1707C12.5825 16.8348 13.6938 16 15 16V5.25C15 4.83579 14.6642 4.5 14.25 4.5ZM17.8293 18H19.75C20.1642 18 20.5 17.6642 20.5 17.25V17.0001H19.25C18.8358 17.0001 18.5 16.6643 18.5 16.2501C18.5 15.8358 18.8358 15.5001 19.25 15.5001H20.5V12.5L16.5 12.5V16.4013C17.1136 16.7563 17.5897 17.3222 17.8293 18ZM16.5 7.5V11L20.1833 11L18.7286 7.92894C18.6045 7.667 18.3406 7.5 18.0508 7.5H16.5ZM7 20.5C7.82843 20.5 8.5 19.8284 8.5 19C8.5 18.1716 7.82843 17.5 7 17.5C6.17157 17.5 5.5 18.1716 5.5 19C5.5 19.8284 6.17157 20.5 7 20.5ZM16.5 19C16.5 18.1716 15.8284 17.5 15 17.5C14.1716 17.5 13.5 18.1716 13.5 19C13.5 19.8284 14.1716 20.5 15 20.5C15.8284 20.5 16.5 19.8284 16.5 19Z" 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_truck_checkmark_24_regular.svg";

Details