Vehicle Truck icon
Used to represent general cargo scenarios. The Vehicle Truck icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Vehicle Truck 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 { VehicleTruck24Regular, VehicleTruck24Filled } from "@fluentui/react-icons";
export function Example() {
return <VehicleTruck24Regular aria-label="Vehicle Truck" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_vehicle_truck_24_regular.svg" width="24" height="24" alt="Vehicle Truck"> 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="M9.00537 15C9.55766 15 10.0054 14.5523 10.0054 14C10.0054 13.4477 9.55766 13 9.00537 13C8.45309 13 8.00537 13.4477 8.00537 14C8.00537 14.5523 8.45309 15 9.00537 15ZM15.9998 14C15.9998 14.5523 15.552 15 14.9998 15C14.4475 15 13.9998 14.5523 13.9998 14C13.9998 13.4477 14.4475 13 14.9998 13C15.552 13 15.9998 13.4477 15.9998 14ZM10.75 15.5C10.3358 15.5 10 15.8358 10 16.25C10 16.6642 10.3358 17 10.75 17H13.25C13.6642 17 14 16.6642 14 16.25C14 15.8358 13.6642 15.5 13.25 15.5H10.75ZM3 5.25C3 4.00736 4.00736 3 5.25 3H18.75C19.9926 3 21 4.00736 21 5.25V18.75C21 19.1642 20.6642 19.5 20.25 19.5H18.5V20.25C18.5 21.2165 17.7165 22 16.75 22H15.25C14.2835 22 13.5 21.2165 13.5 20.25V19.5H10.5V20.25C10.5 21.2165 9.7165 22 8.75 22H7.25C6.2835 22 5.5 21.2165 5.5 20.25V19.5H3.75C3.33579 19.5 3 19.1642 3 18.75V5.25ZM9 20.25V19.5H7V20.25C7 20.3881 7.11193 20.5 7.25 20.5H8.75C8.88807 20.5 9 20.3881 9 20.25ZM7 18H17V12H7V18ZM15 19.5V20.25C15 20.3881 15.1119 20.5 15.25 20.5H16.75C16.8881 20.5 17 20.3881 17 20.25V19.5H15ZM19.5 18V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25V18H5.5V11.25C5.5 11.1953 5.50599 11.1407 5.51786 11.0873L6.25684 7.76191C6.48561 6.73245 7.39869 6 8.45326 6H15.5467C16.6013 6 17.5144 6.73245 17.7432 7.76191L18.4821 11.0873C18.494 11.1407 18.5 11.1953 18.5 11.25V18H19.5ZM8.45326 7.5C8.10173 7.5 7.79737 7.74415 7.72112 8.0873L7.18496 10.5H16.815L16.2789 8.0873C16.2026 7.74415 15.8983 7.5 15.5467 7.5H8.45326Z" 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_24_regular.svg";Details
| Name | Vehicle Truck |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_vehicle_truck_24_regular.svg |
| Filled file | ic_fluent_vehicle_truck_24_filled.svg |
| React components | VehicleTruck24Regular, VehicleTruck24Filled |
| License | MIT (© Microsoft Corporation) |